npm package diff
Package: @chakra-ui/react
Versions: 2.10.1 - 2.10.2
Modified: package/dist/cjs/skeleton/skeleton.cjs
Index: package/dist/cjs/skeleton/skeleton.cjs
===================================================================
--- package/dist/cjs/skeleton/skeleton.cjs
+++ package/dist/cjs/skeleton/skeleton.cjs
@@ -56,8 +56,9 @@
fadeDuration,
speed,
className,
fitContent,
+ animation: animationProp,
...rest
} = styledSystem.omitThemingProps(skeletonProps);
const [startColorVar, endColorVar] = hooks.useToken("colors", [
startColor,
@@ -91,9 +92,9 @@
width: fitContent ? "fit-content" : void 0,
...styles,
...cssVarStyles,
_dark: { ...styles["_dark"], ...cssVarStyles },
- animation: `${speed}s linear infinite alternate ${bgFade}`
+ animation: animationProp || `${speed}s linear infinite alternate ${bgFade}`
}
}
);
});Modified: package/dist/cjs/slider/slider-utils.cjs
Index: package/dist/cjs/slider/slider-utils.cjs
===================================================================
--- package/dist/cjs/slider/slider-utils.cjs
+++ package/dist/cjs/slider/slider-utils.cjs
@@ -15,14 +15,11 @@
function orient(options) {
const { orientation, vertical, horizontal } = options;
return orientation === "vertical" ? vertical : horizontal;
}
-const zeroSize = { width: 0, height: 0 };
-const normalize = (a) => a || zeroSize;
function getStyles(options) {
- const { orientation, thumbPercents, thumbRects, isReversed } = options;
+ const { orientation, thumbPercents, isReversed } = options;
const getThumbStyle = (i) => {
- const rect = thumbRects[i] ?? zeroSize;
return {
position: "absolute",
userSelect: "none",
WebkitUserSelect: "none",
@@ -31,40 +28,22 @@
touchAction: "none",
...orient({
orientation,
vertical: {
- bottom: `calc(${thumbPercents[i]}% - ${rect.height / 2}px)`
+ bottom: `${thumbPercents[i]}%`
},
horizontal: {
- left: `calc(${thumbPercents[i]}% - ${rect.width / 2}px)`
+ left: `${thumbPercents[i]}%`
}
})
};
};
- const size = orientation === "vertical" ? thumbRects.reduce(
- (a, b) => normalize(a).height > normalize(b).height ? a : b,
- zeroSize
- ) : thumbRects.reduce(
- (a, b) => normalize(a).width > normalize(b).width ? a : b,
- zeroSize
- );
const rootStyle = {
position: "relative",
touchAction: "none",
WebkitTapHighlightColor: "rgba(0,0,0,0)",
userSelect: "none",
- outline: 0,
- ...orient({
- orientation,
- vertical: size ? {
- paddingLeft: size.width / 2,
- paddingRight: size.width / 2
- } : {},
- horizontal: size ? {
- paddingTop: size.height / 2,
- paddingBottom: size.height / 2
- } : {}
- })
+ outline: 0
};
const trackStyle = {
position: "absolute",
...orient({Modified: package/dist/cjs/descendant/use-descendant.cjs
Index: package/dist/cjs/descendant/use-descendant.cjs
===================================================================
--- package/dist/cjs/descendant/use-descendant.cjs
+++ package/dist/cjs/descendant/use-descendant.cjs
@@ -6,60 +6,56 @@
var react = require('react');
var descendant = require('./descendant.cjs');
var utils$1 = require('./utils.cjs');
-function useDescendants() {
- const descendants = react.useRef(new descendant.DescendantsManager());
- utils$1.useSafeLayoutEffect(() => {
- return () => descendants.current.destroy();
+function createDescendantContext() {
+ const [DescendantsContextProvider, useDescendantsContext] = utils.createContext({
+ name: "DescendantsProvider",
+ errorMessage: "useDescendantsContext must be used within DescendantsProvider"
});
- return descendants.current;
-}
-const [DescendantsContextProvider, useDescendantsContext] = utils.createContext({
- name: "DescendantsProvider",
- errorMessage: "useDescendantsContext must be used within DescendantsProvider"
-});
-function useDescendant(options) {
- const descendants = useDescendantsContext();
- const [index, setIndex] = react.useState(-1);
- const ref = react.useRef(null);
- utils$1.useSafeLayoutEffect(() => {
- return () => {
+ const useDescendant = (options) => {
+ const descendants = useDescendantsContext();
+ const [index, setIndex] = react.useState(-1);
+ const ref = react.useRef(null);
+ utils$1.useSafeLayoutEffect(() => {
+ return () => {
+ if (!ref.current)
+ return;
+ descendants.unregister(ref.current);
+ };
+ }, []);
+ utils$1.useSafeLayoutEffect(() => {
if (!ref.current)
return;
- descendants.unregister(ref.current);
+ const dataIndex = Number(ref.current.dataset["index"]);
+ if (index != dataIndex && !Number.isNaN(dataIndex)) {
+ setIndex(dataIndex);
+ }
+ });
+ const refCallback = options ? utils$1.cast(descendants.register(options)) : utils$1.cast(descendants.register);
+ return {
+ descendants,
+ index,
+ enabledIndex: descendants.enabledIndexOf(ref.current),
+ register: hooks.mergeRefs(refCallback, ref)
};
- }, []);
- utils$1.useSafeLayoutEffect(() => {
- if (!ref.current)
- return;
- const dataIndex = Number(ref.current.dataset["index"]);
- if (index != dataIndex && !Number.isNaN(dataIndex)) {
- setIndex(dataIndex);
- }
- });
- const refCallback = options ? utils$1.cast(descendants.register(options)) : utils$1.cast(descendants.register);
- return {
- descendants,
- index,
- enabledIndex: descendants.enabledIndexOf(ref.current),
- register: hooks.mergeRefs(refCallback, ref)
};
-}
-function createDescendantContext() {
- const ContextProvider = utils$1.cast(DescendantsContextProvider);
- const _useDescendantsContext = () => utils$1.cast(useDescendantsContext());
- const _useDescendant = (options) => useDescendant(options);
- const _useDescendants = () => useDescendants();
+ const useDescendants = () => {
+ const descendants = react.useRef(new descendant.DescendantsManager());
+ utils$1.useSafeLayoutEffect(() => {
+ return () => descendants.current.destroy();
+ });
+ return descendants.current;
+ };
return [
// context provider
- ContextProvider,
+ DescendantsContextProvider,
// call this when you need to read from context
- _useDescendantsContext,
+ useDescendantsContext,
// descendants state information, to be called and passed to `ContextProvider`
- _useDescendants,
+ useDescendants,
// descendant index information
- _useDescendant
+ useDescendant
];
}
exports.createDescendantContext = createDescendantContext;Modified: package/dist/cjs/menu/use-menu.cjs
Index: package/dist/cjs/menu/use-menu.cjs
===================================================================
--- package/dist/cjs/menu/use-menu.cjs
+++ package/dist/cjs/menu/use-menu.cjs
@@ -19,15 +19,8 @@
const [MenuProvider, useMenuContext] = utils.createContext({
strict: false,
name: "MenuContext"
});
-function useIds(idProp, ...prefixes) {
- const reactId = react.useId();
- const id = idProp || reactId;
- return react.useMemo(() => {
- return prefixes.map((prefix) => `${prefix}-${id}`);
- }, [id, prefixes]);
-}
function getOwnerDocument(node) {
return node?.ownerDocument ?? document;
}
function isActiveElement(element) {
@@ -53,8 +46,9 @@
...popperProps
} = props;
const menuRef = react.useRef(null);
const buttonRef = react.useRef(null);
+ const scrollIntoViewRef = react.useRef(true);
const descendants = useMenuDescendants();
const focusMenu = react.useCallback(() => {
requestAnimationFrame(() => {
menuRef.current?.focus({ preventScroll: false });
@@ -63,8 +57,10 @@
const focusFirstItem = react.useCallback(() => {
const id2 = setTimeout(() => {
if (initialFocusRef) {
initialFocusRef.current?.focus();
+ } else if (!descendants.count()) {
+ menuRef.current?.focus({ preventScroll: false });
} else {
const first = descendants.firstEnabled();
if (first)
setFocusedIndex(first.index);
@@ -73,11 +69,15 @@
timeoutIds.current.add(id2);
}, [descendants, initialFocusRef]);
const focusLastItem = react.useCallback(() => {
const id2 = setTimeout(() => {
- const last = descendants.lastEnabled();
- if (last)
- setFocusedIndex(last.index);
+ if (!descendants.count()) {
+ menuRef.current?.focus({ preventScroll: false });
+ } else {
+ const last = descendants.lastEnabled();
+ if (last)
+ setFocusedIndex(last.index);
+ }
});
timeoutIds.current.add(id2);
}, [descendants]);
const onOpenInternal = react.useCallback(() => {
@@ -110,20 +110,15 @@
placement,
direction
});
const [focusedIndex, setFocusedIndex] = react.useState(-1);
- hooks.useUpdateEffect(() => {
- if (!isOpen) {
- setFocusedIndex(-1);
- }
- }, [isOpen]);
hooks.useFocusOnHide(menuRef, {
focusRef: buttonRef,
visible: isOpen,
shouldFocus: true
});
const animationState = hooks.useAnimationState({ isOpen, ref: menuRef });
- const [buttonId, menuId] = useIds(id, `menu-button`, `menu-list`);
+ const [buttonId, menuId] = hooks.useIds(id, `menu-button`, `menu-list`);
const openAndFocusMenu = react.useCallback(() => {
onOpen();
focusMenu();
}, [onOpen, focusMenu]);
@@ -134,13 +129,33 @@
ids.forEach((id2) => clearTimeout(id2));
ids.clear();
};
}, []);
+ hooks.useUpdateEffect(() => {
+ if (isOpen)
+ return;
+ setFocusedIndex(-1);
+ menuRef.current?.scrollTo(0, 0);
+ }, [isOpen]);
+ hooks.useUpdateEffect(() => {
+ if (!isOpen)
+ return;
+ if (focusedIndex === -1) {
+ focusMenu();
+ }
+ }, [focusedIndex, isOpen]);
+ react.useEffect(() => {
+ if (!isOpen)
+ return;
+ const item = descendants.item(focusedIndex);
+ item?.node?.focus({ preventScroll: !scrollIntoViewRef.current });
+ }, [descendants, focusedIndex, isOpen]);
const openAndFocusFirstItem = react.useCallback(() => {
onOpen();
focusFirstItem();
}, [focusFirstItem, onOpen]);
const openAndFocusLastItem = react.useCallback(() => {
+ scrollIntoViewRef.current = true;
onOpen();
focusLastItem();
}, [onOpen, focusLastItem]);
const refocus = react.useCallback(() => {
@@ -149,11 +164,10 @@
const shouldRefocus = isOpen && !hasFocusWithin;
if (!shouldRefocus)
return;
const node = descendants.item(focusedIndex)?.node;
- node?.focus({ preventScroll: true });
+ node?.focus({ preventScroll: !scrollIntoViewRef.current });
}, [isOpen, focusedIndex, descendants]);
- const rafId = react.useRef(null);
return {
openAndFocusMenu,
openAndFocusFirstItem,
openAndFocusLastItem,
@@ -178,14 +192,20 @@
setFocusedIndex,
isLazy,
lazyBehavior,
initialFocusRef,
- rafId
+ scrollIntoViewRef
};
}
function useMenuButton(props = {}, externalRef = null) {
const menu = useMenuContext();
- const { onToggle, popper, openAndFocusFirstItem, openAndFocusLastItem } = menu;
+ const {
+ onToggle,
+ popper,
+ openAndFocusFirstItem,
+ openAndFocusLastItem,
+ scrollIntoViewRef
+ } = menu;
const onKeyDown = react.useCallback(
(event) => {
const eventKey = event.key;
const keyMap = {
@@ -194,14 +214,15 @@
ArrowUp: openAndFocusLastItem
};
const action = keyMap[eventKey];
if (action) {
+ scrollIntoViewRef.current = true;
event.preventDefault();
event.stopPropagation();
action(event);
}
},
- [openAndFocusFirstItem, openAndFocusLastItem]
+ [openAndFocusFirstItem, openAndFocusLastItem, scrollIntoViewRef]
);
return {
...props,
ref: hooks.mergeRefs(menu.buttonRef, externalRef, popper.referenceRef),
@@ -232,8 +253,9 @@
onClose,
menuId,
isLazy,
lazyBehavior,
+ scrollIntoViewRef,
unstable__animationState: animated
} = menu;
const descendants = useMenuDescendantsContext();
const createTypeaheadHandler = useShortcut.useShortcut({
@@ -250,14 +272,16 @@
event2.stopPropagation();
onClose();
},
ArrowDown: () => {
- const next = descendants.nextEnabled(focusedIndex);
+ scrollIntoViewRef.current = true;
+ const next = descendants.nextEnabled(focusedIndex) ?? descendants.firstEnabled();
if (next)
setFocusedIndex(next.index);
},
ArrowUp: () => {
- const prev = descendants.prevEnabled(focusedIndex);
+ scrollIntoViewRef.current = true;
+ const prev = descendants.prevEnabled(focusedIndex) ?? descendants.firstEnabled();
if (prev)
setFocusedIndex(prev.index);
}
};
@@ -287,9 +311,10 @@
descendants,
focusedIndex,
createTypeaheadHandler,
onClose,
- setFocusedIndex
+ setFocusedIndex,
+ scrollIntoViewRef
]
);
const hasBeenOpened = react.useRef(false);
if (isOpen) {
@@ -344,12 +369,10 @@
setFocusedIndex,
focusedIndex,
closeOnSelect: menuCloseOnSelect,
onClose,
- menuRef,
- isOpen,
menuId,
- rafId
+ scrollIntoViewRef
} = menu;
const ref = react.useRef(null);
const id = `${menuId}-menuitem-${react.useId()}`;
const { index, register } = useMenuDescendant({
@@ -359,11 +382,12 @@
(event) => {
onMouseEnterProp?.(event);
if (isDisabled)
return;
+ scrollIntoViewRef.current = false;
setFocusedIndex(index);
},
- [setFocusedIndex, index, isDisabled, onMouseEnterProp]
+ [setFocusedIndex, index, isDisabled, onMouseEnterProp, scrollIntoViewRef]
);
const onMouseMove = react.useCallback(
(event) => {
onMouseMoveProp?.(event);
@@ -400,29 +424,8 @@
},
[setFocusedIndex, onFocusProp, index]
);
const isFocused = index === focusedIndex;
- const trulyDisabled = isDisabled && !isFocusable;
- hooks.useUpdateEffect(() => {
- if (!isOpen)
- return;
- if (isFocused && !trulyDisabled && ref.current) {
- if (rafId.current) {
- cancelAnimationFrame(rafId.current);
- }
- rafId.current = requestAnimationFrame(() => {
- ref.current?.focus({ preventScroll: true });
- rafId.current = null;
- });
- } else if (menuRef.current && !isActiveElement(menuRef.current)) {
- menuRef.current.focus({ preventScroll: true });
- }
- return () => {
- if (rafId.current) {
- cancelAnimationFrame(rafId.current);
- }
- };
- }, [isFocused, trulyDisabled, menuRef, isOpen]);
const clickableProps = useClickable.useClickable({
onClick,
onFocus,
onMouseEnter,Modified: package/dist/cjs/number-input/use-number-input.cjs
Index: package/dist/cjs/number-input/use-number-input.cjs
===================================================================
--- package/dist/cjs/number-input/use-number-input.cjs
+++ package/dist/cjs/number-input/use-number-input.cjs
@@ -151,26 +151,26 @@
},
[onFocus]
);
const onKeyDown = react.useCallback(
- (event) => {
- if (event.nativeEvent.isComposing)
+ (e) => {
+ if (e.nativeEvent.isComposing)
return;
- if (!isValidNumericKeyboardEvent(event, isValidCharacter)) {
- event.preventDefault();
+ if (!isValidNumericKeyboardEvent(e, isValidCharacter)) {
+ e.preventDefault();
}
- const stepFactor = getStepFactor(event) * stepProp;
- const eventKey = event.key;
+ const stepFactor = getStepFactor(e) * stepProp;
+ const eventKey = e.key;
const keyMap = {
ArrowUp: () => increment(stepFactor),
ArrowDown: () => decrement(stepFactor),
Home: () => updateFn(min),
End: () => updateFn(max)
};
const action = keyMap[eventKey];
if (action) {
- event.preventDefault();
- action(event);
+ e.preventDefault();
+ action(e);
}
},
[isValidCharacter, stepProp, increment, decrement, updateFn, min, max]
);Modified: package/dist/cjs/pin-input/use-pin-input.cjs
Index: package/dist/cjs/pin-input/use-pin-input.cjs
===================================================================
--- package/dist/cjs/pin-input/use-pin-input.cjs
+++ package/dist/cjs/pin-input/use-pin-input.cjs
@@ -207,9 +207,9 @@
const { index, register } = usePinInputDescendant();
return getInputProps({
...props,
ref: hooks.mergeRefs(register, ref),
- index
+ index: props.index ?? index
});
}
exports.PinInputDescendantsProvider = PinInputDescendantsProvider;Modified: package/dist/cjs/popover/use-popover.cjs
Index: package/dist/cjs/popover/use-popover.cjs
===================================================================
--- package/dist/cjs/popover/use-popover.cjs
+++ package/dist/cjs/popover/use-popover.cjs
@@ -29,8 +29,10 @@
computePositionOnMount,
...popperProps
} = props;
const { isOpen, onClose, onOpen, onToggle } = hooks.useDisclosure(props);
+ const [restoreFocus, setRestoreFocus] = react.useState(returnFocusOnClose);
+ react.useEffect(() => setRestoreFocus(returnFocusOnClose), [returnFocusOnClose]);
const anchorRef = react.useRef(null);
const triggerRef = react.useRef(null);
const popoverRef = react.useRef(null);
const isHoveringRef = react.useRef(false);
@@ -65,15 +67,30 @@
});
hooks.useFocusOnHide(popoverRef, {
focusRef: triggerRef,
visible: isOpen,
- shouldFocus: returnFocusOnClose && trigger === TRIGGER.click
+ shouldFocus: restoreFocus && trigger === TRIGGER.click
});
hooks.useFocusOnShow(popoverRef, {
focusRef: initialFocusRef,
visible: isOpen,
shouldFocus: autoFocus && trigger === TRIGGER.click
});
+ hooks.useOutsideClick({
+ enabled: isOpen && closeOnBlur,
+ ref: popoverRef,
+ handler(event) {
+ const relatedTarget = event.composedPath?.()[0] ?? [
+ event.target
+ ];
+ if (contains(triggerRef.current, relatedTarget))
+ return;
+ if (relatedTarget) {
+ setRestoreFocus(!utils.isFocusable(relatedTarget));
+ }
+ onClose();
+ }
+ });
const shouldRenderChildren = utils.lazyDisclosure({
wasSelected: hasBeenOpened.current,
enabled: isLazy,
mode: lazyBehavior,
@@ -94,8 +111,10 @@
id: popoverId,
tabIndex: -1,
role: "dialog",
onKeyDown: utils.callAllHandlers(props2.onKeyDown, (event) => {
+ if (event.nativeEvent.isComposing)
+ return;
if (closeOnEsc && event.key === "Escape") {
event.preventDefault();
event.stopPropagation();
onClose();
@@ -105,8 +124,11 @@
const relatedTarget = getRelatedTarget(event);
const targetIsPopover = contains(popoverRef.current, relatedTarget);
const targetIsTrigger = contains(triggerRef.current, relatedTarget);
const isValidBlur = !targetIsPopover && !targetIsTrigger;
+ if (relatedTarget) {
+ setRestoreFocus(!utils.isFocusable(relatedTarget));
+ }
if (isOpen && closeOnBlur && isValidBlur) {
onClose();
}
}),Modified: package/dist/cjs/slider/use-range-slider.cjs
Index: package/dist/cjs/slider/use-range-slider.cjs
===================================================================
--- package/dist/cjs/slider/use-range-slider.cjs
+++ package/dist/cjs/slider/use-range-slider.cjs
@@ -69,15 +69,8 @@
const thumbPercents = thumbValues.map((val) => utils.valueToPercent(val, min, max));
const isVertical = orientation === "vertical";
const trackRef = react.useRef(null);
const rootRef = react.useRef(null);
- const thumbRects = hooks.useSizes({
- getNodes() {
- const rootNode = rootRef.current;
- const thumbNodes = rootNode?.querySelectorAll("[role=slider]");
- return thumbNodes ? Array.from(thumbNodes) : [];
- }
- });
const reactId = react.useId();
const uuid = idProp ?? reactId;
const ids = sliderUtils.getIds(uuid);
const getValueFromPointer = react.useCallback(
@@ -159,12 +152,11 @@
const { getThumbStyle, rootStyle, trackStyle, innerTrackStyle } = react.useMemo(
() => sliderUtils.getStyles({
isReversed,
orientation,
- thumbRects,
thumbPercents
}),
- [isReversed, orientation, thumbPercents, thumbRects]
+ [isReversed, orientation, thumbPercents]
);
const focusThumb = react.useCallback(
(index) => {
const idx = index ?? activeIndex;Modified: package/dist/cjs/slider/use-slider.cjs
Index: package/dist/cjs/slider/use-slider.cjs
===================================================================
--- package/dist/cjs/slider/use-slider.cjs
+++ package/dist/cjs/slider/use-slider.cjs
@@ -150,19 +150,16 @@
},
[actions, constrain, tenSteps, stateRef]
);
const valueText = getAriaValueText?.(value) ?? ariaValueText;
- const thumbSize = hooks.useSize(thumbRef);
const { getThumbStyle, rootStyle, trackStyle, innerTrackStyle } = react.useMemo(() => {
const state2 = stateRef.current;
- const thumbRect = thumbSize ?? { width: 0, height: 0 };
return sliderUtils.getStyles({
isReversed,
orientation: state2.orientation,
- thumbRects: [thumbRect],
thumbPercents: [thumbPercent]
});
- }, [isReversed, thumbSize, thumbPercent, stateRef]);
+ }, [isReversed, thumbPercent, stateRef]);
const focusThumb = react.useCallback(() => {
const state2 = stateRef.current;
if (state2.focusThumbOnChange) {
setTimeout(() => thumbRef.current?.focus());Modified: package/dist/cjs/tabs/use-tabs.cjs
Index: package/dist/cjs/tabs/use-tabs.cjs
===================================================================
--- package/dist/cjs/tabs/use-tabs.cjs
+++ package/dist/cjs/tabs/use-tabs.cjs
@@ -157,9 +157,9 @@
const children = validChildren.map(
(child, index) => react.createElement(
TabPanelProvider,
{
- key: index,
+ key: child.key ?? index,
value: {
isSelected: index === selectedIndex,
id: makeTabPanelId(id, index),
tabId: makeTabId(id, index),Modified: package/package.json
Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,7 +1,7 @@
{
"name": "@chakra-ui/react",
- "version": "2.10.1",
+ "version": "2.10.2",
"description": "Responsive and accessible React UI components built with React and Emotion",
"main": "dist/cjs/index.cjs",
"module": "dist/esm/index.mjs",
"types": "dist/types/index.d.ts",
@@ -41,14 +41,13 @@
"@zag-js/focus-visible": "^0.31.1",
"aria-hidden": "^1.2.3",
"react-fast-compare": "3.2.2",
"react-focus-lock": "^2.9.6",
- "react-lorem-component": "^0.13.0",
"react-remove-scroll": "^2.5.7",
- "@chakra-ui/hooks": "2.4.1",
- "@chakra-ui/utils": "2.2.1",
- "@chakra-ui/theme": "3.4.5",
- "@chakra-ui/styled-system": "2.11.1"
+ "@chakra-ui/hooks": "2.4.2",
+ "@chakra-ui/utils": "2.2.2",
+ "@chakra-ui/theme": "3.4.6",
+ "@chakra-ui/styled-system": "2.11.2"
},
"peerDependencies": {
"@emotion/react": ">=11",
"@emotion/styled": ">=11",
@@ -64,8 +63,9 @@
"framer-motion": "10.16.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-frame-component": "^5.2.6",
+ "react-lorem-component": "^0.13.0",
"react-hook-form": "^7.48.2",
"react-icons": "^4.12.0",
"react-router-dom": "^6.20.1",
"react-spinners": "^0.13.8"Modified: package/dist/esm/skeleton/skeleton.mjs
Index: package/dist/esm/skeleton/skeleton.mjs
===================================================================
--- package/dist/esm/skeleton/skeleton.mjs
+++ package/dist/esm/skeleton/skeleton.mjs
@@ -54,8 +54,9 @@
fadeDuration,
speed,
className,
fitContent,
+ animation: animationProp,
...rest
} = omitThemingProps(skeletonProps);
const [startColorVar, endColorVar] = useToken("colors", [
startColor,
@@ -89,9 +90,9 @@
width: fitContent ? "fit-content" : void 0,
...styles,
...cssVarStyles,
_dark: { ...styles["_dark"], ...cssVarStyles },
- animation: `${speed}s linear infinite alternate ${bgFade}`
+ animation: animationProp || `${speed}s linear infinite alternate ${bgFade}`
}
}
);
});Modified: package/dist/esm/slider/slider-utils.mjs
Index: package/dist/esm/slider/slider-utils.mjs
===================================================================
--- package/dist/esm/slider/slider-utils.mjs
+++ package/dist/esm/slider/slider-utils.mjs
@@ -13,14 +13,11 @@
function orient(options) {
const { orientation, vertical, horizontal } = options;
return orientation === "vertical" ? vertical : horizontal;
}
-const zeroSize = { width: 0, height: 0 };
-const normalize = (a) => a || zeroSize;
function getStyles(options) {
- const { orientation, thumbPercents, thumbRects, isReversed } = options;
+ const { orientation, thumbPercents, isReversed } = options;
const getThumbStyle = (i) => {
- const rect = thumbRects[i] ?? zeroSize;
return {
position: "absolute",
userSelect: "none",
WebkitUserSelect: "none",
@@ -29,40 +26,22 @@
touchAction: "none",
...orient({
orientation,
vertical: {
- bottom: `calc(${thumbPercents[i]}% - ${rect.height / 2}px)`
+ bottom: `${thumbPercents[i]}%`
},
horizontal: {
- left: `calc(${thumbPercents[i]}% - ${rect.width / 2}px)`
+ left: `${thumbPercents[i]}%`
}
})
};
};
- const size = orientation === "vertical" ? thumbRects.reduce(
- (a, b) => normalize(a).height > normalize(b).height ? a : b,
- zeroSize
- ) : thumbRects.reduce(
- (a, b) => normalize(a).width > normalize(b).width ? a : b,
- zeroSize
- );
const rootStyle = {
position: "relative",
touchAction: "none",
WebkitTapHighlightColor: "rgba(0,0,0,0)",
userSelect: "none",
- outline: 0,
- ...orient({
- orientation,
- vertical: size ? {
- paddingLeft: size.width / 2,
- paddingRight: size.width / 2
- } : {},
- horizontal: size ? {
- paddingTop: size.height / 2,
- paddingBottom: size.height / 2
- } : {}
- })
+ outline: 0
};
const trackStyle = {
position: "absolute",
...orient({Modified: package/dist/esm/descendant/use-descendant.mjs
Index: package/dist/esm/descendant/use-descendant.mjs
===================================================================
--- package/dist/esm/descendant/use-descendant.mjs
+++ package/dist/esm/descendant/use-descendant.mjs
@@ -1,63 +1,59 @@
'use client';
import { mergeRefs } from '@chakra-ui/hooks';
import { createContext } from '@chakra-ui/utils';
-import { useRef, useState } from 'react';
+import { useState, useRef } from 'react';
import { DescendantsManager } from './descendant.mjs';
-import { cast, useSafeLayoutEffect } from './utils.mjs';
+import { useSafeLayoutEffect, cast } from './utils.mjs';
-function useDescendants() {
- const descendants = useRef(new DescendantsManager());
- useSafeLayoutEffect(() => {
- return () => descendants.current.destroy();
+function createDescendantContext() {
+ const [DescendantsContextProvider, useDescendantsContext] = createContext({
+ name: "DescendantsProvider",
+ errorMessage: "useDescendantsContext must be used within DescendantsProvider"
});
- return descendants.current;
-}
-const [DescendantsContextProvider, useDescendantsContext] = createContext({
- name: "DescendantsProvider",
- errorMessage: "useDescendantsContext must be used within DescendantsProvider"
-});
-function useDescendant(options) {
- const descendants = useDescendantsContext();
- const [index, setIndex] = useState(-1);
- const ref = useRef(null);
- useSafeLayoutEffect(() => {
- return () => {
+ const useDescendant = (options) => {
+ const descendants = useDescendantsContext();
+ const [index, setIndex] = useState(-1);
+ const ref = useRef(null);
+ useSafeLayoutEffect(() => {
+ return () => {
+ if (!ref.current)
+ return;
+ descendants.unregister(ref.current);
+ };
+ }, []);
+ useSafeLayoutEffect(() => {
if (!ref.current)
return;
- descendants.unregister(ref.current);
+ const dataIndex = Number(ref.current.dataset["index"]);
+ if (index != dataIndex && !Number.isNaN(dataIndex)) {
+ setIndex(dataIndex);
+ }
+ });
+ const refCallback = options ? cast(descendants.register(options)) : cast(descendants.register);
+ return {
+ descendants,
+ index,
+ enabledIndex: descendants.enabledIndexOf(ref.current),
+ register: mergeRefs(refCallback, ref)
};
- }, []);
- useSafeLayoutEffect(() => {
- if (!ref.current)
- return;
- const dataIndex = Number(ref.current.dataset["index"]);
- if (index != dataIndex && !Number.isNaN(dataIndex)) {
- setIndex(dataIndex);
- }
- });
- const refCallback = options ? cast(descendants.register(options)) : cast(descendants.register);
- return {
- descendants,
- index,
- enabledIndex: descendants.enabledIndexOf(ref.current),
- register: mergeRefs(refCallback, ref)
};
-}
-function createDescendantContext() {
- const ContextProvider = cast(DescendantsContextProvider);
- const _useDescendantsContext = () => cast(useDescendantsContext());
- const _useDescendant = (options) => useDescendant(options);
- const _useDescendants = () => useDescendants();
+ const useDescendants = () => {
+ const descendants = useRef(new DescendantsManager());
+ useSafeLayoutEffect(() => {
+ return () => descendants.current.destroy();
+ });
+ return descendants.current;
+ };
return [
// context provider
- ContextProvider,
+ DescendantsContextProvider,
// call this when you need to read from context
- _useDescendantsContext,
+ useDescendantsContext,
// descendants state information, to be called and passed to `ContextProvider`
- _useDescendants,
+ useDescendants,
// descendant index information
- _useDescendant
+ useDescendant
];
}
export { createDescendantContext };Modified: package/dist/esm/menu/use-menu.mjs
Index: package/dist/esm/menu/use-menu.mjs
===================================================================
--- package/dist/esm/menu/use-menu.mjs
+++ package/dist/esm/menu/use-menu.mjs
@@ -1,8 +1,8 @@
'use client';
-import { useDisclosure, useOutsideClick, useUpdateEffect, useFocusOnHide, useAnimationState, mergeRefs, useControllableState } from '@chakra-ui/hooks';
+import { useDisclosure, useOutsideClick, useFocusOnHide, useAnimationState, useIds, useUpdateEffect, mergeRefs, useControllableState } from '@chakra-ui/hooks';
import { createContext, dataAttr, callAllHandlers, lazyDisclosure, getValidChildren } from '@chakra-ui/utils';
-import { useRef, useCallback, useState, useEffect, useId, cloneElement, useMemo } from 'react';
+import { useRef, useCallback, useState, useEffect, useId, cloneElement } from 'react';
import { getNextItemFromSearch } from './get-next-item-from-search.mjs';
import { useShortcut } from './use-shortcut.mjs';
import { createDescendantContext } from '../descendant/use-descendant.mjs';
import { usePopper } from '../popper/use-popper.mjs';
@@ -17,15 +17,8 @@
const [MenuProvider, useMenuContext] = createContext({
strict: false,
name: "MenuContext"
});
-function useIds(idProp, ...prefixes) {
- const reactId = useId();
- const id = idProp || reactId;
- return useMemo(() => {
- return prefixes.map((prefix) => `${prefix}-${id}`);
- }, [id, prefixes]);
-}
function getOwnerDocument(node) {
return node?.ownerDocument ?? document;
}
function isActiveElement(element) {
@@ -51,8 +44,9 @@
...popperProps
} = props;
const menuRef = useRef(null);
const buttonRef = useRef(null);
+ const scrollIntoViewRef = useRef(true);
const descendants = useMenuDescendants();
const focusMenu = useCallback(() => {
requestAnimationFrame(() => {
menuRef.current?.focus({ preventScroll: false });
@@ -61,8 +55,10 @@
const focusFirstItem = useCallback(() => {
const id2 = setTimeout(() => {
if (initialFocusRef) {
initialFocusRef.current?.focus();
+ } else if (!descendants.count()) {
+ menuRef.current?.focus({ preventScroll: false });
} else {
const first = descendants.firstEnabled();
if (first)
setFocusedIndex(first.index);
@@ -71,11 +67,15 @@
timeoutIds.current.add(id2);
}, [descendants, initialFocusRef]);
const focusLastItem = useCallback(() => {
const id2 = setTimeout(() => {
- const last = descendants.lastEnabled();
- if (last)
- setFocusedIndex(last.index);
+ if (!descendants.count()) {
+ menuRef.current?.focus({ preventScroll: false });
+ } else {
+ const last = descendants.lastEnabled();
+ if (last)
+ setFocusedIndex(last.index);
+ }
});
timeoutIds.current.add(id2);
}, [descendants]);
const onOpenInternal = useCallback(() => {
@@ -108,13 +108,8 @@
placement,
direction
});
const [focusedIndex, setFocusedIndex] = useState(-1);
- useUpdateEffect(() => {
- if (!isOpen) {
- setFocusedIndex(-1);
- }
- }, [isOpen]);
useFocusOnHide(menuRef, {
focusRef: buttonRef,
visible: isOpen,
shouldFocus: true
@@ -132,13 +127,33 @@
ids.forEach((id2) => clearTimeout(id2));
ids.clear();
};
}, []);
+ useUpdateEffect(() => {
+ if (isOpen)
+ return;
+ setFocusedIndex(-1);
+ menuRef.current?.scrollTo(0, 0);
+ }, [isOpen]);
+ useUpdateEffect(() => {
+ if (!isOpen)
+ return;
+ if (focusedIndex === -1) {
+ focusMenu();
+ }
+ }, [focusedIndex, isOpen]);
+ useEffect(() => {
+ if (!isOpen)
+ return;
+ const item = descendants.item(focusedIndex);
+ item?.node?.focus({ preventScroll: !scrollIntoViewRef.current });
+ }, [descendants, focusedIndex, isOpen]);
const openAndFocusFirstItem = useCallback(() => {
onOpen();
focusFirstItem();
}, [focusFirstItem, onOpen]);
const openAndFocusLastItem = useCallback(() => {
+ scrollIntoViewRef.current = true;
onOpen();
focusLastItem();
}, [onOpen, focusLastItem]);
const refocus = useCallback(() => {
@@ -147,11 +162,10 @@
const shouldRefocus = isOpen && !hasFocusWithin;
if (!shouldRefocus)
return;
const node = descendants.item(focusedIndex)?.node;
- node?.focus({ preventScroll: true });
+ node?.focus({ preventScroll: !scrollIntoViewRef.current });
}, [isOpen, focusedIndex, descendants]);
- const rafId = useRef(null);
return {
openAndFocusMenu,
openAndFocusFirstItem,
openAndFocusLastItem,
@@ -176,14 +190,20 @@
setFocusedIndex,
isLazy,
lazyBehavior,
initialFocusRef,
- rafId
+ scrollIntoViewRef
};
}
function useMenuButton(props = {}, externalRef = null) {
const menu = useMenuContext();
- const { onToggle, popper, openAndFocusFirstItem, openAndFocusLastItem } = menu;
+ const {
+ onToggle,
+ popper,
+ openAndFocusFirstItem,
+ openAndFocusLastItem,
+ scrollIntoViewRef
+ } = menu;
const onKeyDown = useCallback(
(event) => {
const eventKey = event.key;
const keyMap = {
@@ -192,14 +212,15 @@
ArrowUp: openAndFocusLastItem
};
const action = keyMap[eventKey];
if (action) {
+ scrollIntoViewRef.current = true;
event.preventDefault();
event.stopPropagation();
action(event);
}
},
- [openAndFocusFirstItem, openAndFocusLastItem]
+ [openAndFocusFirstItem, openAndFocusLastItem, scrollIntoViewRef]
);
return {
...props,
ref: mergeRefs(menu.buttonRef, externalRef, popper.referenceRef),
@@ -230,8 +251,9 @@
onClose,
menuId,
isLazy,
lazyBehavior,
+ scrollIntoViewRef,
unstable__animationState: animated
} = menu;
const descendants = useMenuDescendantsContext();
const createTypeaheadHandler = useShortcut({
@@ -248,14 +270,16 @@
event2.stopPropagation();
onClose();
},
ArrowDown: () => {
- const next = descendants.nextEnabled(focusedIndex);
+ scrollIntoViewRef.current = true;
+ const next = descendants.nextEnabled(focusedIndex) ?? descendants.firstEnabled();
if (next)
setFocusedIndex(next.index);
},
ArrowUp: () => {
- const prev = descendants.prevEnabled(focusedIndex);
+ scrollIntoViewRef.current = true;
+ const prev = descendants.prevEnabled(focusedIndex) ?? descendants.firstEnabled();
if (prev)
setFocusedIndex(prev.index);
}
};
@@ -285,9 +309,10 @@
descendants,
focusedIndex,
createTypeaheadHandler,
onClose,
- setFocusedIndex
+ setFocusedIndex,
+ scrollIntoViewRef
]
);
const hasBeenOpened = useRef(false);
if (isOpen) {
@@ -342,12 +367,10 @@
setFocusedIndex,
focusedIndex,
closeOnSelect: menuCloseOnSelect,
onClose,
- menuRef,
- isOpen,
menuId,
- rafId
+ scrollIntoViewRef
} = menu;
const ref = useRef(null);
const id = `${menuId}-menuitem-${useId()}`;
const { index, register } = useMenuDescendant({
@@ -357,11 +380,12 @@
(event) => {
onMouseEnterProp?.(event);
if (isDisabled)
return;
+ scrollIntoViewRef.current = false;
setFocusedIndex(index);
},
- [setFocusedIndex, index, isDisabled, onMouseEnterProp]
+ [setFocusedIndex, index, isDisabled, onMouseEnterProp, scrollIntoViewRef]
);
const onMouseMove = useCallback(
(event) => {
onMouseMoveProp?.(event);
@@ -398,29 +422,8 @@
},
[setFocusedIndex, onFocusProp, index]
);
const isFocused = index === focusedIndex;
- const trulyDisabled = isDisabled && !isFocusable;
- useUpdateEffect(() => {
- if (!isOpen)
- return;
- if (isFocused && !trulyDisabled && ref.current) {
- if (rafId.current) {
- cancelAnimationFrame(rafId.current);
- }
- rafId.current = requestAnimationFrame(() => {
- ref.current?.focus({ preventScroll: true });
- rafId.current = null;
- });
- } else if (menuRef.current && !isActiveElement(menuRef.current)) {
- menuRef.current.focus({ preventScroll: true });
- }
- return () => {
- if (rafId.current) {
- cancelAnimationFrame(rafId.current);
- }
- };
- }, [isFocused, trulyDisabled, menuRef, isOpen]);
const clickableProps = useClickable({
onClick,
onFocus,
onMouseEnter,Modified: package/dist/esm/number-input/use-number-input.mjs
Index: package/dist/esm/number-input/use-number-input.mjs
===================================================================
--- package/dist/esm/number-input/use-number-input.mjs
+++ package/dist/esm/number-input/use-number-input.mjs
@@ -149,26 +149,26 @@
},
[onFocus]
);
const onKeyDown = useCallback(
- (event) => {
- if (event.nativeEvent.isComposing)
+ (e) => {
+ if (e.nativeEvent.isComposing)
return;
- if (!isValidNumericKeyboardEvent(event, isValidCharacter)) {
- event.preventDefault();
+ if (!isValidNumericKeyboardEvent(e, isValidCharacter)) {
+ e.preventDefault();
}
- const stepFactor = getStepFactor(event) * stepProp;
- const eventKey = event.key;
+ const stepFactor = getStepFactor(e) * stepProp;
+ const eventKey = e.key;
const keyMap = {
ArrowUp: () => increment(stepFactor),
ArrowDown: () => decrement(stepFactor),
Home: () => updateFn(min),
End: () => updateFn(max)
};
const action = keyMap[eventKey];
if (action) {
- event.preventDefault();
- action(event);
+ e.preventDefault();
+ action(e);
}
},
[isValidCharacter, stepProp, increment, decrement, updateFn, min, max]
);Modified: package/dist/esm/pin-input/use-pin-input.mjs
Index: package/dist/esm/pin-input/use-pin-input.mjs
===================================================================
--- package/dist/esm/pin-input/use-pin-input.mjs
+++ package/dist/esm/pin-input/use-pin-input.mjs
@@ -205,9 +205,9 @@
const { index, register } = usePinInputDescendant();
return getInputProps({
...props,
ref: mergeRefs(register, ref),
- index
+ index: props.index ?? index
});
}
export { PinInputDescendantsProvider, PinInputProvider, usePinInput, usePinInputContext, usePinInputDescendant, usePinInputDescendants, usePinInputDescendantsContext, usePinInputField };Modified: package/dist/esm/popover/use-popover.mjs
Index: package/dist/esm/popover/use-popover.mjs
===================================================================
--- package/dist/esm/popover/use-popover.mjs
+++ package/dist/esm/popover/use-popover.mjs
@@ -1,8 +1,8 @@
'use client';
-import { useDisclosure, useAnimationState, useFocusOnPointerDown, useFocusOnHide, useFocusOnShow, mergeRefs } from '@chakra-ui/hooks';
-import { lazyDisclosure, callAllHandlers } from '@chakra-ui/utils';
-import { useRef, useState, useId, useCallback, useEffect } from 'react';
+import { useDisclosure, useAnimationState, useFocusOnPointerDown, useFocusOnHide, useFocusOnShow, useOutsideClick, mergeRefs } from '@chakra-ui/hooks';
+import { isFocusable, lazyDisclosure, callAllHandlers } from '@chakra-ui/utils';
+import { useState, useEffect, useRef, useId, useCallback } from 'react';
import { usePopper } from '../popper/use-popper.mjs';
import { cssVars } from '../popper/utils.mjs';
const TRIGGER = {
@@ -27,8 +27,10 @@
computePositionOnMount,
...popperProps
} = props;
const { isOpen, onClose, onOpen, onToggle } = useDisclosure(props);
+ const [restoreFocus, setRestoreFocus] = useState(returnFocusOnClose);
+ useEffect(() => setRestoreFocus(returnFocusOnClose), [returnFocusOnClose]);
const anchorRef = useRef(null);
const triggerRef = useRef(null);
const popoverRef = useRef(null);
const isHoveringRef = useRef(false);
@@ -63,15 +65,30 @@
});
useFocusOnHide(popoverRef, {
focusRef: triggerRef,
visible: isOpen,
- shouldFocus: returnFocusOnClose && trigger === TRIGGER.click
+ shouldFocus: restoreFocus && trigger === TRIGGER.click
});
useFocusOnShow(popoverRef, {
focusRef: initialFocusRef,
visible: isOpen,
shouldFocus: autoFocus && trigger === TRIGGER.click
});
+ useOutsideClick({
+ enabled: isOpen && closeOnBlur,
+ ref: popoverRef,
+ handler(event) {
+ const relatedTarget = event.composedPath?.()[0] ?? [
+ event.target
+ ];
+ if (contains(triggerRef.current, relatedTarget))
+ return;
+ if (relatedTarget) {
+ setRestoreFocus(!isFocusable(relatedTarget));
+ }
+ onClose();
+ }
+ });
const shouldRenderChildren = lazyDisclosure({
wasSelected: hasBeenOpened.current,
enabled: isLazy,
mode: lazyBehavior,
@@ -92,8 +109,10 @@
id: popoverId,
tabIndex: -1,
role: "dialog",
onKeyDown: callAllHandlers(props2.onKeyDown, (event) => {
+ if (event.nativeEvent.isComposing)
+ return;
if (closeOnEsc && event.key === "Escape") {
event.preventDefault();
event.stopPropagation();
onClose();
@@ -103,8 +122,11 @@
const relatedTarget = getRelatedTarget(event);
const targetIsPopover = contains(popoverRef.current, relatedTarget);
const targetIsTrigger = contains(triggerRef.current, relatedTarget);
const isValidBlur = !targetIsPopover && !targetIsTrigger;
+ if (relatedTarget) {
+ setRestoreFocus(!isFocusable(relatedTarget));
+ }
if (isOpen && closeOnBlur && isValidBlur) {
onClose();
}
}),Modified: package/dist/esm/slider/use-range-slider.mjs
Index: package/dist/esm/slider/use-range-slider.mjs
===================================================================
--- package/dist/esm/slider/use-range-slider.mjs
+++ package/dist/esm/slider/use-range-slider.mjs
@@ -1,6 +1,6 @@
'use client';
-import { useCallbackRef, useControllableState, useSizes, useUpdateEffect, usePanEvent, mergeRefs } from '@chakra-ui/hooks';
+import { useCallbackRef, useControllableState, useUpdateEffect, usePanEvent, mergeRefs } from '@chakra-ui/hooks';
import { clampValue, valueToPercent, percentToValue, roundValueToStep, ariaAttr, dataAttr, callAllHandlers } from '@chakra-ui/utils';
import { useState, useRef, useId, useCallback, useMemo } from 'react';
import { getStyles, orient, getIsReversed, getIds } from './slider-utils.mjs';
@@ -67,15 +67,8 @@
const thumbPercents = thumbValues.map((val) => valueToPercent(val, min, max));
const isVertical = orientation === "vertical";
const trackRef = useRef(null);
const rootRef = useRef(null);
- const thumbRects = useSizes({
- getNodes() {
- const rootNode = rootRef.current;
- const thumbNodes = rootNode?.querySelectorAll("[role=slider]");
- return thumbNodes ? Array.from(thumbNodes) : [];
- }
- });
const reactId = useId();
const uuid = idProp ?? reactId;
const ids = getIds(uuid);
const getValueFromPointer = useCallback(
@@ -157,12 +150,11 @@
const { getThumbStyle, rootStyle, trackStyle, innerTrackStyle } = useMemo(
() => getStyles({
isReversed,
orientation,
- thumbRects,
thumbPercents
}),
- [isReversed, orientation, thumbPercents, thumbRects]
+ [isReversed, orientation, thumbPercents]
);
const focusThumb = useCallback(
(index) => {
const idx = index ?? activeIndex;Modified: package/dist/esm/slider/use-slider.mjs
Index: package/dist/esm/slider/use-slider.mjs
===================================================================
--- package/dist/esm/slider/use-slider.mjs
+++ package/dist/esm/slider/use-slider.mjs
@@ -1,6 +1,6 @@
'use client';
-import { useCallbackRef, useControllableState, useLatestRef, useSize, useUpdateEffect, usePanEvent, mergeRefs } from '@chakra-ui/hooks';
+import { useCallbackRef, useControllableState, useLatestRef, useUpdateEffect, usePanEvent, mergeRefs } from '@chakra-ui/hooks';
import { clampValue, valueToPercent, percentToValue, roundValueToStep, ariaAttr, dataAttr, callAllHandlers } from '@chakra-ui/utils';
import { useState, useRef, useId, useCallback, useMemo } from 'react';
import { getStyles, getIsReversed } from './slider-utils.mjs';
@@ -148,19 +148,16 @@
},
[actions, constrain, tenSteps, stateRef]
);
const valueText = getAriaValueText?.(value) ?? ariaValueText;
- const thumbSize = useSize(thumbRef);
const { getThumbStyle, rootStyle, trackStyle, innerTrackStyle } = useMemo(() => {
const state2 = stateRef.current;
- const thumbRect = thumbSize ?? { width: 0, height: 0 };
return getStyles({
isReversed,
orientation: state2.orientation,
- thumbRects: [thumbRect],
thumbPercents: [thumbPercent]
});
- }, [isReversed, thumbSize, thumbPercent, stateRef]);
+ }, [isReversed, thumbPercent, stateRef]);
const focusThumb = useCallback(() => {
const state2 = stateRef.current;
if (state2.focusThumbOnChange) {
setTimeout(() => thumbRef.current?.focus());Modified: package/dist/esm/tabs/use-tabs.mjs
Index: package/dist/esm/tabs/use-tabs.mjs
===================================================================
--- package/dist/esm/tabs/use-tabs.mjs
+++ package/dist/esm/tabs/use-tabs.mjs
@@ -155,9 +155,9 @@
const children = validChildren.map(
(child, index) => createElement(
TabPanelProvider,
{
- key: index,
+ key: child.key ?? index,
value: {
isSelected: index === selectedIndex,
id: makeTabPanelId(id, index),
tabId: makeTabId(id, index),Modified: package/dist/types/accordion/accordion-context.d.ts
Index: package/dist/types/accordion/accordion-context.d.ts
===================================================================
--- package/dist/types/accordion/accordion-context.d.ts
+++ package/dist/types/accordion/accordion-context.d.ts
@@ -6,11 +6,6 @@
export declare const AccordionItemProvider: import("react").Provider<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
export declare const AccordionDescendantsProvider: import("react").Provider<import("../descendant").DescendantsManager<HTMLButtonElement, {}>>, useAccordionDescendantsContext: () => import("../descendant").DescendantsManager<HTMLButtonElement, {}>, useAccordionDescendants: () => import("../descendant").DescendantsManager<HTMLButtonElement, {}>, useAccordionDescendant: (options?: {
disabled?: boolean | undefined;
id?: string | undefined;
-} | undefined) => {
- descendants: import("../descendant").UseDescendantsReturn;
- index: number;
- enabledIndex: number;
- register: (node: HTMLButtonElement | null) => void;
-};
+} | undefined) => import("../descendant/use-descendant").UseDescendantReturn<HTMLButtonElement, {}>;
export {};Modified: package/dist/types/descendant/index.d.ts
Index: package/dist/types/descendant/index.d.ts
===================================================================
--- package/dist/types/descendant/index.d.ts
+++ package/dist/types/descendant/index.d.ts
@@ -1,3 +1,3 @@
export type { Descendant, DescendantOptions, DescendantsManager, } from "./descendant";
export { createDescendantContext } from "./use-descendant";
-export type { UseDescendantsReturn } from "./use-descendant";
+export type { UseDescendantsReturn, DescendantContextReturn, } from "./use-descendant";Modified: package/dist/types/pin-input/pin-input.d.ts
Index: package/dist/types/pin-input/pin-input.d.ts
===================================================================
--- package/dist/types/pin-input/pin-input.d.ts
+++ package/dist/types/pin-input/pin-input.d.ts
@@ -31,7 +31,8 @@
export declare namespace PinInput {
var displayName: string;
}
export interface PinInputFieldProps extends HTMLChakraProps<"input"> {
+ index?: number;
}
export declare const PinInputField: import("../system").ComponentWithAs<"input", PinInputFieldProps>;
export {};Modified: package/dist/types/slider/slider-utils.d.ts
Index: package/dist/types/slider/slider-utils.d.ts
===================================================================
--- package/dist/types/slider/slider-utils.d.ts
+++ package/dist/types/slider/slider-utils.d.ts
@@ -13,16 +13,11 @@
orientation: Orientation;
vertical: React.CSSProperties;
horizontal: React.CSSProperties;
}): import("react").CSSProperties;
-type Size = {
- height: number;
- width: number;
-};
export declare function getStyles(options: {
orientation: Orientation;
thumbPercents: number[];
- thumbRects: Array<Size | undefined>;
isReversed?: boolean;
}): {
trackStyle: import("react").CSSProperties;
innerTrackStyle: import("react").CSSProperties;Modified: package/dist/types/descendant/use-descendant.d.ts
Index: package/dist/types/descendant/use-descendant.d.ts
===================================================================
--- package/dist/types/descendant/use-descendant.d.ts
+++ package/dist/types/descendant/use-descendant.d.ts
@@ -1,16 +1,17 @@
/// <reference types="react" />
import { DescendantOptions, DescendantsManager } from "./descendant";
-/**
- * @internal
- * React hook that initializes the DescendantsManager
- */
-declare function useDescendants<T extends HTMLElement = HTMLElement, K extends Record<string, any> = {}>(): DescendantsManager<T, K>;
-export interface UseDescendantsReturn extends ReturnType<typeof useDescendants> {
+export interface UseDescendantsReturn extends DescendantsManager<HTMLElement, Record<string, any>> {
}
-export declare function createDescendantContext<T extends HTMLElement = HTMLElement, K extends Record<string, any> = {}>(): readonly [import("react").Provider<DescendantsManager<T, K>>, () => DescendantsManager<T, K>, () => DescendantsManager<T, K>, (options?: DescendantOptions<K>) => {
- descendants: UseDescendantsReturn;
+export interface UseDescendantReturn<T extends HTMLElement, K extends Record<string, any> = {}> {
+ descendants: DescendantsManager<T, K>;
index: number;
enabledIndex: number;
- register: (node: T | null) => void;
-}];
-export {};
+ register: React.RefCallback<T>;
+}
+export type DescendantContextReturn<T extends HTMLElement, K extends Record<string, any> = {}> = [
+ React.Provider<DescendantsManager<T, K>>,
+ () => DescendantsManager<T, K>,
+ () => DescendantsManager<T, K>,
+ (options?: DescendantOptions<K>) => UseDescendantReturn<T, K>
+];
+export declare function createDescendantContext<T extends HTMLElement = HTMLElement, K extends Record<string, any> = {}>(): DescendantContextReturn<T, K>;Modified: package/dist/types/menu/use-menu.d.ts
Index: package/dist/types/menu/use-menu.d.ts
===================================================================
--- package/dist/types/menu/use-menu.d.ts
+++ package/dist/types/menu/use-menu.d.ts
@@ -5,14 +5,9 @@
import { UsePopperProps } from "../popper";
export declare const MenuDescendantsProvider: import("react").Provider<import("../descendant").DescendantsManager<HTMLElement, {}>>, useMenuDescendantsContext: () => import("../descendant").DescendantsManager<HTMLElement, {}>, useMenuDescendants: () => import("../descendant").DescendantsManager<HTMLElement, {}>, useMenuDescendant: (options?: {
disabled?: boolean | undefined;
id?: string | undefined;
-} | undefined) => {
- descendants: import("../descendant").UseDescendantsReturn;
- index: number;
- enabledIndex: number;
- register: (node: HTMLElement | null) => void;
-};
+} | undefined) => import("../descendant/use-descendant").UseDescendantReturn<HTMLElement, {}>;
export declare const MenuProvider: import("react").Provider<Omit<UseMenuReturn, "descendants">>, useMenuContext: () => Omit<UseMenuReturn, "descendants">;
export interface UseMenuProps extends Omit<UsePopperProps, "enabled">, UseDisclosureProps {
/**
* The `ref` of the element that should receive focus when the popover opens.
@@ -104,9 +99,9 @@
lazyBehavior: LazyMode;
initialFocusRef: import("react").RefObject<{
focus(): void;
}> | undefined;
- rafId: import("react").MutableRefObject<number | null>;
+ scrollIntoViewRef: import("react").MutableRefObject<boolean>;
};
export interface UseMenuReturn extends ReturnType<typeof useMenu> {
}
export interface UseMenuButtonProps extends Omit<React.HTMLAttributes<Element>, "color"> {
@@ -692,11 +687,9 @@
id: string;
role: string;
tabIndex: number;
ref: (node: any) => void;
- "data-active": boolean | "false" | "true"; /**
- * Generate unique ids for menu's list and button
- */
+ "data-active": boolean | "false" | "true";
"aria-disabled": "true" | undefined;
onClick: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
onMouseDown: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
onMouseUp: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
@@ -1244,11 +1237,9 @@
type: any;
id: string;
tabIndex: number;
ref: (node: any) => void;
- "data-active": boolean | "false" | "true"; /**
- * Generate unique ids for menu's list and button
- */
+ "data-active": boolean | "false" | "true";
"aria-disabled": "true" | undefined;
onClick: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
onMouseDown: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
onMouseUp: (event: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;Modified: package/dist/types/pin-input/use-pin-input.d.ts
Index: package/dist/types/pin-input/use-pin-input.d.ts
===================================================================
--- package/dist/types/pin-input/use-pin-input.d.ts
+++ package/dist/types/pin-input/use-pin-input.d.ts
@@ -1,18 +1,9 @@
/// <reference types="react" />
export declare const PinInputDescendantsProvider: import("react").Provider<import("../descendant").DescendantsManager<HTMLInputElement, {}>>, usePinInputDescendantsContext: () => import("../descendant").DescendantsManager<HTMLInputElement, {}>, usePinInputDescendants: () => import("../descendant").DescendantsManager<HTMLInputElement, {}>, usePinInputDescendant: (options?: {
disabled?: boolean | undefined;
id?: string | undefined;
-} | undefined) => {
- descendants: import("../descendant").UseDescendantsReturn;
- index: number;
- /**
- * If `true`, the pin input component signals to its fields that they should
- * use `autocomplete="one-time-code"`.
- */
- enabledIndex: number;
- register: (node: HTMLInputElement | null) => void;
-};
+} | undefined) => import("../descendant/use-descendant").UseDescendantReturn<HTMLInputElement, {}>;
export type PinInputContext = Omit<UsePinInputReturn, "descendants"> & {
/**
* Sets the pin input component to the disabled state
*/
@@ -100,8 +91,9 @@
};
export type UsePinInputReturn = ReturnType<typeof usePinInput>;
export interface UsePinInputFieldProps extends InputProps {
ref?: React.Ref<HTMLInputElement>;
+ index?: number;
}
/**
* @internal
*/Modified: package/dist/types/tabs/use-tabs.d.ts
Index: package/dist/types/tabs/use-tabs.d.ts
===================================================================
--- package/dist/types/tabs/use-tabs.d.ts
+++ package/dist/types/tabs/use-tabs.d.ts
@@ -4,14 +4,9 @@
import { UseClickableProps } from "../clickable";
export declare const TabsDescendantsProvider: import("react").Provider<import("../descendant").DescendantsManager<HTMLButtonElement, {}>>, useTabsDescendantsContext: () => import("../descendant").DescendantsManager<HTMLButtonElement, {}>, useTabsDescendants: () => import("../descendant").DescendantsManager<HTMLButtonElement, {}>, useTabsDescendant: (options?: {
disabled?: boolean | undefined;
id?: string | undefined;
-} | undefined) => {
- descendants: import("../descendant").UseDescendantsReturn;
- index: number;
- enabledIndex: number;
- register: (node: HTMLButtonElement | null) => void;
-};
+} | undefined) => import("../descendant/use-descendant").UseDescendantReturn<HTMLButtonElement, {}>;
export interface UseTabsProps {
/**
* The orientation of the tab list.
* @default "horizontal"