@codecademy/styleguide 79.0.1-alpha.2b3284.0 → 79.0.1-alpha.897add.0

package/CHANGELOG.md

@@ -3,10 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.0.1-alpha.2b3284.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.2b3284.0) (2026-01-29)
-
-**Note:** Version bump only for package @codecademy/styleguide
-
 ## [79.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@79.0.0) (2026-01-29)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.0.1-alpha.2b3284.0",
+  "version": "79.0.1-alpha.897add.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "2bd3d11c403cc6a30e8b861e343f08b7c87e100f"
+  "repository": "git@github.com:Codecademy/gamut.git"
 }

package/src/lib/Molecules/Popover/Popover.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from '@codecademy/gamut';
 import * as patterns from '@codecademy/gamut-patterns';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 const meta: Meta<typeof Popover> = {
   component: Popover,
@@ -27,91 +27,10 @@ type Story = StoryObj<typeof Popover>;
 
 type PopoverExampleProps = PopoverProps & Pick<FlexBoxProps, 'p'>;
 
-const POPOVER_HEIGHT_ESTIMATE = 200; // Estimate for flip calculation
-const VIEWPORT_PADDING = 16; // Padding from viewport edge
-
-const PopoverExample = ({
-  p = 16,
-  position: preferredPosition = 'below',
-  ...rest
-}: PopoverExampleProps) => {
+const PopoverExample = ({ p = 16, ...rest }: PopoverExampleProps) => {
   const [open, setOpen] = useState(false);
-  const [computedPosition, setComputedPosition] = useState<
-    'above' | 'below' | 'center'
-  >(preferredPosition === 'center' ? 'center' : preferredPosition);
-  const [availableHeight, setAvailableHeight] = useState<number | undefined>(
-    undefined
-  );
   const activeElRef = useRef<HTMLDivElement>(null);
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const [popoverHeight, setPopoverHeight] = useState(POPOVER_HEIGHT_ESTIMATE);
-
-  const calculatePosition = useCallback(() => {
-    const target = activeElRef.current;
-    if (!target || preferredPosition === 'center') return;
-
-    const targetRect = target.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-
-    const spaceBelow = viewportHeight - targetRect.bottom - VIEWPORT_PADDING;
-    const spaceAbove = targetRect.top - VIEWPORT_PADDING;
-
-    // Use measured height if available, otherwise estimate
-    const heightToFit = popoverHeight;
-
-    let newPosition: 'above' | 'below' =
-      preferredPosition === 'above' ? 'above' : 'below';
-
-    if (preferredPosition === 'below') {
-      // Prefer below, but flip to above if not enough space below and more space above
-      if (spaceBelow < heightToFit && spaceAbove > spaceBelow) {
-        newPosition = 'above';
-      } else {
-        newPosition = 'below';
-      }
-    } else if (preferredPosition === 'above') {
-      // Prefer above, but flip to below if not enough space above and more space below
-      if (spaceAbove < heightToFit && spaceBelow > spaceAbove) {
-        newPosition = 'below';
-      } else {
-        newPosition = 'above';
-      }
-    }
-
-    setComputedPosition(newPosition);
-
-    // Set max height based on the available space in the computed direction
-    const maxAvailableHeight = newPosition === 'below' ? spaceBelow : spaceAbove;
-    setAvailableHeight(Math.max(maxAvailableHeight, 100)); // Minimum 100px
-  }, [preferredPosition, popoverHeight]);
-
-  // Measure popover height when it opens
-  useEffect(() => {
-    if (open && popoverRef.current) {
-      const { height } = popoverRef.current.getBoundingClientRect();
-      if (height > 0) {
-        setPopoverHeight(height);
-      }
-    }
-  }, [open]);
-
-  // Recalculate position on open, scroll, or resize
-  useEffect(() => {
-    if (!open) return;
-
-    calculatePosition();
-
-    window.addEventListener('scroll', calculatePosition, true);
-    window.addEventListener('resize', calculatePosition);
-
-    return () => {
-      window.removeEventListener('scroll', calculatePosition, true);
-      window.removeEventListener('resize', calculatePosition);
-    };
-  }, [open, calculatePosition]);
-
   const toggleOpen = () => setOpen(!open);
-
   return (
     <>
       <Box ref={activeElRef} width="fit-content">
@@ -121,53 +40,11 @@ const PopoverExample = ({
         <Popover
           {...(rest as any)}
           isOpen={open}
-          popoverContainerRef={popoverRef}
-          position={computedPosition}
           targetRef={activeElRef}
           onRequestClose={() => setOpen(false)}
         >
-          {/*
-            Apply maxHeight and overflow to the content wrapper.
-            This makes the popover contents scrollable when they exceed
-            the available viewport space.
-          */}
-          <FlexBox
-            alignItems="flex-start"
-            flexDirection="column"
-            p={p}
-            maxHeight={availableHeight ? `${availableHeight}px` as any : undefined}
-            overflowY="auto"
-          >
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
-            </Box>
-            <Box mb={8} opacity={0.7}>
-              Position: {computedPosition}
-              {computedPosition !== preferredPosition && ' (flipped!)'}
-              {' | '}
-              Max height: {availableHeight ? `${Math.round(availableHeight)}px` : 'auto'}
-            </Box>
+          <FlexBox alignItems="flex-start" flexDirection="column" p={p}>
+            <Box mb={8}>Hooray!</Box>
             <FillButton size="small" onClick={() => setOpen(false)}>
               Close Popover
             </FillButton>

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2022 Codecademy LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.