Skip to content

Commit

Permalink
fix(tabs): recalculate indicator styles on resize (#458)
Browse files Browse the repository at this point in the history
  • Loading branch information
Brendonovich authored Aug 21, 2024
1 parent 23d90f1 commit fdfa104
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 14 deletions.
18 changes: 5 additions & 13 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@
},
"license": "MIT",
"author": "jer3m01 <[email protected]>",
"contributors": [
"Fabien Marie-Louise <[email protected]>"
],
"contributors": ["Fabien Marie-Louise <[email protected]>"],
"sideEffects": false,
"type": "module",
"exports": {
Expand All @@ -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 .",
Expand All @@ -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"
},
Expand Down
25 changes: 25 additions & 0 deletions packages/core/src/tabs/tabs-indicator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -114,12 +115,36 @@ export function TabsIndicator<T extends ValidComponent = "div">(
),
);

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 (
<Polymorphic<TabsIndicatorRenderProps>
as="div"
role="presentation"
style={combineStyle(style(), local.style)}
data-orientation={context.orientation()}
data-resizing={resizing()}
{...others}
/>
);
Expand Down
17 changes: 16 additions & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit fdfa104

Please sign in to comment.