@ndla/primitives 1.0.62-alpha.0 → 1.0.64-alpha.0

package/es/Button.js

@@ -11,7 +11,7 @@ import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { Spinner } from "./Spinner";
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 export const buttonBaseRecipe = cva({
   base: {
     display: "inline-flex",
@@ -260,15 +260,26 @@ export const BaseButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   const ariaDisabled = loading ? {
     "aria-disabled": true
   } : {};
-  const loadingContent = replaceContent ? loadingContentProp : /*#__PURE__*/_jsxs(_Fragment, {
-    children: [loadingContentProp, children]
-  });
-  return /*#__PURE__*/_jsx(StyledButton, {
+
+  // The conditions within this component are a bit complex, but unfortunately necessary.
+  // Google Translate and React do not play well together. If we use a fragment for the loading content, React will crash.
+  // This is supposed to be the inline equivalent of:
+  //
+  //  const loadingContent = replaceContent ? (
+  //   loadingContentProp
+  //  ) : (
+  //    <>
+  //      {loadingContentProp}
+  //      {children}
+  //    </>
+  //  );
+
+  return /*#__PURE__*/_jsxs(StyledButton, {
     onClick: loading ? undefined : onClick,
     ...ariaDisabled,
     ...props,
     ref: ref,
-    children: loading ? loadingContent : children
+    children: [!!loading && loadingContentProp, (!loading || !!loading && !replaceContent) && children]
   });
 });
 export const Button = /*#__PURE__*/forwardRef((_ref2, ref) => {

package/es/RadioGroup.js

@@ -10,7 +10,6 @@ import { forwardRef } from "react";
 import { RadioGroup, radioGroupAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
-import { Label } from "./Label";
 import { Text } from "./Text";
 import { jsx as _jsx } from "react/jsx-runtime";
 const radioGroupRecipe = sva({
@@ -131,15 +130,17 @@ export const InternalRadioGroupLabel = withContext(RadioGroup.Label, "label");
 export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     textStyle = "label.large",
+    fontWeight = "bold",
     children,
     ...props
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalRadioGroupLabel, {
-    ref: ref,
     ...props,
     asChild: true,
-    children: /*#__PURE__*/_jsx(Label, {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Text, {
       textStyle: textStyle,
+      fontWeight: fontWeight,
       children: children
     })
   });

package/es/Table.js

@@ -70,6 +70,11 @@ export const Table = styled(ark.table, {
       }
     }
   }
-}, {
-  baseComponent: true
+},
+// TODO: Chrome doesn't support automatically making overflowed elements tabbable yet. Revisit this in a year or two
+{
+  baseComponent: true,
+  defaultProps: {
+    tabIndex: 0
+  }
 });

package/lib/Button.js

@@ -266,15 +266,26 @@ const BaseButton = exports.BaseButton = /*#__PURE__*/(0, _react.forwardRef)((_re
   const ariaDisabled = loading ? {
     "aria-disabled": true
   } : {};
-  const loadingContent = replaceContent ? loadingContentProp : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [loadingContentProp, children]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
+
+  // The conditions within this component are a bit complex, but unfortunately necessary.
+  // Google Translate and React do not play well together. If we use a fragment for the loading content, React will crash.
+  // This is supposed to be the inline equivalent of:
+  //
+  //  const loadingContent = replaceContent ? (
+  //   loadingContentProp
+  //  ) : (
+  //    <>
+  //      {loadingContentProp}
+  //      {children}
+  //    </>
+  //  );
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
     onClick: loading ? undefined : onClick,
     ...ariaDisabled,
     ...props,
     ref: ref,
-    children: loading ? loadingContent : children
+    children: [!!loading && loadingContentProp, (!loading || !!loading && !replaceContent) && children]
   });
 });
 const Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {

package/lib/Layout/PageContent.d.ts

@@ -52,7 +52,5 @@ export declare const PageContent: import("react").ForwardRefExoticComponent<Omit
 } & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
-export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export {};

package/lib/RadioGroup.js

@@ -8,7 +8,6 @@ var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
-var _Label = require("./Label");
 var _Text = require("./Text");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -138,15 +137,17 @@ const InternalRadioGroupLabel = exports.InternalRadioGroupLabel = withContext(_r
 const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     textStyle = "label.large",
+    fontWeight = "bold",
     children,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupLabel, {
-    ref: ref,
     ...props,
     asChild: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       textStyle: textStyle,
+      fontWeight: fontWeight,
       children: children
     })
   });

package/lib/Skeleton.d.ts

@@ -7,8 +7,6 @@
  */
 import { type HTMLArkProps } from "@ark-ui/react";
 import type { JsxStyleProps } from "@ndla/styled-system/types";
-export declare const Skeleton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const Skeleton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export interface SkeletonProps extends HTMLArkProps<"div">, JsxStyleProps {
 }

package/lib/Table.d.ts

@@ -8,6 +8,4 @@
 import { type HTMLArkProps } from "@ark-ui/react";
 import type { JsxStyleProps } from "@ndla/styled-system/types";
 export type TableProps = HTMLArkProps<"table"> & JsxStyleProps;
-export declare const Table: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
-    ref?: ((instance: HTMLTableElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const Table: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLTableElement> & import("react").TableHTMLAttributes<HTMLTableElement> & import("@ark-ui/react").PolymorphicProps>, {}>;

package/lib/Table.js

@@ -76,6 +76,11 @@ const Table = exports.Table = (0, _jsx.styled)(_react.ark.table, {
       }
     }
   }
-}, {
-  baseComponent: true
+},
+// TODO: Chrome doesn't support automatically making overflowed elements tabbable yet. Revisit this in a year or two
+{
+  baseComponent: true,
+  defaultProps: {
+    tabIndex: 0
+  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.62-alpha.0",
+  "version": "1.0.64-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@ark-ui/react": "^4.1.2",
     "@ndla/styled-system": "^0.0.29",
-    "@ndla/util": "^5.0.3-alpha.0"
+    "@ndla/util": "^5.0.5-alpha.0"
   },
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.48",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fae121b0e1c9b7e12e46b4e9a90e2334389f30fa"
+  "gitHead": "a00bd799b55932a421bed0cf2ce8f364fbc7aefa"
 }