@ndla/ui 56.0.45-alpha.0 → 56.0.46-alpha.0

package/dist/panda.buildinfo.json

@@ -18,7 +18,7 @@
       "overflowWrap]___[value:anywhere]___[cond:& h1",
       "gap]___[value:medium",
       "paddingBlockStart]___[value:xxlarge",
-      "hyphens]___[value:auto",
+      "overflowWrap]___[value:anywhere",
       "gap]___[value:xxlarge",
       "paddingBlockEnd]___[value:5xlarge]___[cond:& > :is(:last-child)",
       "minHeight]___[value:xxlarge",
@@ -64,6 +64,9 @@
       "paddingInline]___[value:medium]___[cond:tablet",
       "maxWidth]___[value:surface.xlarge",
       "whiteSpace]___[value:pre-wrap]___[cond:& span > *",
+      "marginBlock]___[value:small]___[cond:& p:not(:first-child):not(:last-child)",
+      "textAlign]___[value:center]___[cond:& p[data-align=\"center\"]",
+      "direction]___[value:rtl]___[cond:& p:has(span[dir=\"rtl\"])",
       "alignSelf]___[value:flex-start",
       "marginInlineStart]___[value:3xsmall",
       "borderBottomRadius]___[value:xsmall",
@@ -250,7 +253,6 @@
       "borderStyle]___[value:dashed",
       "borderColor]___[value:stroke.hover",
       "paddingBlockStart]___[value:5xsmall",
-      "paddingInline]___[value:4xsmall",
       "borderColor]___[value:text.link]___[cond:_hover",
       "background]___[value:surface.actionSubtle.hover]___[cond:_hover",
       "borderColor]___[value:text.link]___[cond:_active",

package/dist/styles.css

@@ -148,9 +148,8 @@
     padding-block-start: var(--spacing-xxlarge);
 }
 
-  .hy_auto {
-    hyphens: auto;
-    -webkit-hyphens: auto;
+  .ov-wrap_anywhere {
+    overflow-wrap: anywhere;
 }
 
   .gap_xxlarge {
@@ -526,10 +525,6 @@
     padding-block-start: var(--spacing-5xsmall);
 }
 
-  .px_4xsmall {
-    padding-inline: var(--spacing-4xsmall);
-}
-
   .ps_4xsmall {
     padding-inline-start: var(--spacing-4xsmall);
 }
@@ -915,6 +910,18 @@
     white-space: pre-wrap;
 }
 
+  .\[\&_p\:not\(\:first-child\)\:not\(\:last-child\)\]\:my_small p:not(:first-child):not(:last-child) {
+    margin-block: var(--spacing-small);
+}
+
+  .\[\&_p\[data-align\=\"center\"\]\]\:ta_center p[data-align="center"] {
+    text-align: center;
+}
+
+  .\[\&_p\:has\(span\[dir\=\"rtl\"\]\)\]\:direction_rtl p:has(span[dir="rtl"]) {
+    direction: rtl;
+}
+
   .\[\&_span\]\:flex_1 span {
     flex: 1 1 0%;
 }

package/es/Article/Article.js

@@ -76,8 +76,7 @@ export const ArticleHeader = styled(ark.header, {
     alignItems: "flex-start",
     width: "100%",
     paddingBlockStart: "xxlarge",
-    overflowWrap: "break-word",
-    hyphens: "auto"
+    overflowWrap: "anywhere"
   }
 }, {
   baseComponent: true

package/es/AudioPlayer/AudioPlayer.js

@@ -106,6 +106,15 @@ const TextVersionText = styled("div", {
     maxWidth: "surface.xlarge",
     "& span > *": {
       whiteSpace: "pre-wrap"
+    },
+    "& p:not(:first-child):not(:last-child)": {
+      marginBlock: "small"
+    },
+    '& p[data-align="center"]': {
+      textAlign: "center"
+    },
+    '& p:has(span[dir="rtl"])': {
+      direction: "rtl"
     }
   }
 });

package/es/Embed/InlineTriggerButton.js

@@ -18,7 +18,6 @@ const StyledSpan = styled("span", {
     borderStyle: "dashed",
     borderColor: "stroke.hover",
     paddingBlockStart: "5xsmall",
-    paddingInline: "4xsmall",
     width: "fit-content",
     cursor: "pointer",
     _hover: {

package/es/TagSelector/TagSelector.js

@@ -7,7 +7,7 @@
  */
 
 import { forwardRef, useEffect, useId, useRef } from "react";
-import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
+import { useTagsInputContext, useComboboxContext } from "@ark-ui/react";
 import { CloseLine } from "@ndla/icons/action";
 import { ComboboxClearTrigger, ComboboxControl, ComboboxInput, ComboboxLabel, ComboboxRoot, ComboboxTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemPreview, TagsInputItemText, TagsInputRoot, TagsInputItemInput } from "@ndla/primitives";
 import { contains } from "@ndla/util";
@@ -51,20 +51,25 @@ export const TagSelectorRoot = _ref => {
     },
     value: value,
     ...rest,
-    children: /*#__PURE__*/_jsx(ComboboxContext, {
-      children: api => /*#__PURE__*/_jsx(TagsInputRoot, {
-        ids: ids,
-        value: value,
-        onInputValueChange: details => api.setInputValue(details.inputValue),
-        editable: editable,
-        onValueChange: onValueChange,
-        addOnPaste: addOnPaste,
-        translations: translations,
-        children: children
-      })
+    children: /*#__PURE__*/_jsx(TagSelectorTagsInputRoot, {
+      ids: ids,
+      value: value,
+      editable: editable,
+      onValueChange: onValueChange,
+      addOnPaste: addOnPaste,
+      translations: translations,
+      children: children
     })
   });
 };
+const TagSelectorTagsInputRoot = /*#__PURE__*/forwardRef((props, ref) => {
+  const comboboxApi = useComboboxContext();
+  return /*#__PURE__*/_jsx(TagsInputRoot, {
+    ref: ref,
+    onInputValueChange: details => comboboxApi.setInputValue(details.inputValue),
+    ...props
+  });
+});
 export const TagSelectorLabel = ComboboxLabel;
 export const TagSelectorItemInput = TagsInputItemInput;
 export const TagSelectorTrigger = ComboboxTrigger;
@@ -94,12 +99,12 @@ export const TagSelectorInputBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ref: ref,
     asChild: true,
     children: /*#__PURE__*/_jsx(TagsInputInput, {
-      ...props,
       onKeyDown: event => {
         if (event.key === "Enter") {
           tagsApi.addValue(tagsApi.inputValue);
         }
       },
+      ...props,
       children: children
     })
   });
@@ -125,12 +130,12 @@ export const TagSelectorInput = /*#__PURE__*/forwardRef((_ref4, ref) => {
       ref: ref,
       asChild: true,
       children: /*#__PURE__*/_jsx(TagsInputInput, {
-        ...props,
         onKeyDown: event => {
           if (event.key === "Enter") {
             tagsApi.addValue(tagsApi.inputValue);
           }
         },
+        ...props,
         children: children
       })
     })]

package/lib/Article/Article.js

@@ -82,8 +82,7 @@ const ArticleHeader = exports.ArticleHeader = (0, _jsx2.styled)(_react2.ark.head
     alignItems: "flex-start",
     width: "100%",
     paddingBlockStart: "xxlarge",
-    overflowWrap: "break-word",
-    hyphens: "auto"
+    overflowWrap: "anywhere"
   }
 }, {
   baseComponent: true

package/lib/AudioPlayer/AudioPlayer.js

@@ -112,6 +112,15 @@ const TextVersionText = (0, _jsx2.styled)("div", {
     maxWidth: "surface.xlarge",
     "& span > *": {
       whiteSpace: "pre-wrap"
+    },
+    "& p:not(:first-child):not(:last-child)": {
+      marginBlock: "small"
+    },
+    '& p[data-align="center"]': {
+      textAlign: "center"
+    },
+    '& p:has(span[dir="rtl"])': {
+      direction: "rtl"
     }
   }
 });

package/lib/Embed/InlineTriggerButton.js

@@ -24,7 +24,6 @@ const StyledSpan = (0, _jsx2.styled)("span", {
     borderStyle: "dashed",
     borderColor: "stroke.hover",
     paddingBlockStart: "5xsmall",
-    paddingInline: "4xsmall",
     width: "fit-content",
     cursor: "pointer",
     _hover: {

package/lib/TagSelector/TagSelector.js

@@ -57,21 +57,26 @@ const TagSelectorRoot = _ref => {
     },
     value: value,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.ComboboxContext, {
-      children: api => /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputRoot, {
-        ids: ids,
-        value: value,
-        onInputValueChange: details => api.setInputValue(details.inputValue),
-        editable: editable,
-        onValueChange: onValueChange,
-        addOnPaste: addOnPaste,
-        translations: translations,
-        children: children
-      })
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TagSelectorTagsInputRoot, {
+      ids: ids,
+      value: value,
+      editable: editable,
+      onValueChange: onValueChange,
+      addOnPaste: addOnPaste,
+      translations: translations,
+      children: children
     })
   });
 };
 exports.TagSelectorRoot = TagSelectorRoot;
+const TagSelectorTagsInputRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const comboboxApi = (0, _react2.useComboboxContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputRoot, {
+    ref: ref,
+    onInputValueChange: details => comboboxApi.setInputValue(details.inputValue),
+    ...props
+  });
+});
 const TagSelectorLabel = exports.TagSelectorLabel = _primitives.ComboboxLabel;
 const TagSelectorItemInput = exports.TagSelectorItemInput = _primitives.TagsInputItemInput;
 const TagSelectorTrigger = exports.TagSelectorTrigger = _primitives.ComboboxTrigger;
@@ -101,12 +106,12 @@ const TagSelectorInputBase = exports.TagSelectorInputBase = /*#__PURE__*/(0, _re
     ref: ref,
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
-      ...props,
       onKeyDown: event => {
         if (event.key === "Enter") {
           tagsApi.addValue(tagsApi.inputValue);
         }
       },
+      ...props,
       children: children
     })
   });
@@ -132,12 +137,12 @@ const TagSelectorInput = exports.TagSelectorInput = /*#__PURE__*/(0, _react.forw
       ref: ref,
       asChild: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
-        ...props,
         onKeyDown: event => {
           if (event.key === "Enter") {
             tagsApi.addValue(tagsApi.inputValue);
           }
         },
+        ...props,
         children: children
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.45-alpha.0",
+  "version": "56.0.46-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,10 +33,10 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.28-alpha.0",
+    "@ndla/icons": "^8.0.29-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.40-alpha.0",
-    "@ndla/safelink": "^7.0.40-alpha.0",
+    "@ndla/primitives": "^1.0.41-alpha.0",
+    "@ndla/safelink": "^7.0.41-alpha.0",
     "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -50,7 +50,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.37",
+    "@ndla/preset-panda": "^0.0.38",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.3-alpha.0",
     "@pandacss/dev": "^0.46.0"
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e79c68709bfa94d73a608d460f271f41f9f04e09"
+  "gitHead": "e29f1689ea7268f8a1eed1c99f179a3524c70758"
 }

package/src/Article/Article.tsx

@@ -80,8 +80,7 @@ export const ArticleHeader = styled(
       alignItems: "flex-start",
       width: "100%",
       paddingBlockStart: "xxlarge",
-      overflowWrap: "break-word",
-      hyphens: "auto",
+      overflowWrap: "anywhere",
     },
   },
   { baseComponent: true },

package/src/AudioPlayer/AudioPlayer.tsx

@@ -113,6 +113,15 @@ const TextVersionText = styled("div", {
     "& span > *": {
       whiteSpace: "pre-wrap",
     },
+    "& p:not(:first-child):not(:last-child)": {
+      marginBlock: "small",
+    },
+    '& p[data-align="center"]': {
+      textAlign: "center",
+    },
+    '& p:has(span[dir="rtl"])': {
+      direction: "rtl",
+    },
   },
 });
 

package/src/Embed/InlineTriggerButton.tsx

@@ -18,7 +18,6 @@ const StyledSpan = styled("span", {
     borderStyle: "dashed",
     borderColor: "stroke.hover",
     paddingBlockStart: "5xsmall",
-    paddingInline: "4xsmall",
     width: "fit-content",
     cursor: "pointer",
     _hover: {

package/src/TagSelector/TagSelector.tsx

@@ -8,7 +8,7 @@
 
 import { forwardRef, useEffect, useId, useRef } from "react";
 import type { CollectionItem } from "@ark-ui/react";
-import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
+import { useTagsInputContext, useComboboxContext } from "@ark-ui/react";
 import { CloseLine } from "@ndla/icons/action";
 import {
   ComboboxClearTrigger,
@@ -79,25 +79,31 @@ export const TagSelectorRoot = <T extends CollectionItem>({
       value={value}
       {...rest}
     >
-      <ComboboxContext>
-        {(api) => (
-          <TagsInputRoot
-            ids={ids}
-            value={value}
-            onInputValueChange={(details) => api.setInputValue(details.inputValue)}
-            editable={editable}
-            onValueChange={onValueChange}
-            addOnPaste={addOnPaste}
-            translations={translations}
-          >
-            {children}
-          </TagsInputRoot>
-        )}
-      </ComboboxContext>
+      <TagSelectorTagsInputRoot
+        ids={ids}
+        value={value}
+        editable={editable}
+        onValueChange={onValueChange}
+        addOnPaste={addOnPaste}
+        translations={translations}
+      >
+        {children}
+      </TagSelectorTagsInputRoot>
     </ComboboxRoot>
   );
 };
 
+const TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {
+  const comboboxApi = useComboboxContext();
+  return (
+    <TagsInputRoot
+      ref={ref}
+      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}
+      {...props}
+    />
+  );
+});
+
 export type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;
 
 export const TagSelectorLabel = ComboboxLabel;
@@ -126,12 +132,12 @@ export const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInpu
     return (
       <ComboboxInput ref={ref} asChild>
         <TagsInputInput
-          {...props}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
               tagsApi.addValue(tagsApi.inputValue);
             }
           }}
+          {...props}
         >
           {children}
         </TagsInputInput>
@@ -158,12 +164,12 @@ export const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputPro
       ))}
       <ComboboxInput ref={ref} asChild>
         <TagsInputInput
-          {...props}
           onKeyDown={(event) => {
             if (event.key === "Enter") {
               tagsApi.addValue(tagsApi.inputValue);
             }
           }}
+          {...props}
         >
           {children}
         </TagsInputInput>