@ndla/ui 56.0.158-alpha.0 → 56.0.159-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -31,7 +31,10 @@ const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }) => {
31
31
  if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ jsx("span", { children });
32
32
  if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type: "gloss" });
33
33
  const { concept, visualElement } = embed.data;
34
- if (embed.data.concept.glossData) return /* @__PURE__ */ jsx(GlossEmbed, { embed });
34
+ if (embed.data.concept.glossData) return /* @__PURE__ */ jsx(GlossEmbed, {
35
+ embed,
36
+ children
37
+ });
35
38
  if (embed.embedData.type === "inline") return /* @__PURE__ */ jsx(InlineConcept, {
36
39
  previewAlt,
37
40
  linkContent: children,
@@ -1 +1 @@
1
- {"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed} />;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,SAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,oBAAC,yBAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,oBAAC,cAAkB,QAAS;AAGrC,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,oBAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,oBAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,KAAK;AAC/C,QACE,qBAAC;EAAY,sBAAsB,WAAW;aAE5C,oBAAC;GAAe;GAAa;GAAK,GAAI;aACpC,oBAAC,wCAA4B,cAAyC;IACvD,EACjB,oBAAC,oBACC,oBAAC;GAAqB,KAAK;aACzB,oBAAC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
1
+ {"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,SAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,oBAAC,yBAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,oBAAC;EAAkB;EAAQ;GAAsB;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,oBAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,oBAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,KAAK;AAC/C,QACE,qBAAC;EAAY,sBAAsB,WAAW;aAE5C,oBAAC;GAAe;GAAa;GAAK,GAAI;aACpC,oBAAC,wCAA4B,cAAyC;IACvD,EACjB,oBAAC,oBACC,oBAAC;GAAqB,KAAK;aACzB,oBAAC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
@@ -33,7 +33,10 @@ const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }) => {
33
33
  if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children });
34
34
  if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type: "gloss" });
35
35
  const { concept, visualElement } = embed.data;
36
- if (embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossEmbed.GlossEmbed, { embed });
36
+ if (embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossEmbed.GlossEmbed, {
37
+ embed,
38
+ children
39
+ });
37
40
  if (embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InlineConcept, {
38
41
  previewAlt,
39
42
  linkContent: children,
@@ -1 +1 @@
1
- {"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed} />;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,4DAA8BA,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,yCAA8B;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,wCAAa,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,uCACG,MAAM,WAAW,2CAAkB,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,2CAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,2CAACC,uDAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,2CAACC,iCAAkB,QAAS;AAGrC,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,2CAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,2CAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,uCACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,+BAAoC,KAAK;AAC/C,QACE,4CAACC;EAAY,sBAAsB,WAAW;aAE5C,2CAACC;GAAe;GAAa;GAAK,GAAI;aACpC,2CAACC,2EAA4B,cAAyC;IACvD,EACjB,2CAACC,mCACC,2CAAC;GAAqB,KAAK;aACzB,2CAACC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,sCAA2D,OAAO,QAC7E,2CAACA;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
1
+ {"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,4DAA8BA,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,yCAA8B;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,wCAAa,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,uCACG,MAAM,WAAW,2CAAkB,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,2CAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,2CAACC,uDAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,2CAACC;EAAkB;EAAQ;GAAsB;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,2CAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,2CAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,uCACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,+BAAoC,KAAK;AAC/C,QACE,4CAACC;EAAY,sBAAsB,WAAW;aAE5C,2CAACC;GAAe;GAAa;GAAK,GAAI;aACpC,2CAACC,2EAA4B,cAAyC;IACvD,EACjB,2CAACC,mCACC,2CAAC;GAAqB,KAAK;aACzB,2CAACC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,sCAA2D,OAAO,QAC7E,2CAACA;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
3
  "type": "module",
4
- "version": "56.0.158-alpha.0",
4
+ "version": "56.0.159-alpha.0",
5
5
  "description": "UI component library for NDLA",
6
6
  "license": "GPL-3.0",
7
7
  "exports": {
@@ -37,13 +37,13 @@
37
37
  ],
38
38
  "dependencies": {
39
39
  "@ark-ui/react": "^5.25.0",
40
- "@ndla/core": "^6.0.4-alpha.0",
41
- "@ndla/icons": "^8.0.71-alpha.0",
42
- "@ndla/licenses": "^10.0.4-alpha.0",
43
- "@ndla/primitives": "^1.0.110-alpha.0",
44
- "@ndla/safelink": "^7.0.113-alpha.0",
45
- "@ndla/styled-system": "^0.0.42",
46
- "@ndla/util": "^5.0.15-alpha.0",
40
+ "@ndla/core": "^6.0.5-alpha.0",
41
+ "@ndla/icons": "^8.0.72-alpha.0",
42
+ "@ndla/licenses": "^10.0.5-alpha.0",
43
+ "@ndla/primitives": "^1.0.111-alpha.0",
44
+ "@ndla/safelink": "^7.0.114-alpha.0",
45
+ "@ndla/styled-system": "^0.0.43",
46
+ "@ndla/util": "^5.0.16-alpha.0",
47
47
  "html-react-parser": "^5.2.8"
48
48
  },
49
49
  "peerDependencies": {
@@ -54,13 +54,13 @@
54
54
  "react-router": ">= 7.0.0"
55
55
  },
56
56
  "devDependencies": {
57
- "@ndla/preset-panda": "^0.0.64",
57
+ "@ndla/preset-panda": "^0.0.65",
58
58
  "@ndla/types-backend": "^1.0.82",
59
- "@ndla/types-embed": "^5.0.18-alpha.0",
59
+ "@ndla/types-embed": "^5.0.19-alpha.0",
60
60
  "@pandacss/dev": "^1.3.1"
61
61
  },
62
62
  "publishConfig": {
63
63
  "access": "public"
64
64
  },
65
- "gitHead": "5ac6237e9320b18682c6aa49f3d2f75c4d2164ca"
65
+ "gitHead": "62d7cf5983d3a65eb82e63e30ab03677c99b3dbd"
66
66
  }
@@ -60,7 +60,7 @@ export const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children
60
60
 
61
61
  // TODO: Consider whether we should do this in article-converter instead.
62
62
  if (embed.data.concept.glossData) {
63
- return <GlossEmbed embed={embed} />;
63
+ return <GlossEmbed embed={embed}>{children}</GlossEmbed>;
64
64
  }
65
65
 
66
66
  if (embed.embedData.type === "inline") {