@codecademy/gamut 67.6.5-alpha.e8ee42.0 → 67.6.5

package/dist/Tip/shared/utils.js

@@ -15,108 +15,4 @@ export const escapeKeyPressHandler = event => {
 export const isElementVisible = element => {
   if (!(element instanceof HTMLElement)) return false;
   return element.checkVisibility?.() ?? true;
-};
-
-/**
- * Check if a floating element (modal, dialog, popover, overlay, etc.) is actually open and blocking.
- *
- * A floating element is considered "open" and blocking if:
- * 1. It's a <dialog> element with the open attribute (always blocking per HTML spec), OR
- * 2. It has role="alertdialog" (always blocking per ARIA spec), OR
- * 3. It has role="dialog" AND:
- *    - It's not aria-hidden="true", AND
- *    - It doesn't have aria-expanded="false" (for collapsible dialogs), AND
- *    - It's actually visible (not just in DOM), AND
- *    - It has aria-modal="true" (indicates blocking modal per ARIA spec)
- *
- * Non-blocking popovers and collapsible dialogs without aria-modal="true" are not considered
- * blocking and should not prevent InfoTip from closing.
- *
- * @param element - The DOM element to check
- * @returns `true` if the floating element is actually open and blocking, `false` otherwise
- */
-export const isFloatingElementOpen = element => {
-  if (!isElementVisible(element)) return false;
-
-  /**
-   * Native <dialog> elements are always blocking when open.
-   * Per HTML spec, dialog elements with the open attribute are modal.
-   */
-  if (element instanceof HTMLDialogElement) {
-    return element.open === true;
-  }
-
-  /**
-   * Elements with role="dialog" or role="alertdialog".
-   * Per ARIA spec, role="alertdialog" is always modal (blocking).
-   * role="dialog" requires aria-modal="true" to be blocking.
-   */
-  const role = element.getAttribute('role');
-  if (role !== 'dialog' && role !== 'alertdialog') {
-    return false;
-  }
-
-  /**
-   * Cache attribute values to avoid multiple DOM reads.
-   * Check aria-hidden first as it's a common exclusion case.
-   */
-  const ariaHidden = element.getAttribute('aria-hidden');
-  if (ariaHidden === 'true') {
-    return false;
-  }
-
-  /**
-   * Check for collapsible dialogs (like help menus).
-   * If aria-expanded exists and is false, the dialog is closed.
-   * These dialogs stay in DOM but are collapsed when closed.
-   */
-  const ariaExpanded = element.getAttribute('aria-expanded');
-  if (ariaExpanded === 'false') {
-    return false;
-  }
-
-  /**
-   * Per ARIA spec, role="alertdialog" is always modal (blocking).
-   * At this point, we've already verified:
-   * - The element is visible (not hidden via CSS)
-   * - It's not aria-hidden="true"
-   * - It's not aria-expanded="false"
-   * So if it's an alertdialog, it's open and blocking.
-   * Handle alertdialog here to avoid expensive DOM queries for dialog elements.
-   */
-  if (role === 'alertdialog') {
-    return true;
-  }
-
-  /**
-   * For role="dialog", check if any child button with aria-expanded indicates the dialog is closed.
-   * Some dialogs use a toggle button pattern where the button's aria-expanded
-   * reflects the dialog's state.
-   * Only perform this expensive querySelector operation after all other checks pass.
-   */
-  const toggleButton = element.querySelector('button[aria-expanded], [role="button"][aria-expanded]');
-  if (toggleButton && toggleButton.getAttribute('aria-expanded') === 'false') {
-    return false;
-  }
-
-  /**
-   * For role="dialog", check aria-modal attribute.
-   * aria-modal="true" indicates a blocking modal (Modal, Dialog).
-   * aria-modal="false" or absence indicates non-blocking.
-   */
-  const ariaModal = element.getAttribute('aria-modal');
-  if (ariaModal === 'true') {
-    return true;
-  }
-  if (ariaModal === 'false') {
-    // Explicitly non-modal, should not block
-    return false;
-  }
-
-  /**
-   * Elements with role="dialog" but without aria-modal="true" are non-blocking.
-   * These include collapsible dialogs (help menus) and popovers (Popover, InfoTip, Tooltip)
-   * that use role="dialog". They should not prevent InfoTip from closing.
-   */
-  return false;
 };

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "67.6.5-alpha.e8ee42.0",
+  "version": "67.6.5",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.54.1",
-    "@codecademy/gamut-illustrations": "0.58.1",
-    "@codecademy/gamut-patterns": "0.10.20",
-    "@codecademy/gamut-styles": "17.11.1",
-    "@codecademy/variance": "0.25.1",
+    "@codecademy/gamut-icons": "9.54.2",
+    "@codecademy/gamut-illustrations": "0.58.2",
+    "@codecademy/gamut-patterns": "0.10.21",
+    "@codecademy/gamut-styles": "17.11.2",
+    "@codecademy/variance": "0.25.2",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",
     "classnames": "^2.2.5",
     "framer-motion": "^11.18.0",
     "html-to-react": "^1.6.0",
     "invariant": "^2.2.4",
-    "lodash": "^4.17.5",
+    "lodash": "^4.17.23",
     "marked": "^4.3.0",
     "polished": "^4.1.2",
     "react-aria-components": "1.8.0",
@@ -56,5 +56,5 @@
     "dist/**/[A-Z]**/[A-Z]*.js",
     "dist/**/[A-Z]**/index.js"
   ],
-  "gitHead": "5ef55ea7ef11d41315e8ad8b462ab14565d43fb7"
+  "gitHead": "dba147a168af471002f2f97b74eea97204bd843f"
 }

package/dist/Form/__tests__/testUtils.d.ts

@@ -1,22 +0,0 @@
-import { RenderResult } from '@testing-library/react';
-/**
- * Creates and appends an external label element to the test container.
- * This is useful for testing ariaLabelledby functionality where an InfoTip
- * references an external label element.
- *
- * @param view - The render result from testing-library
- * @param id - The ID of the external label element (used in ariaLabelledby)
- * @param text - The text content of the external label
- * @returns The created span element
- *
- * @example
- * ```ts
- * const { view } = renderView({
- *   infotip: { info, ariaLabelledby: 'external-label-id' },
- * });
- *
- * createExternalLabel(view, 'external-label-id', 'External Label');
- * view.getByRole('button', { name: 'External Label' });
- * ```
- */
-export declare const createExternalLabel: (view: RenderResult, id: string, text: string) => HTMLSpanElement;

package/dist/Tip/InfoTip/type-utils.d.ts

@@ -1,35 +0,0 @@
-import type { InfoTipBaseProps, InfoTipProps } from './index';
-type InfoTipAriaLabel = InfoTipBaseProps & {
-    ariaLabel?: string;
-    ariaLabelledby?: never;
-};
-type InfoTipAriaLabelledby = InfoTipBaseProps & {
-    ariaLabel?: never;
-    ariaLabelledby?: string;
-};
-type InfoTipPropsAriaWithFallback = InfoTipBaseProps & {
-    ariaLabel?: never;
-    ariaLabelledby?: never;
-};
-/**
- * InfoTip props that allow both ariaLabel and ariaLabelledby to be optional.
- * Used in components that automatically provide ariaLabelledby when neither is provided.
- */
-export type InfoTipSubComponentProps = InfoTipAriaLabel | InfoTipAriaLabelledby | InfoTipPropsAriaWithFallback;
-export declare const createInfoTipProps: (props: InfoTipSubComponentProps, fallbackAriaLabelledby?: string) => {
-    infotipProps: InfoTipProps;
-    shouldLabelInfoTip: boolean;
-};
-/**
- * Hook to handle infotip props and accessibility labeling.
- * Extracts the common pattern used by Radio, Checkbox, and FormGroupLabel components.
- *
- * @param infotip - Optional infotip subcomponent props
- * @returns Object containing infotipProps, labelId, and shouldLabelInfoTip flag
- */
-export declare const useInfotipProps: (infotip?: InfoTipSubComponentProps) => {
-    infotipProps: InfoTipProps | undefined;
-    labelId: string;
-    shouldLabelInfoTip: boolean;
-};
-export {};

package/dist/Tip/InfoTip/type-utils.js

@@ -1,72 +0,0 @@
-import { useId } from 'react';
-
-/**
- * InfoTip props that allow both ariaLabel and ariaLabelledby to be optional.
- * Used in components that automatically provide ariaLabelledby when neither is provided.
- */
-
-export const createInfoTipProps = (props, fallbackAriaLabelledby) => {
-  const {
-    ariaLabel,
-    ariaLabelledby,
-    ...rest
-  } = props;
-  const hasAriaLabel = ariaLabel !== undefined;
-  const hasAriaLabelledby = ariaLabelledby !== undefined;
-  if (hasAriaLabel) {
-    return {
-      infotipProps: {
-        ...rest,
-        ariaLabel
-      },
-      shouldLabelInfoTip: false
-    };
-  }
-  if (hasAriaLabelledby) {
-    return {
-      infotipProps: {
-        ...rest,
-        ariaLabelledby
-      },
-      shouldLabelInfoTip: false
-    };
-  }
-  if (fallbackAriaLabelledby) {
-    return {
-      infotipProps: {
-        ...rest,
-        ariaLabelledby: fallbackAriaLabelledby
-      },
-      shouldLabelInfoTip: true
-    };
-  }
-  return {
-    infotipProps: {
-      ...rest
-    },
-    shouldLabelInfoTip: false
-  };
-};
-
-/**
- * Hook to handle infotip props and accessibility labeling.
- * Extracts the common pattern used by Radio, Checkbox, and FormGroupLabel components.
- *
- * @param infotip - Optional infotip subcomponent props
- * @returns Object containing infotipProps, labelId, and shouldLabelInfoTip flag
- */
-export const useInfotipProps = infotip => {
-  const labelId = useId();
-  const {
-    infotipProps,
-    shouldLabelInfoTip
-  } = infotip ? createInfoTipProps(infotip, labelId) : {
-    infotipProps: undefined,
-    shouldLabelInfoTip: false
-  };
-  return {
-    infotipProps,
-    labelId,
-    shouldLabelInfoTip
-  };
-};