@ndla/primitives 1.0.117-alpha.0 → 1.0.119-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.
Files changed (10) hide show
  1. package/es/Image.mjs +20 -2
  2. package/es/Image.mjs.map +1 -1
  3. package/lib/Combobox.d.ts +1 -1
  4. package/lib/DatePicker.d.ts +1 -1
  5. package/lib/FileUpload.d.ts +2 -2
  6. package/lib/Image.js +19 -1
  7. package/lib/Image.js.map +1 -1
  8. package/lib/Pagination.d.ts +1 -1
  9. package/lib/index.d.ts +1 -1
  10. package/package.json +3 -3
package/es/Image.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ark } from "@ark-ui/react";
2
2
  import { styled } from "@ndla/styled-system/jsx";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
- import { forwardRef } from "react";
4
+ import { forwardRef, useEffect, useState } from "react";
5
5
 
6
6
  //#region src/Image.tsx
7
7
  /**
@@ -113,6 +113,15 @@ const Img = forwardRef(({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imag
113
113
  });
114
114
  });
115
115
  const Image = forwardRef(({ srcSet: srcSetProp, crop, focalPoint, src, contentType, imageLanguage, fallbackWidth = FALLBACK_WIDTH, sizes: sizesProp, alt, fallbackElement, variants, ...props }, ref) => {
116
+ const [hasError, setHasError] = useState(false);
117
+ useEffect(() => {
118
+ setHasError(false);
119
+ }, [
120
+ src,
121
+ srcSetProp,
122
+ sizesProp,
123
+ variants
124
+ ]);
116
125
  if (!src?.length && !variants?.length && fallbackElement) return /* @__PURE__ */ jsx(StyledFallbackElement, {
117
126
  ...props,
118
127
  ref,
@@ -145,7 +154,16 @@ const Image = forwardRef(({ srcSet: srcSetProp, crop, focalPoint, src, contentTy
145
154
  alt,
146
155
  src: contentType === "image/gif" ? src : fallbackSrc,
147
156
  ...props,
148
- ref
157
+ ref,
158
+ "data-error": hasError ? "" : void 0,
159
+ onError: (e) => {
160
+ setHasError(true);
161
+ props.onError?.(e);
162
+ },
163
+ onLoad: (e) => {
164
+ setHasError(false);
165
+ props.onLoad?.(e);
166
+ }
149
167
  })
150
168
  ] });
151
169
  });
package/es/Image.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.mjs","names":[],"sources":["../src/Image.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 { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : fallbackSrc} {...props} ref={ref} />\n </picture>\n );\n },\n);\n"],"mappings":"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"}
1
+ {"version":3,"file":"Image.mjs","names":[],"sources":["../src/Image.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 { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setHasError(false);\n }, [src, srcSetProp, sizesProp, variants]);\n\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage\n alt={alt}\n src={contentType === \"image/gif\" ? src : fallbackSrc}\n {...props}\n ref={ref}\n data-error={hasError ? \"\" : undefined}\n onError={(e) => {\n setHasError(true);\n props.onError?.(e);\n }}\n onLoad={(e) => {\n setHasError(false);\n props.onLoad?.(e);\n }}\n />\n </picture>\n );\n },\n);\n"],"mappings":"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"}
package/lib/Combobox.d.ts CHANGED
@@ -9,7 +9,7 @@ import { type RefAttributes } from "react";
9
9
  import { Combobox } from "@ark-ui/react";
10
10
  import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
11
11
  import { type TextProps } from "./Text";
12
- declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemIndicator" | "content" | "input" | "label" | "list" | "control" | "trigger" | "positioner" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "empty", {
12
+ declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "itemIndicator" | "content" | "input" | "label" | "list" | "control" | "itemGroup" | "trigger" | "positioner" | "clearTrigger" | "itemGroupLabel" | "itemText" | "empty", {
13
13
  context: {
14
14
  standalone: {
15
15
  content: {
package/lib/DatePicker.d.ts CHANGED
@@ -13,7 +13,7 @@ export interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {
13
13
  translations: DatePicker.RootProps["translations"];
14
14
  locale: DatePicker.RootProps["locale"];
15
15
  }
16
- export declare const DatePickerRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<DatePicker.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "presetTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">>>;
16
+ export declare const DatePickerRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<DatePicker.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "nextTrigger" | "prevTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "content" | "table" | "input" | "label" | "view" | "control" | "trigger" | "positioner" | "clearTrigger" | "nextTrigger" | "prevTrigger" | "monthSelect" | "presetTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewControl" | "viewTrigger" | "yearSelect">>>;
17
17
  export declare const DatePickerClearTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ClearTriggerProps & RefAttributes<HTMLButtonElement>>>;
18
18
  interface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {
19
19
  }
package/lib/FileUpload.d.ts CHANGED
@@ -10,13 +10,13 @@ import { FileUpload } from "@ark-ui/react";
10
10
  import { type RecipeVariantProps } from "@ndla/styled-system/css";
11
11
  import type { StyledProps } from "@ndla/styled-system/types";
12
12
  import { type TextProps } from "./Text";
13
- declare const fileUploadRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>;
13
+ declare const fileUploadRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>;
14
14
  export type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;
15
15
  export interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {
16
16
  }
17
17
  export declare const FileUploadHiddenInput: import("react").ForwardRefExoticComponent<FileUpload.HiddenInputProps & RefAttributes<HTMLInputElement>>;
18
18
  export declare const FileUploadContext: (props: FileUpload.ContextProps) => import("react").ReactNode;
19
- export declare const FileUploadRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<FileUpload.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>>;
19
+ export declare const FileUploadRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<FileUpload.RootProps & RefAttributes<HTMLDivElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "label" | "itemGroup" | "trigger" | "clearTrigger" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">>>;
20
20
  export declare const FileUploadDropzone: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<FileUpload.DropzoneProps & RefAttributes<HTMLDivElement>>>;
21
21
  export declare const FileUploadTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<FileUpload.TriggerProps & RefAttributes<HTMLButtonElement>>>;
22
22
  export declare const FileUploadItemGroup: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<FileUpload.ItemGroupProps & RefAttributes<HTMLUListElement>>>;
package/lib/Image.js CHANGED
@@ -113,6 +113,15 @@ const Img = (0, react.forwardRef)(({ fallbackWidth = FALLBACK_WIDTH, crop, focal
113
113
  });
114
114
  });
115
115
  const Image = (0, react.forwardRef)(({ srcSet: srcSetProp, crop, focalPoint, src, contentType, imageLanguage, fallbackWidth = FALLBACK_WIDTH, sizes: sizesProp, alt, fallbackElement, variants, ...props }, ref) => {
116
+ const [hasError, setHasError] = (0, react.useState)(false);
117
+ (0, react.useEffect)(() => {
118
+ setHasError(false);
119
+ }, [
120
+ src,
121
+ srcSetProp,
122
+ sizesProp,
123
+ variants
124
+ ]);
116
125
  if (!src?.length && !variants?.length && fallbackElement) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFallbackElement, {
117
126
  ...props,
118
127
  ref,
@@ -145,7 +154,16 @@ const Image = (0, react.forwardRef)(({ srcSet: srcSetProp, crop, focalPoint, src
145
154
  alt,
146
155
  src: contentType === "image/gif" ? src : fallbackSrc,
147
156
  ...props,
148
- ref
157
+ ref,
158
+ "data-error": hasError ? "" : void 0,
159
+ onError: (e) => {
160
+ setHasError(true);
161
+ props.onError?.(e);
162
+ },
163
+ onLoad: (e) => {
164
+ setHasError(false);
165
+ props.onLoad?.(e);
166
+ }
149
167
  })
150
168
  ] });
151
169
  });
package/lib/Image.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.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 { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : fallbackSrc} {...props} ref={ref} />\n </picture>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAa,sBAAsB,EAAE,OAAO,MAAM,YAAY,oBAA2C;CACvG,MAAM,SAAS,EAAE;AACjB,KAAI,MACF,QAAO,KAAK,SAAS,QAAQ;AAE/B,KAAI,KACF,QAAO,KAAK,cAAc,KAAK,OAAO,YAAY,KAAK,KAAK,cAAc,KAAK,OAAO,YAAY,KAAK,OAAO;AAEhH,KAAI,WACF,QAAO,KAAK,UAAU,WAAW,EAAE,UAAU,WAAW,IAAI;AAE9D,KAAI,cACF,QAAO,KAAK,YAAY,gBAAgB;AAE1C,QAAO,OAAO,KAAK,IAAI;;AAUzB,MAAa,aAA+C;CAC1D,MAAM;CACN,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACV;AAED,MAAM,eAAe;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAI;AAE5F,MAAa,oBAAoB,aAAgC;AAC/D,QAAO,SACJ,KAAK,YAAY;AAChB,SAAO,GAAG,QAAQ,WAAW,GAAG,WAAW,QAAQ,MAAM;GACzD,CACD,KAAK,KAAK;;AAGf,MAAa,mBAAmB,aAAgC;AAC9D,QAAO,SACJ,KAAK,SAAS,MAAM;AACnB,MAAI,MAAM,SAAS,SAAS,EAC1B,QAAO,GAAG,WAAW,QAAQ,MAAM;AAErC,SAAO,eAAe,WAAW,QAAQ,MAAM,MAAM,WAAW,QAAQ,MAAM;GAC9E,CACD,KAAK,KAAK;;AAGf,MAAa,aAAa,EAAE,KAAK,MAAM,YAAY,oBAAmC;AACpF,KAAI,CAAC,IAAK,QAAO;AACjB,QAAO,aAAa,KAAK,UAAU;EACjC,MAAM,cAAc,mBAAmB;GAAE;GAAO;GAAM;GAAY;GAAe,CAAC;AAElF,SAAO,GAAG,MADI,YAAY,SAAS,IAAI,gBAAgB,GACjC,GAAG,MAAM;GAC/B,CAAC,KAAK,KAAK;;AAGf,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAYvB,MAAa,iCAET,EACE,UACA,QAAQ,YACR,MACA,YACA,KACA,eACA,aACA,QAAQ,gBACR,GAAG,SAEL,QACG;CACH,MAAM,SAAS,cAAc,UAAU;EAAE;EAAK;EAAM;EAAY;EAAe,CAAC;AAEhF,QACE,4CAACA,+BAAO;EAAQ,GAAI;EAAY;aAC7B,gBAAgB,eAAe,2CAAC;GAAO,MAAM;GAAqB;GAAe;IAAS,EAC1F;GACc;EAGtB;AAED,MAAM,kDAAqB,OAAO;CAChC,iBAAiB,EAAE,SAAS,WAAW;CACvC,UAAU,EACR,SAAS;EACP,SAAS,EAAE;EACX,SAAS,EACP,cAAc,UACf;EACF,EACF;CACF,CAAC;AAEF,MAAM,4DACJC,kBAAI,KACJ,EACE,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAcD,MAAa,6BACV,EAAE,gBAAgB,gBAAgB,MAAM,YAAY,eAAe,aAAa,KAAK,KAAK,GAAG,SAAS,QAAQ;CAC7G,MAAM,cAAc,mBAAmB;EAAE,OAAO;EAAe;EAAM;EAAY;EAAe,CAAC;CACjG,MAAM,eAAe,cAAc,GAAG,IAAI,GAAG,gBAAgB;AAC7D,QAAO,2CAAC;EAAiB;EAAK,KAAK,gBAAgB,cAAc,MAAM;EAAc,GAAI;EAAY;GAAO;EAE/G;AAeD,MAAa,+BAET,EACE,QAAQ,YACR,MACA,YACA,KACA,aACA,eACA,gBAAgB,gBAChB,OAAO,WACP,KACA,iBACA,UACA,GAAG,SAEL,QACG;AACH,KAAI,CAAC,KAAK,UAAU,CAAC,UAAU,UAAU,gBACvC,QACE,2CAAC;EAAsB,GAAI;EAAY;YACpC;GACqB;CAI5B,MAAM,cAAc,mBAAmB;EAAE,OAAO;EAAe;EAAM;EAAY;EAAe,CAAC;CACjG,MAAM,cAAc,OAAO,cAAc,GAAG,IAAI,GAAG,gBAAgB;AAEnE,QACE,4CAAC;EACE,CAAC,CAAC,UAAU,UAAU,CAAC,QAAQ,CAAC,cAAc,gBAAgB,eAC7D,2CAAC;GACC,MAAM;GACN,QAAQ,iBAAiB,SAAS;GAClC,OAAO,aAAa,gBAAgB,SAAS;IAC7C;EAEH,gBAAgB,eACf,2CAAC;GACC,MAAM;GACN,QAAQ,UAAU;IAAE;IAAK;IAAM;IAAY;IAAe,CAAC;GAC3D,OAAO,aAAa;IACpB;EAEJ,2CAAC;GAAiB;GAAK,KAAK,gBAAgB,cAAc,MAAM;GAAa,GAAI;GAAY;IAAO;KAC5F;EAGf"}
1
+ {"version":3,"file":"Image.js","names":["styled","ark"],"sources":["../src/Image.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 { type ComponentPropsWithRef, type ReactNode, forwardRef, useEffect, useState } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ImageVariantDTO, ImageVariantSize } from \"@ndla/types-backend/image-api\";\n\nexport interface ImageCrop {\n startX: number;\n startY: number;\n endX: number;\n endY: number;\n}\n\nexport interface ImageFocalPoint {\n x: number;\n y: number;\n}\n\ninterface SrcQueryStringOptions {\n width?: number;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const makeSrcQueryString = ({ width, crop, focalPoint, imageLanguage }: SrcQueryStringOptions) => {\n const params = [];\n if (width) {\n params.push(`width=${width}`);\n }\n if (crop) {\n params.push(`cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`);\n }\n if (focalPoint) {\n params.push(`focalX=${focalPoint.x}&focalY=${focalPoint.y}`);\n }\n if (imageLanguage) {\n params.push(`language=${imageLanguage}`);\n }\n return params.join(\"&\");\n};\n\ninterface SrcSetOptions {\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n src?: string;\n}\n\nexport const VAR_WIDTHS: Record<ImageVariantSize, number> = {\n icon: 240,\n xsmall: 480,\n small: 800,\n medium: 1080,\n large: 1440,\n xlarge: 1920,\n xxlarge: 2560,\n};\n\nconst IMAGE_WIDTHS = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];\n\nexport const getVariantSrcSet = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant) => {\n return `${variant.variantUrl} ${VAR_WIDTHS[variant.size]}w`;\n })\n .join(\", \");\n};\n\nexport const getVariantSizes = (variants: ImageVariantDTO[]) => {\n return variants\n .map((variant, i) => {\n if (i === variants.length - 1) {\n return `${VAR_WIDTHS[variant.size]}px`;\n }\n return `(max-width: ${VAR_WIDTHS[variant.size]}px) ${VAR_WIDTHS[variant.size]}px`;\n })\n .join(\", \");\n};\n\nexport const getSrcSet = ({ src, crop, focalPoint, imageLanguage }: SrcSetOptions) => {\n if (!src) return undefined;\n return IMAGE_WIDTHS.map((width) => {\n const queryString = makeSrcQueryString({ width, crop, focalPoint, imageLanguage });\n const query = queryString.length ? `?${queryString}` : \"\";\n return `${src}${query} ${width}w`;\n }).join(\", \");\n};\n\nconst FALLBACK_WIDTH = 1024;\n\nconst FALLBACK_SIZES = \"(min-width: 1024px) 1024px, 100vw\";\n\nexport interface PictureProps extends StyledProps, ComponentPropsWithRef<\"picture\"> {\n src: string;\n sizes?: string;\n contentType?: string;\n srcSet?: string;\n crop?: ImageCrop;\n focalPoint?: ImageFocalPoint;\n imageLanguage?: string;\n}\n\nexport const Picture = forwardRef<HTMLPictureElement, PictureProps>(\n (\n {\n children,\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n imageLanguage,\n contentType,\n sizes = FALLBACK_SIZES,\n ...props\n },\n ref,\n ) => {\n const srcSet = srcSetProp ?? getSrcSet({ src, crop, focalPoint, imageLanguage });\n\n return (\n <styled.picture {...props} ref={ref}>\n {contentType !== \"image/gif\" && <source type={contentType} srcSet={srcSet} sizes={sizes} />}\n {children}\n </styled.picture>\n );\n },\n);\n\nconst StyledImage = styled(\"img\", {\n defaultVariants: { variant: \"regular\" },\n variants: {\n variant: {\n regular: {},\n rounded: {\n borderRadius: \"xsmall\",\n },\n },\n },\n});\n\nconst StyledFallbackElement = styled(\n ark.div,\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n },\n { baseComponent: true },\n);\n\ntype ImageVariantProps = StyledVariantProps<typeof StyledImage>;\n\nexport interface ImgProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src: string;\n fallbackWidth?: number;\n contentType?: string;\n crop?: ImageCrop;\n imageLanguage?: string;\n focalPoint?: ImageFocalPoint;\n}\n\nexport const Img = forwardRef<HTMLImageElement, ImgProps>(\n ({ fallbackWidth = FALLBACK_WIDTH, crop, focalPoint, imageLanguage, contentType, src, alt, ...props }, ref) => {\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const srcWithParms = queryString ? `${src}?${queryString}` : src;\n return <StyledImage alt={alt} src={contentType === \"image/gif\" ? src : srcWithParms} {...props} ref={ref} />;\n },\n);\n\nexport interface ImageProps extends StyledProps, ComponentPropsWithRef<\"img\">, ImageVariantProps {\n alt: string;\n src?: string;\n sizes?: string;\n fallbackWidth?: number;\n contentType?: string;\n imageLanguage?: string;\n crop?: ImageCrop;\n fallbackElement?: ReactNode;\n focalPoint?: ImageFocalPoint;\n variants?: ImageVariantDTO[];\n}\n\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(\n (\n {\n srcSet: srcSetProp,\n crop,\n focalPoint,\n src,\n contentType,\n imageLanguage,\n fallbackWidth = FALLBACK_WIDTH,\n sizes: sizesProp,\n alt,\n fallbackElement,\n variants,\n ...props\n },\n ref,\n ) => {\n const [hasError, setHasError] = useState(false);\n\n useEffect(() => {\n setHasError(false);\n }, [src, srcSetProp, sizesProp, variants]);\n\n if (!src?.length && !variants?.length && fallbackElement) {\n return (\n <StyledFallbackElement {...props} ref={ref}>\n {fallbackElement}\n </StyledFallbackElement>\n );\n }\n\n const queryString = makeSrcQueryString({ width: fallbackWidth, crop, focalPoint, imageLanguage });\n const fallbackSrc = src && queryString ? `${src}?${queryString}` : src;\n\n return (\n <picture>\n {!!variants?.length && !crop && !focalPoint && contentType !== \"image/gif\" && (\n <source\n type={\"image/webp\"}\n srcSet={getVariantSrcSet(variants)}\n sizes={sizesProp ?? getVariantSizes(variants)}\n />\n )}\n {contentType !== \"image/gif\" && (\n <source\n type={contentType}\n srcSet={getSrcSet({ src, crop, focalPoint, imageLanguage })}\n sizes={sizesProp ?? FALLBACK_SIZES}\n />\n )}\n <StyledImage\n alt={alt}\n src={contentType === \"image/gif\" ? src : fallbackSrc}\n {...props}\n ref={ref}\n data-error={hasError ? \"\" : undefined}\n onError={(e) => {\n setHasError(true);\n props.onError?.(e);\n }}\n onLoad={(e) => {\n setHasError(false);\n props.onLoad?.(e);\n }}\n />\n </picture>\n );\n },\n);\n"],"mappings":"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"}
package/lib/Pagination.d.ts CHANGED
@@ -10,7 +10,7 @@ import type { StyledProps } from "@ndla/styled-system/types";
10
10
  export interface PaginationRootProps extends Pagination.RootProps, StyledProps {
11
11
  translations: Pagination.RootProps["translations"];
12
12
  }
13
- export declare const PaginationRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<Pagination.RootProps & import("react").RefAttributes<HTMLElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger">>>;
13
+ export declare const PaginationRoot: import("@ndla/styled-system/jsx").StyleContextProvider<import("react").ForwardRefExoticComponent<Pagination.RootProps & import("react").RefAttributes<HTMLElement>>, import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger" | "firstTrigger" | "lastTrigger", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"root" | "item" | "ellipsis" | "nextTrigger" | "prevTrigger" | "firstTrigger" | "lastTrigger">>>;
14
14
  export declare const PaginationItem: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<Pagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>>>;
15
15
  export declare const PaginationEllipsis: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<Pagination.EllipsisProps & import("react").RefAttributes<HTMLDivElement>>>;
16
16
  export declare const PaginationContext: (props: Pagination.ContextProps) => import("react").ReactNode;
package/lib/index.d.ts CHANGED
@@ -54,7 +54,7 @@ export type { ListItemVariantProps, ListItemProps } from "./ListItem/ListItem";
54
54
  export { ListItemRoot, ListItemHeading, ListItemContent, ListItemImage } from "./ListItem/ListItem";
55
55
  export type { PageContainerVariantProps, PageContainerProps } from "./Layout/PageContainer";
56
56
  export { PageContainer } from "./Layout/PageContainer";
57
- export type { PageContentVariantProps } from "./Layout/PageContent";
57
+ export type { PageContentVariantProps, PageContentProps } from "./Layout/PageContent";
58
58
  export { PageContent, BleedPageContent } from "./Layout/PageContent";
59
59
  export type { MenuRootProps, MenuItemVariantProps, MenuItemProps } from "./Menu";
60
60
  export { MenuRoot, MenuContent, MenuItemGroupLabel, MenuItemGroup, MenuItem, MenuPositioner, MenuTriggerItem, MenuTrigger, MenuSeparator, MenuItemText, MenuContentStandalone, } from "./Menu";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ndla/primitives",
3
3
  "type": "module",
4
- "version": "1.0.117-alpha.0",
4
+ "version": "1.0.119-alpha.0",
5
5
  "description": "Primitive components for NDLA.",
6
6
  "license": "GPL-3.0",
7
7
  "exports": {
@@ -32,7 +32,7 @@
32
32
  "lib"
33
33
  ],
34
34
  "dependencies": {
35
- "@ark-ui/react": "^5.25.0",
35
+ "@ark-ui/react": "^5.30.0",
36
36
  "@ndla/styled-system": "^0.0.46",
37
37
  "@ndla/util": "^5.0.18-alpha.0"
38
38
  },
@@ -47,5 +47,5 @@
47
47
  "publishConfig": {
48
48
  "access": "public"
49
49
  },
50
- "gitHead": "176b61e29793f21b58a53fd9f72e3b4b88d6843e"
50
+ "gitHead": "36c5e7334db527a79bf6c0b498e21b72c643ebf2"
51
51
  }