From fdfa1040fba43b4d2f8666df1236c3b58843e3a8 Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Thu, 22 Aug 2024 02:47:18 +0800 Subject: [PATCH] fix(tabs): recalculate indicator styles on resize (#458) --- packages/core/package.json | 18 +++++----------- packages/core/src/tabs/tabs-indicator.tsx | 25 +++++++++++++++++++++++ pnpm-lock.yaml | 17 ++++++++++++++- 3 files changed, 46 insertions(+), 14 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index d9939826..dabe2e2c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -24,9 +24,7 @@ }, "license": "MIT", "author": "jer3m01 ", - "contributors": [ - "Fabien Marie-Louise " - ], + "contributors": ["Fabien Marie-Louise "], "sideEffects": false, "type": "module", "exports": { @@ -47,18 +45,11 @@ "types": "dist/index.d.ts", "typesVersions": { "*": { - "*": [ - "./dist/*/index.d.ts", - "./dist/index.d.ts" - ] + "*": ["./dist/*/index.d.ts", "./dist/index.d.ts"] } }, "source": "src/index.tsx", - "files": [ - "dist", - "src", - "NOTICE.txt" - ], + "files": ["dist", "src", "NOTICE.txt"], "scripts": { "build": "pnpm build:cp && pnpm build:tsup", "build:cp": "cp ../../NOTICE.txt .", @@ -75,11 +66,12 @@ "@internationalized/number": "^3.2.1", "@kobalte/utils": "^0.9.0", "@solid-primitives/props": "^3.1.8", + "@solid-primitives/resize-observer": "^2.0.26", "solid-presence": "^0.1.6", "solid-prevent-scroll": "^0.1.4" }, "devDependencies": { - "@kobalte/tests": "^0.6.0", + "@kobalte/tests": "workspace:*", "esbuild-plugin-solid": "^0.5.0", "tsup": "7.2.0" }, diff --git a/packages/core/src/tabs/tabs-indicator.tsx b/packages/core/src/tabs/tabs-indicator.tsx index 9b519e7e..f7fc7145 100644 --- a/packages/core/src/tabs/tabs-indicator.tsx +++ b/packages/core/src/tabs/tabs-indicator.tsx @@ -17,6 +17,7 @@ import { import type { Orientation } from "@kobalte/utils"; import { combineStyle } from "@solid-primitives/props"; +import { createResizeObserver } from "@solid-primitives/resize-observer"; import { useLocale } from "../i18n"; import { type ElementOf, @@ -114,12 +115,36 @@ export function TabsIndicator( ), ); + const [resizing, setResizing] = createSignal(false); + + let timeout: NodeJS.Timeout | null = null; + let prevTarget: any = null; + createResizeObserver(context.selectedTab, (_, t) => { + if (prevTarget !== t) { + prevTarget = t; + return; + } + + setResizing(true); + + if (timeout) clearTimeout(timeout); + + // gives the browser a chance to skip any animations that are disabled while resizing + timeout = setTimeout(() => { + timeout = null; + setResizing(false); + }, 1); + + computeStyle(); + }); + return ( as="div" role="presentation" style={combineStyle(style(), local.style)} data-orientation={context.orientation()} + data-resizing={resizing()} {...others} /> ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d14d6b5..3cd520b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -216,6 +216,9 @@ importers: '@solid-primitives/props': specifier: ^3.1.8 version: 3.1.11(solid-js@1.8.15) + '@solid-primitives/resize-observer': + specifier: ^2.0.26 + version: 2.0.26(solid-js@1.8.15) solid-js: specifier: ^1.8.15 version: 1.8.15 @@ -227,7 +230,7 @@ importers: version: 0.1.7(solid-js@1.8.15) devDependencies: '@kobalte/tests': - specifier: ^0.6.0 + specifier: workspace:* version: link:../tests esbuild-plugin-solid: specifier: ^0.5.0 @@ -4311,6 +4314,18 @@ packages: solid-js: 1.8.15 dev: false + /@solid-primitives/resize-observer@2.0.26(solid-js@1.8.15): + resolution: {integrity: sha512-KbPhwal6ML9OHeUTZszBbt6PYSMj89d4wVCLxlvDYL4U0+p+xlCEaqz6v9dkCwm/0Lb+Wed7W5T1dQZCP3JUUw==} + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/event-listener': 2.3.3(solid-js@1.8.15) + '@solid-primitives/rootless': 1.4.5(solid-js@1.8.15) + '@solid-primitives/static-store': 0.0.8(solid-js@1.8.15) + '@solid-primitives/utils': 6.2.3(solid-js@1.8.15) + solid-js: 1.8.15 + dev: false + /@solid-primitives/rootless@1.4.5(solid-js@1.8.15): resolution: {integrity: sha512-GFJE9GC3ojx0aUKqAUZmQPyU8fOVMtnVNrkdk2yS4kd17WqVSpXpoTmo9CnOwA+PG7FTzdIkogvfLQSLs4lrww==} peerDependencies: