diff --git a/.changeset/plenty-spies-provide.md b/.changeset/plenty-spies-provide.md new file mode 100644 index 00000000..fabff138 --- /dev/null +++ b/.changeset/plenty-spies-provide.md @@ -0,0 +1,5 @@ +--- +"leva": patch +--- + +fix: button label should use settings.label if provided diff --git a/packages/leva/src/components/Button/Button.tsx b/packages/leva/src/components/Button/Button.tsx index 599fb3d0..cb268359 100644 --- a/packages/leva/src/components/Button/Button.tsx +++ b/packages/leva/src/components/Button/Button.tsx @@ -10,10 +10,11 @@ type ButtonProps = { export function Button({ onClick, settings, label }: ButtonProps) { const store = useStoreContext() + const displayLabel = settings.label !== undefined ? settings.label : label return ( onClick(store.get)}> - {label} + {displayLabel} ) diff --git a/packages/leva/src/components/ValueInput/ValueInput.tsx b/packages/leva/src/components/ValueInput/ValueInput.tsx index 4bbcd5c0..04c56c62 100644 --- a/packages/leva/src/components/ValueInput/ValueInput.tsx +++ b/packages/leva/src/components/ValueInput/ValueInput.tsx @@ -84,7 +84,12 @@ export function ValueInput({ autoComplete="off" spellCheck="false" value={value} - onChange={update(onChange)} + onChange={update((value) => { + onChange(value) + // Only call onUpdate for non-number inputs; number inputs retain + // their original commit behavior (on blur/Enter via dragEnd) + if (type !== "number") onUpdate(value) + })} onFocus={() => emitOnEditStart()} onKeyPress={onKeyPress} onKeyDown={onKeyDown} diff --git a/packages/leva/src/hooks/useToggle.ts b/packages/leva/src/hooks/useToggle.ts index b5676b03..69f2581b 100644 --- a/packages/leva/src/hooks/useToggle.ts +++ b/packages/leva/src/hooks/useToggle.ts @@ -94,35 +94,55 @@ export function useToggle(toggled: boolean) { }, []) useEffect(() => { - // prevents first animation + const ref = wrapperRef.current! + const contentEl = contentRef.current! + + const updateHeight = () => { + const { height } = contentEl.getBoundingClientRect() + if (ref.style.height !== `${height}px` && height > 0) { + ref.style.height = `${height}px` + } + } + + if (!toggled) { + ref.style.height = '0px' + ref.style.overflow = 'hidden' + return + } + + // prevents first animation on initial expand if (firstRender.current) { firstRender.current = false + updateHeight() return } - let timeout: number - const ref = wrapperRef.current! - const fixHeight = () => { - if (toggled) { - ref.style.removeProperty('height') - ref.style.removeProperty('overflow') - contentRef.current!.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - } + ref.style.removeProperty('height') + ref.style.removeProperty('overflow') + contentEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) } ref.addEventListener('transitionend', fixHeight, { once: true }) - const { height } = contentRef.current!.getBoundingClientRect() - ref.style.height = height + 'px' - if (!toggled) { - ref.style.overflow = 'hidden' - timeout = window.setTimeout(() => (ref.style.height = '0px'), 50) + const { height } = contentEl.getBoundingClientRect() + const currentHeight = ref.style.height + ref.style.height = `${height}px` + + // If no transition will occur, call fixHeight directly + if (currentHeight === `${height}px`) { + ref.removeEventListener('transitionend', fixHeight) + fixHeight() } + const resizeObserver = new ResizeObserver(() => { + updateHeight() + }) + resizeObserver.observe(contentEl) + return () => { ref.removeEventListener('transitionend', fixHeight) - clearTimeout(timeout) + resizeObserver.disconnect() } }, [toggled]) diff --git a/packages/leva/src/plugins/Number/number-plugin.ts b/packages/leva/src/plugins/Number/number-plugin.ts index a97cdabc..bfff8d67 100644 --- a/packages/leva/src/plugins/Number/number-plugin.ts +++ b/packages/leva/src/plugins/Number/number-plugin.ts @@ -50,7 +50,7 @@ export const normalize = ({ value, ...settings }: NumberInput) => { const pad = Math.round(clamp(Math.log10(1 / padStep), 0, 2)) return { - value: suffix ? _value + suffix : _value, + value: _value, settings: { initialValue: _value, step, pad, min, max, suffix, ..._settings }, } } diff --git a/packages/leva/src/types/public.ts b/packages/leva/src/types/public.ts index 254b678d..c7e77142 100644 --- a/packages/leva/src/types/public.ts +++ b/packages/leva/src/types/public.ts @@ -44,7 +44,7 @@ export enum LevaInputs { VECTOR2D = 'VECTOR2D', } -export type ButtonSettings = { disabled?: boolean } +export type ButtonSettings = { disabled?: boolean; label?: string } export type ButtonInput = { type: SpecialInputs.BUTTON