@ndla/ui 56.0.94-alpha.0 → 56.0.95-alpha.0

package/es/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -22,9 +22,11 @@ export const ContentTypeBlockQuote = /*#__PURE__*/forwardRef((_ref, ref) => {
     contentType,
     ...props
   } = _ref;
+  const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+  const variantColor = variant === "colored" ? color : undefined;
   return /*#__PURE__*/_jsx(BlockQuote, {
     ...props,
-    variant: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    variant: variantColor,
     ref: ref
   });
 });

package/es/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -22,9 +22,11 @@ export const ContentTypeFramedContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     contentType,
     ...props
   } = _ref;
+  const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+  const variantColor = variant === "colored" ? color : undefined;
   return /*#__PURE__*/_jsx(FramedContent, {
     ...props,
-    colorTheme: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    colorTheme: variantColor,
     ref: ref
   });
 });

package/es/FactBox/FactBox.js

@@ -6,7 +6,7 @@
  *
  */
 
-import { forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ArrowDownShortLine } from "@ndla/icons";
 import { IconButton } from "@ndla/primitives";
@@ -116,10 +116,11 @@ const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [state, setState] = useState(defaultOpen ? "open" : "closed");
   const contentId = useId();
   // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
-  // TODO: Remove this hack when we upgrade to React 19.
+  // When running in React 18, we need to use an empty string instead of true.
+  // TODO: Remove this hack once we upgrade to React 19 as a peer dep.
   const inertAttribute = useMemo(() => {
     return state === "closed" ? {
-      inert: ""
+      inert: typeof React.use === "function" ? true : ""
     } : {};
   }, [state]);
   useEffect(() => {

package/lib/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -28,9 +28,11 @@ const ContentTypeBlockQuote = exports.ContentTypeBlockQuote = /*#__PURE__*/(0, _
     contentType,
     ...props
   } = _ref;
+  const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+  const variantColor = variant === "colored" ? color : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.BlockQuote, {
     ...props,
-    variant: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    variant: variantColor,
     ref: ref
   });
 });

package/lib/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -28,9 +28,11 @@ const ContentTypeFramedContent = exports.ContentTypeFramedContent = /*#__PURE__*
     contentType,
     ...props
   } = _ref;
+  const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+  const variantColor = variant === "colored" ? color : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FramedContent, {
     ...props,
-    colorTheme: variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined,
+    colorTheme: variantColor,
     ref: ref
   });
 });

package/lib/FactBox/FactBox.d.ts

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type ComponentProps, type ReactNode } from "react";
+import React, { type ComponentProps, type ReactNode } from "react";
 interface Props extends ComponentProps<"aside"> {
     children?: ReactNode;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-declare const FactBox: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const FactBox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
 export default FactBox;

package/lib/FactBox/FactBox.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _reactI18next = require("react-i18next");
 var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * Copyright (c) 2016-present, NDLA.
  *
@@ -122,10 +124,11 @@ const FactBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const [state, setState] = (0, _react.useState)(defaultOpen ? "open" : "closed");
   const contentId = (0, _react.useId)();
   // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
-  // TODO: Remove this hack when we upgrade to React 19.
+  // When running in React 18, we need to use an empty string instead of true.
+  // TODO: Remove this hack once we upgrade to React 19 as a peer dep.
   const inertAttribute = (0, _react.useMemo)(() => {
     return state === "closed" ? {
-      inert: ""
+      inert: typeof _react.default.use === "function" ? true : ""
     } : {};
   }, [state]);
   (0, _react.useEffect)(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.94-alpha.0",
+  "version": "56.0.95-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -35,8 +35,8 @@
     "@ndla/core": "^5.0.3",
     "@ndla/icons": "^8.0.50-alpha.0",
     "@ndla/licenses": "^8.0.6-alpha.0",
-    "@ndla/primitives": "^1.0.71-alpha.0",
-    "@ndla/safelink": "^7.0.72-alpha.0",
+    "@ndla/primitives": "^1.0.72-alpha.0",
+    "@ndla/safelink": "^7.0.73-alpha.0",
     "@ndla/styled-system": "^0.0.30",
     "@ndla/util": "^5.0.5-alpha.0",
     "html-react-parser": "^5.1.19",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ee44caa84045f796a9d85a0fd51d1df7bd740dd2"
+  "gitHead": "18f2a2ec579a60acd9b212733023d27670dcf885"
 }

package/src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx

@@ -26,11 +26,7 @@ interface Props extends Omit<BlockQuoteProps, "variant"> {
 }
 
 export const ContentTypeBlockQuote = forwardRef<HTMLQuoteElement, Props>(({ variant, contentType, ...props }, ref) => {
-  return (
-    <BlockQuote
-      {...props}
-      variant={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
-      ref={ref}
-    />
-  );
+  const color = contentType ? (contentTypeToVariantMapping[contentType] ?? "brand1") : "brand1";
+  const variantColor = variant === "colored" ? color : undefined;
+  return <BlockQuote {...props} variant={variantColor} ref={ref} />;
 });

package/src/ContentTypeFramedContent/ContentTypeFramedContent.tsx

@@ -27,12 +27,8 @@ interface Props extends FramedContentProps {
 
 export const ContentTypeFramedContent = forwardRef<HTMLDivElement, Props>(
   ({ variant = "neutral", contentType, ...props }, ref) => {
-    return (
-      <FramedContent
-        {...props}
-        colorTheme={variant === "colored" && contentType ? contentTypeToVariantMapping[contentType] : undefined}
-        ref={ref}
-      />
-    );
+    const color = contentType ? (contentTypeToVariantMapping[contentType] ?? "brand1") : "brand1";
+    const variantColor = variant === "colored" ? color : undefined;
+    return <FramedContent {...props} colorTheme={variantColor} ref={ref} />;
   },
 );

package/src/FactBox/FactBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import {
+import React, {
   type ComponentProps,
   type ReactNode,
   forwardRef,
@@ -126,9 +126,10 @@ const FactBox = forwardRef<HTMLElement, Props>(
     const [state, setState] = useState<"open" | "closed">(defaultOpen ? "open" : "closed");
     const contentId = useId();
     // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
-    // TODO: Remove this hack when we upgrade to React 19.
+    // When running in React 18, we need to use an empty string instead of true.
+    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.
     const inertAttribute = useMemo(() => {
-      return state === "closed" ? { inert: "" } : {};
+      return state === "closed" ? { inert: typeof React.use === "function" ? true : "" } : {};
     }, [state]) as { inert?: boolean };
 
     useEffect(() => {