From 9eda0f42953090a7c0dd0ad74994e29dad2c6744 Mon Sep 17 00:00:00 2001 From: GotPop Date: Thu, 8 Jan 2026 12:35:31 +0000 Subject: [PATCH 1/5] Updating selector for safari 26.1 bug --- packages/system/package.json | 2 +- packages/system/src/styles/icons/hamburger.css | 17 ++++++++--------- yarn.lock | 2 +- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/system/package.json b/packages/system/package.json index 75f7fa4..3582635 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@gotpop/system", - "version": "0.1.295", + "version": "0.1.296", "description": "React design system components for gotpop", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/system/src/styles/icons/hamburger.css b/packages/system/src/styles/icons/hamburger.css index 071ff65..f2d7165 100644 --- a/packages/system/src/styles/icons/hamburger.css +++ b/packages/system/src/styles/icons/hamburger.css @@ -49,14 +49,13 @@ icon-hamburger { --rotate: var(--after-rotate); --y: var(--after-y); } +} - :has(+ [popover]:popover-open) &, - :has(~ [popover]:popover-open) & { - --after-bottom: calc(50% - var(--line)); - --after-rotate: -45deg; - --after-y: calc(-var(--spacing-md) / 2 + var(--line)); - --before-rotate: 45deg; - --before-y: calc(var(--spacing-md) / 2 - var(--line)); - --hamburger-bg: transparent; - } +header:has([popover]:popover-open) icon-hamburger { + --after-bottom: calc(50% - var(--line)); + --after-rotate: -45deg; + --after-y: calc(-var(--spacing-md) / 2 + var(--line)); + --before-rotate: 45deg; + --before-y: calc(var(--spacing-md) / 2 - var(--line)); + --hamburger-bg: transparent; } diff --git a/yarn.lock b/yarn.lock index ca542d3..d0d1be3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -938,7 +938,7 @@ "@storyblok/react" "5.4.20" "@gotpop/system@*", "@gotpop/system@file:/Users/minivan/web/sites/platform/system/packages/system": - version "0.1.295" + version "0.1.296" resolved "file:packages/system" dependencies: "@icons-pack/react-simple-icons" "^13.8.0" From d192ec8c53a06b82459c282e53ce8e3789e0559b Mon Sep 17 00:00:00 2001 From: GotPop Date: Thu, 8 Jan 2026 13:00:46 +0000 Subject: [PATCH 2/5] Tracking state --- packages/system/package.json | 2 +- .../storyblok/NavDefault/NavDefault.tsx | 4 ++ .../system/src/hooks/useHamburgerState.ts | 52 +++++++++++++++++++ .../system/src/styles/icons/hamburger.css | 17 +++--- yarn.lock | 2 +- 5 files changed, 67 insertions(+), 10 deletions(-) create mode 100644 packages/system/src/hooks/useHamburgerState.ts diff --git a/packages/system/package.json b/packages/system/package.json index 3582635..d2ae3db 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@gotpop/system", - "version": "0.1.296", + "version": "0.1.297", "description": "React design system components for gotpop", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/system/src/components/storyblok/NavDefault/NavDefault.tsx b/packages/system/src/components/storyblok/NavDefault/NavDefault.tsx index ae1648f..9a5de34 100644 --- a/packages/system/src/components/storyblok/NavDefault/NavDefault.tsx +++ b/packages/system/src/components/storyblok/NavDefault/NavDefault.tsx @@ -1,3 +1,5 @@ +"use client" + import { useId } from "react" import type { ConfigStoryblok, @@ -5,6 +7,7 @@ import type { } from "../../../types/storyblok-components" import { ButtonToggleMenu } from "../../ui/ButtonToggleMenu" import "./NavDefault.css" +import { useHamburgerState } from "../../../hooks/useHamburgerState" import { CustomElement } from "../../ui/CustomElement" interface NavDefaultProps { @@ -16,6 +19,7 @@ interface NavDefaultProps { export function NavDefault({ blok: _blok, blocks }: NavDefaultProps) { const navId = useId() + useHamburgerState() return ( <> diff --git a/packages/system/src/hooks/useHamburgerState.ts b/packages/system/src/hooks/useHamburgerState.ts new file mode 100644 index 0000000..bda1be7 --- /dev/null +++ b/packages/system/src/hooks/useHamburgerState.ts @@ -0,0 +1,52 @@ +import { useEffect } from "react" + +/** + * Custom hook that initializes hamburger icon state tracking + * Tracks popover open/closed state and toggles class on icon-hamburger + */ +export function useHamburgerState() { + useEffect(() => { + const header = document.querySelector("header") + const hamburgerIcon = document.querySelector("icon-hamburger") + const popover = document.querySelector("[popover]") + + if (!header || !hamburgerIcon || !popover) { + console.warn("Hamburger state: Required elements not found") + return + } + + const handleToggle = (event: Event) => { + const toggleEvent = event as ToggleEvent + + if (toggleEvent.newState === "open") { + hamburgerIcon.classList.add("is-active") + } else { + hamburgerIcon.classList.remove("is-active") + } + } + + const checkPopoverState = (): void => { + const isOpen = popover.matches(":popover-open") + + hamburgerIcon.classList.toggle("is-active", isOpen) + } + + checkPopoverState() + + popover.addEventListener("toggle", handleToggle) + + const observer = new MutationObserver(() => { + checkPopoverState() + }) + + observer.observe(popover, { + attributes: true, + attributeFilter: ["popover"], + }) + + return () => { + popover.removeEventListener("toggle", handleToggle) + observer.disconnect() + } + }, []) +} diff --git a/packages/system/src/styles/icons/hamburger.css b/packages/system/src/styles/icons/hamburger.css index f2d7165..88b5b23 100644 --- a/packages/system/src/styles/icons/hamburger.css +++ b/packages/system/src/styles/icons/hamburger.css @@ -49,13 +49,14 @@ icon-hamburger { --rotate: var(--after-rotate); --y: var(--after-y); } -} -header:has([popover]:popover-open) icon-hamburger { - --after-bottom: calc(50% - var(--line)); - --after-rotate: -45deg; - --after-y: calc(-var(--spacing-md) / 2 + var(--line)); - --before-rotate: 45deg; - --before-y: calc(var(--spacing-md) / 2 - var(--line)); - --hamburger-bg: transparent; + /* Active state when popover is open */ + &.is-active { + --after-bottom: calc(50% - var(--line)); + --after-rotate: -45deg; + --after-y: calc(-var(--spacing-md) / 2 + var(--line)); + --before-rotate: 45deg; + --before-y: calc(var(--spacing-md) / 2 - var(--line)); + --hamburger-bg: transparent; + } } diff --git a/yarn.lock b/yarn.lock index d0d1be3..d2f389a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -938,7 +938,7 @@ "@storyblok/react" "5.4.20" "@gotpop/system@*", "@gotpop/system@file:/Users/minivan/web/sites/platform/system/packages/system": - version "0.1.296" + version "0.1.297" resolved "file:packages/system" dependencies: "@icons-pack/react-simple-icons" "^13.8.0" From 2eb7f85f76b00f401164e56820572ed961e066d9 Mon Sep 17 00:00:00 2001 From: GotPop Date: Thu, 8 Jan 2026 13:30:35 +0000 Subject: [PATCH 3/5] Updating hook for safari bug --- packages/system/package.json | 2 +- packages/system/src/hooks/useHamburgerState.ts | 16 +++++++++++++++- yarn.lock | 2 +- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/system/package.json b/packages/system/package.json index d2ae3db..5695a8b 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@gotpop/system", - "version": "0.1.297", + "version": "0.1.298", "description": "React design system components for gotpop", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/system/src/hooks/useHamburgerState.ts b/packages/system/src/hooks/useHamburgerState.ts index bda1be7..7d8eaee 100644 --- a/packages/system/src/hooks/useHamburgerState.ts +++ b/packages/system/src/hooks/useHamburgerState.ts @@ -8,7 +8,9 @@ export function useHamburgerState() { useEffect(() => { const header = document.querySelector("header") const hamburgerIcon = document.querySelector("icon-hamburger") - const popover = document.querySelector("[popover]") + const popover = document.querySelector("[popover]") as HTMLElement & { + hidePopover?: () => void + } if (!header || !hamburgerIcon || !popover) { console.warn("Hamburger state: Required elements not found") @@ -31,9 +33,20 @@ export function useHamburgerState() { hamburgerIcon.classList.toggle("is-active", isOpen) } + // Safari bug fix: reset popover state when crossing desktop breakpoint + const mediaQuery = window.matchMedia("(width >= 1480px)") + + const handleBreakpointChange = () => { + if (popover.hidePopover) { + popover.hidePopover() + hamburgerIcon.classList.remove("is-active") + } + } + checkPopoverState() popover.addEventListener("toggle", handleToggle) + mediaQuery.addEventListener("change", handleBreakpointChange) const observer = new MutationObserver(() => { checkPopoverState() @@ -46,6 +59,7 @@ export function useHamburgerState() { return () => { popover.removeEventListener("toggle", handleToggle) + mediaQuery.removeEventListener("change", handleBreakpointChange) observer.disconnect() } }, []) diff --git a/yarn.lock b/yarn.lock index d2f389a..cfb8aa9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -938,7 +938,7 @@ "@storyblok/react" "5.4.20" "@gotpop/system@*", "@gotpop/system@file:/Users/minivan/web/sites/platform/system/packages/system": - version "0.1.297" + version "0.1.298" resolved "file:packages/system" dependencies: "@icons-pack/react-simple-icons" "^13.8.0" From 66a771212e85fc1f4bb06e18ea78dbb3dea2fc4b Mon Sep 17 00:00:00 2001 From: GotPop Date: Thu, 8 Jan 2026 13:45:18 +0000 Subject: [PATCH 4/5] Updating hook for safari bug --- packages/system/package.json | 2 +- packages/system/src/hooks/useHamburgerState.ts | 5 +++++ yarn.lock | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/system/package.json b/packages/system/package.json index 5695a8b..208d3e5 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@gotpop/system", - "version": "0.1.298", + "version": "0.1.299", "description": "React design system components for gotpop", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/system/src/hooks/useHamburgerState.ts b/packages/system/src/hooks/useHamburgerState.ts index 7d8eaee..110dec1 100644 --- a/packages/system/src/hooks/useHamburgerState.ts +++ b/packages/system/src/hooks/useHamburgerState.ts @@ -45,6 +45,11 @@ export function useHamburgerState() { checkPopoverState() + if (!mediaQuery.matches && popover.hidePopover) { + popover.hidePopover() + hamburgerIcon.classList.remove("is-active") + } + popover.addEventListener("toggle", handleToggle) mediaQuery.addEventListener("change", handleBreakpointChange) diff --git a/yarn.lock b/yarn.lock index cfb8aa9..a2e62e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -938,7 +938,7 @@ "@storyblok/react" "5.4.20" "@gotpop/system@*", "@gotpop/system@file:/Users/minivan/web/sites/platform/system/packages/system": - version "0.1.298" + version "0.1.299" resolved "file:packages/system" dependencies: "@icons-pack/react-simple-icons" "^13.8.0" From 08dc3f994b7c65a7194e9819336f8787a0d16ec7 Mon Sep 17 00:00:00 2001 From: GotPop Date: Thu, 26 Feb 2026 11:26:53 +0000 Subject: [PATCH 5/5] Update form builder with correct types --- .../src/components/withFormBuilderData.tsx | 14 +++----------- packages/system/package.json | 2 +- yarn.lock | 2 +- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/packages/storyblok/src/components/withFormBuilderData.tsx b/packages/storyblok/src/components/withFormBuilderData.tsx index 5bd52ec..19f6ce9 100644 --- a/packages/storyblok/src/components/withFormBuilderData.tsx +++ b/packages/storyblok/src/components/withFormBuilderData.tsx @@ -1,16 +1,10 @@ import "server-only" -import type { ConfigStoryblok } from "@gotpop/system" +import type { ConfigStoryblok, FormBuilderStoryblok } from "@gotpop/system" import { StoryblokServerComponent } from "@storyblok/react/rsc" import type { ReactNode } from "react" import { getConfig } from "../config/runtime-config" -interface FormBuilderBlok { - // biome-ignore lint/suspicious/noExplicitAny: Replace with proper type once forms are full integrated - inputs?: any[] - [key: string]: unknown -} - interface FormState { errors: Record message: string @@ -18,8 +12,7 @@ interface FormState { } interface WithFormBuilderDataProps { - // biome-ignore lint/suspicious/noExplicitAny: Replace with proper type once forms are full integrated - blok: any + blok: FormBuilderStoryblok content: ReactNode config: ConfigStoryblok | null onSubmit?: (formData: FormData) => Promise @@ -34,10 +27,9 @@ export function withFormBuilderData( blok, config: providedConfig, }: { - blok: FormBuilderBlok + blok: FormBuilderStoryblok config?: ConfigStoryblok | null }) => { - // Use provided config or fetch from cache const config = providedConfig ?? (await getConfig()) const { inputs } = blok diff --git a/packages/system/package.json b/packages/system/package.json index 208d3e5..34db797 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@gotpop/system", - "version": "0.1.299", + "version": "0.1.301", "description": "React design system components for gotpop", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/yarn.lock b/yarn.lock index a2e62e3..23226f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -938,7 +938,7 @@ "@storyblok/react" "5.4.20" "@gotpop/system@*", "@gotpop/system@file:/Users/minivan/web/sites/platform/system/packages/system": - version "0.1.299" + version "0.1.301" resolved "file:packages/system" dependencies: "@icons-pack/react-simple-icons" "^13.8.0"