@codecademy/gamut 68.2.3-alpha.f27e78.0 → 68.2.3-alpha.f802ae.0

package/dist/Pagination/index.js

@@ -1,8 +1,7 @@
 import { MiniChevronLeftIcon, MiniChevronRightIcon } from '@codecademy/gamut-icons';
-import { useElementDir } from '@codecademy/gamut-styles';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import * as React from 'react';
-import { Text } from '..';
+import { HiddenText } from '..';
 import { FlexBox } from '../Box';
 import { AnimatedFadeButton, AnimatedSlideButton } from './AnimatedPaginationButtons';
 import { EllipsisButton } from './EllipsisButton';
@@ -24,8 +23,6 @@ export const Pagination = ({
   const [currentPage, setCurrentPage] = useState(pageNumber ?? defaultPageNumber);
   const [liveText, setLiveText] = useState('');
   const [shownPageArray, setShownPageArray] = useState([0]);
-  const rootRef = useRef(null);
-  const isRtl = useElementDir(rootRef);
   const showSkipToButtons = !!(type === undefined && totalPages >= 10 || type === 'includeSkipToButtons');
   const changeShownPages = shouldPagesChange({
     chapterSize,
@@ -70,16 +67,14 @@ export const Pagination = ({
         chapterSize
       }) : 'initial'}`
     },
-    ref: rootRef,
-    children: [/*#__PURE__*/_jsx(Text, {
+    children: [/*#__PURE__*/_jsx(HiddenText, {
       "aria-live": "polite",
-      screenreader: true,
       children: liveText
     }), /*#__PURE__*/_jsx(AnimatedFadeButton, {
       "aria-label": `Navigate back to page ${currentPage - 1}`,
       buttonType: variant,
       href: navigation,
-      icon: isRtl ? MiniChevronRightIcon : MiniChevronLeftIcon,
+      icon: MiniChevronLeftIcon,
       showButton: currentPage === 1 ? 'hidden' : 'shown',
       onClick: () => changeHandler(currentPage - 1)
     }), showSkipToButtons && /*#__PURE__*/_jsxs(_Fragment, {
@@ -134,7 +129,7 @@ export const Pagination = ({
       "aria-label": `Navigate forward to page ${currentPage + 1}`,
       buttonType: variant,
       href: navigation,
-      icon: isRtl ? MiniChevronLeftIcon : MiniChevronRightIcon,
+      icon: MiniChevronRightIcon,
       showButton: currentPage === totalPages ? 'hidden' : 'shown',
       onClick: () => changeHandler(currentPage + 1)
     })]

package/dist/Popover/styles/beak.d.ts

@@ -1,7 +1,10 @@
 import { PopoverProps } from '../types';
 export declare const beakRightCenterStylesLrg: {
     left: number;
-    transform: string;
+    '&:dir(rtl)': {
+        transform: "rotate(135deg)" | "rotate(-45deg)";
+    };
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;

package/dist/Popover/styles/beak.js

@@ -1,5 +1,7 @@
-import { beakBottomStyles, beakLeftCenterStyles, beakRightCenterStyles, beakStylesBase, beakTopStyles, getBeakBgAndRotation, tooltipBgColor } from '../../Tip/shared/styles/styles';
+import { beakBottomStyles, beakLeftCenterStyles, beakRightCenterStyles, beakStylesBase, beakTopStyles, getBeakBgAndRotation, horizontalCenterBeakRtlPopover, tooltipBgColor } from '../../Tip/shared/styles/styles';
 import { popoverPrimaryBgColor } from './base';
+const rtlBeakBoxRight = horizontalCenterBeakRtlPopover('right');
+const rtlBeakBoxLeft = horizontalCenterBeakRtlPopover('left');
 const positionAbove = {
   top: 'calc(100% - 10px)',
   ...beakStylesBase,
@@ -52,6 +54,7 @@ const beakYCenterSml = {
 };
 const beakRightCenterStylesSml = {
   ...beakRightCenterStyles,
+  ...rtlBeakBoxRight,
   left: -8
 };
 export const beakRightCenterStylesLrg = {
@@ -60,10 +63,12 @@ export const beakRightCenterStylesLrg = {
     alignment: 'right',
     color: popoverPrimaryBgColor
   }),
+  ...rtlBeakBoxRight,
   left: -10
 };
 const beakLeftCenterStylesSml = {
   ...beakLeftCenterStyles,
+  ...rtlBeakBoxLeft,
   right: -8
 };
 const beakLeftCenterStylesLrg = {
@@ -72,6 +77,7 @@ const beakLeftCenterStylesLrg = {
     alignment: 'left',
     color: popoverPrimaryBgColor
   }),
+  ...rtlBeakBoxLeft,
   right: -10
 };
 export const beakBoxX = {

package/dist/Tip/shared/styles/styles.d.ts

@@ -26,17 +26,35 @@ export declare const centerHorizontal: {
     readonly my: "auto";
 };
 declare const beakBackgroundRotation: {
-    above: string;
-    below: string;
-    right: string;
-    left: string;
+    readonly above: "rotate(45deg)";
+    readonly below: "rotate(-135deg)";
+    readonly right: "rotate(135deg)";
+    readonly left: "rotate(-45deg)";
+};
+type SideCenterBeakSide = 'left' | 'right';
+/**
+ * Inline ToolTip / InfoTip: RTL beak rotation on the container that owns `::after`
+ * (avoids invalid `::after:dir(rtl)` when the same beak object is merged under `&::after`).
+ */
+export declare const horizontalCenterBeakRtlInline: (side: SideCenterBeakSide) => {
+    '&:dir(rtl)': {
+        '&::after': {
+            transform: "rotate(135deg)" | "rotate(-45deg)";
+        };
+    };
+};
+/** Popover beak is a real node; `:dir(rtl)` applies on that element (not under `&::after`). */
+export declare const horizontalCenterBeakRtlPopover: (side: SideCenterBeakSide) => {
+    '&:dir(rtl)': {
+        transform: "rotate(135deg)" | "rotate(-45deg)";
+    };
 };
 type GetBeakBackgroundType = {
     alignment: keyof typeof beakBackgroundRotation;
     color: typeof tooltipBgColor | typeof popoverPrimaryBgColor;
 };
 export declare const getBeakBgAndRotation: ({ alignment, color, }: GetBeakBackgroundType) => {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
 };
 export declare const beakStylesBase: {
@@ -44,25 +62,25 @@ export declare const beakStylesBase: {
     borderWidth: string;
 };
 export declare const beakTopStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
 };
 export declare const beakBottomStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
 };
 export declare const beakRightCenterStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
 };
 export declare const beakLeftCenterStyles: {
-    transform: string;
+    transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     backgroundImage: string;
     borderColor: string;
     borderWidth: string;
@@ -73,7 +91,7 @@ export declare const topStyles: {
 };
 export declare const topStylesAfter: {
     readonly bottom: "0.25rem";
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;
@@ -103,14 +121,19 @@ export declare const bottomStylesBefore: {
 };
 export declare const bottomStylesAfter: {
     readonly top: "0.25rem";
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;
 };
 export declare const rightAlignStyles: {
-    readonly pl: 12;
-    readonly left: "100%";
+    '&:dir(rtl)': {
+        '&::after': {
+            transform: "rotate(135deg)" | "rotate(-45deg)";
+        };
+    };
+    pl: number;
+    left: string;
 };
 export declare const horizontalCenterStyles: {
     readonly maxWidth: number;
@@ -121,8 +144,13 @@ export declare const horizontalCenterStyles: {
     readonly minWidth: 4;
 };
 export declare const leftAlignStyles: {
-    readonly pr: 12;
-    readonly right: "100%";
+    '&:dir(rtl)': {
+        '&::after': {
+            transform: "rotate(135deg)" | "rotate(-45deg)";
+        };
+    };
+    pr: number;
+    right: string;
 };
 export declare const verticalCenterStyles: {
     readonly left: "calc(50% - 4rem)";
@@ -147,14 +175,14 @@ export declare const rightVertStylesAfter: {
     readonly left: "1.5rem";
 };
 export declare const rightAlignStylesAfter: {
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;
     readonly left: "4px";
 };
 export declare const leftAlignStylesAfter: {
-    readonly transform: string;
+    readonly transform: "rotate(45deg)" | "rotate(-135deg)" | "rotate(135deg)" | "rotate(-45deg)";
     readonly backgroundImage: string;
     readonly borderColor: string;
     readonly borderWidth: string;

package/dist/Tip/shared/styles/styles.js

@@ -58,6 +58,26 @@ const beakBackgroundRotation = {
   right: 'rotate(135deg)',
   left: 'rotate(-45deg)'
 };
+const sideCenterMirroredTransform = side => side === 'right' ? beakBackgroundRotation.left : beakBackgroundRotation.right;
+
+/**
+ * Inline ToolTip / InfoTip: RTL beak rotation on the container that owns `::after`
+ * (avoids invalid `::after:dir(rtl)` when the same beak object is merged under `&::after`).
+ */
+export const horizontalCenterBeakRtlInline = side => ({
+  '&:dir(rtl)': {
+    '&::after': {
+      transform: sideCenterMirroredTransform(side)
+    }
+  }
+});
+
+/** Popover beak is a real node; `:dir(rtl)` applies on that element (not under `&::after`). */
+export const horizontalCenterBeakRtlPopover = side => ({
+  '&:dir(rtl)': {
+    transform: sideCenterMirroredTransform(side)
+  }
+});
 export const getBeakBgAndRotation = ({
   alignment,
   color
@@ -137,7 +157,8 @@ export const bottomStylesAfter = {
 };
 export const rightAlignStyles = {
   pl: containerOffsetVertical,
-  left: '100%'
+  left: '100%',
+  ...horizontalCenterBeakRtlInline('right')
 };
 export const horizontalCenterStyles = {
   ...horizontalCenterWidths,
@@ -150,7 +171,8 @@ export const horizontalCenterStyles = {
 };
 export const leftAlignStyles = {
   pr: containerOffsetVertical,
-  right: '100%'
+  right: '100%',
+  ...horizontalCenterBeakRtlInline('left')
 };
 export const verticalCenterStyles = {
   ...verticalCenterWidths,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "68.2.3-alpha.f27e78.0",
+  "version": "68.2.3-alpha.f802ae.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut-icons": "9.57.3-alpha.f27e78.0",
-    "@codecademy/gamut-illustrations": "0.58.10-alpha.f27e78.0",
-    "@codecademy/gamut-patterns": "0.10.29-alpha.f27e78.0",
-    "@codecademy/gamut-styles": "17.13.2-alpha.f27e78.0",
-    "@codecademy/variance": "0.26.2-alpha.f27e78.0",
+    "@codecademy/gamut-icons": "9.57.3-alpha.f802ae.0",
+    "@codecademy/gamut-illustrations": "0.58.10-alpha.f802ae.0",
+    "@codecademy/gamut-patterns": "0.10.29-alpha.f802ae.0",
+    "@codecademy/gamut-styles": "17.13.2-alpha.f802ae.0",
+    "@codecademy/variance": "0.26.2-alpha.f802ae.0",
     "@react-aria/interactions": "3.25.0",
     "@types/marked": "^4.0.8",
     "@vidstack/react": "^1.12.12",