@ndla/image-search 11.0.101-alpha.0 → 11.0.102-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/image-search",
-  "version": "11.0.101-alpha.0",
+  "version": "11.0.102-alpha.0",
   "description": "A simple library for searching images from NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@ndla/icons": "^8.0.58-alpha.0",
     "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.87-alpha.0",
+    "@ndla/primitives": "^1.0.88-alpha.0",
     "@ndla/styled-system": "^0.0.34",
     "@ndla/util": "^5.0.8-alpha.0"
   },
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "168853a36b0654ff01db41b8b78e81b1afb66768"
+  "gitHead": "52adafa4348c1c02ebc4da28317aa5270cbe2a80"
 }

package/es/ImageMeta.js

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useMemo } from "react";
-import { Text } from "@ndla/primitives";
-import { humanFileSize } from "@ndla/util";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ImageMeta = _ref => {
-  let {
-    contentType,
-    fileSize,
-    imageDimensions,
-    locale
-  } = _ref;
-  const prettySize = useMemo(() => {
-    return humanFileSize(fileSize, locale);
-  }, [fileSize, locale]);
-  const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : "";
-  return /*#__PURE__*/_jsx(Text, {
-    children: `${contentType} - ${prettySize}${dimensions}`
-  });
-};
-export default ImageMeta;

package/es/ImageSearch.js

@@ -1,213 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useEffect, useState } from "react";
-import { ArrowLeftShortLine, ArrowRightShortLine, SearchLine } from "@ndla/icons";
-import { Button, IconButton, Input, PaginationContext, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, Text } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import ImageSearchResult from "./ImageSearchResult";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ImageSearchWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "small"
-  }
-});
-const StyledSearchResults = styled("div", {
-  base: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-    gridGap: "xsmall",
-    gridAutoFlow: "dense"
-  }
-});
-const InputWrapper = styled("div", {
-  base: {
-    display: "flex",
-    gap: "xsmall"
-  }
-});
-const StyledPaginationRoot = styled(PaginationRoot, {
-  base: {
-    flexWrap: "wrap"
-  }
-});
-const StyledButton = styled(Button, {
-  base: {
-    tabletWideDown: {
-      paddingInline: "xsmall",
-      "& span": {
-        display: "none"
-      }
-    }
-  }
-});
-const StyledPaginationItem = styled(PaginationItem, {
-  base: {
-    tabletWideDown: {
-      "&:nth-child(2)": {
-        display: "none"
-      },
-      "&:nth-last-child(2)": {
-        display: "none"
-      }
-    }
-  }
-});
-const ImageSearch = _ref => {
-  let {
-    onImageSelect,
-    searchImages: search,
-    onError,
-    locale,
-    noResults,
-    checkboxAction,
-    showCheckbox,
-    translations
-  } = _ref;
-  const [queryObject, setQueryObject] = useState({
-    query: undefined,
-    page: 1,
-    pageSize: 16
-  });
-  const [selectedImage, setSelectedImage] = useState();
-  const [searching, setSearching] = useState(false);
-  const [searchResult, setSearchResult] = useState();
-  const {
-    page
-  } = queryObject;
-  const noResultsFound = !searching && searchResult?.results.length === 0;
-  const onSelectImage = (image, saveAsMetaImage) => {
-    setSelectedImage(undefined);
-    if (!image) return;
-    onImageSelect(image);
-    if (saveAsMetaImage) {
-      checkboxAction?.(image);
-    }
-  };
-  const searchImages = queryObject => {
-    setSearching(true);
-    search(queryObject.query, queryObject.page).then(result => {
-      setQueryObject({
-        query: queryObject.query,
-        pageSize: result.pageSize,
-        page: queryObject.page
-      });
-      setSearchResult(result);
-      setSearching(false);
-    }).catch(err => {
-      onError?.(err);
-      setSearching(false);
-    });
-  };
-  const handleQueryChange = _ref2 => {
-    let {
-      target: {
-        value
-      }
-    } = _ref2;
-    setQueryObject(prevState => ({
-      ...prevState,
-      query: value
-    }));
-  };
-  const onEnter = e => {
-    if (e.key === "Enter") {
-      searchImages(queryObject);
-    }
-  };
-  useEffect(() => {
-    searchImages(queryObject);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/_jsxs(ImageSearchWrapper, {
-    children: [/*#__PURE__*/_jsxs(InputWrapper, {
-      role: "search",
-      children: [/*#__PURE__*/_jsx(Input, {
-        type: "search",
-        placeholder: translations.searchPlaceholder,
-        value: queryObject?.query ?? "",
-        onChange: handleQueryChange,
-        onKeyDown: onEnter
-      }), /*#__PURE__*/_jsx(IconButton, {
-        variant: "primary",
-        "aria-label": translations.searchButtonTitle,
-        title: translations.searchButtonTitle,
-        onKeyDown: onEnter,
-        onClick: () => searchImages(queryObject),
-        children: /*#__PURE__*/_jsx(SearchLine, {})
-      })]
-    }), !!noResultsFound && noResults, /*#__PURE__*/_jsx(StyledSearchResults, {
-      children: searchResult?.results.map(image => /*#__PURE__*/_jsx(ImageSearchResult, {
-        image: image,
-        onImageClick: image => setSelectedImage(image),
-        selectedImage: selectedImage,
-        onSelectImage: onSelectImage,
-        showCheckbox: !!showCheckbox,
-        translations: translations.imagePreview,
-        locale: locale
-      }, image.id))
-    }), /*#__PURE__*/_jsxs(StyledPaginationRoot, {
-      page: page ?? 1,
-      onPageChange: details => searchImages({
-        ...queryObject,
-        page: details.page
-      }),
-      translations: translations.paginationTranslations,
-      count: searchResult?.totalCount ?? 0,
-      pageSize: searchResult?.pageSize,
-      hidden: noResultsFound,
-      children: [/*#__PURE__*/_jsx(PaginationPrevTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/_jsxs(StyledButton, {
-          variant: "tertiary",
-          "aria-label": translations.paginationTranslations?.prevTriggerLabel,
-          title: translations.paginationTranslations?.prevTriggerLabel,
-          children: [/*#__PURE__*/_jsx(ArrowLeftShortLine, {}), /*#__PURE__*/_jsx("span", {
-            children: translations.paginationTranslations?.prevTriggerLabel
-          })]
-        })
-      }), /*#__PURE__*/_jsx(PaginationContext, {
-        children: pagination => pagination.pages.map((page, index, full) => {
-          // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error
-          if (index === full.length - 1) return null;
-          return page.type === "page" ? /*#__PURE__*/_jsx(StyledPaginationItem, {
-            ...page,
-            asChild: true,
-            children: /*#__PURE__*/_jsx(Button, {
-              variant: page.value === pagination.page ? "primary" : "tertiary",
-              children: page.value
-            })
-          }, index) : /*#__PURE__*/_jsx(PaginationEllipsis, {
-            index: index,
-            asChild: true,
-            children: /*#__PURE__*/_jsx(Text, {
-              asChild: true,
-              consumeCss: true,
-              children: /*#__PURE__*/_jsx("div", {
-                children: "\u2026"
-              })
-            })
-          }, index);
-        })
-      }), /*#__PURE__*/_jsx(PaginationNextTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/_jsxs(StyledButton, {
-          variant: "tertiary",
-          "aria-label": translations.paginationTranslations?.nextTriggerLabel,
-          title: translations.paginationTranslations?.nextTriggerLabel,
-          children: [/*#__PURE__*/_jsx("span", {
-            children: translations.paginationTranslations?.nextTriggerLabel
-          }), /*#__PURE__*/_jsx(ArrowRightShortLine, {})]
-        })
-      })]
-    })]
-  });
-};
-export default ImageSearch;

package/es/ImageSearchResult.js

@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { Text, Image, Button } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import PreviewImage from "./PreviewImage";
-import { getPreviewSrcSets } from "./util/imageUtil";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const StyledButton = styled(Button, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    borderColor: "stroke.subtle"
-  }
-});
-const StyledImage = styled(Image, {
-  base: {
-    maxHeight: "135px",
-    width: "100%",
-    height: "100%"
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    lineClamp: "3"
-  }
-});
-export default function ImageSearchResult(_ref) {
-  let {
-    image,
-    onImageClick,
-    selectedImage,
-    onSelectImage,
-    showCheckbox,
-    translations,
-    locale
-  } = _ref;
-  const isSelectedImage = selectedImage?.id === image.id;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(StyledButton, {
-      variant: isSelectedImage ? "secondary" : "tertiary",
-      "data-testid": "select-image-from-list",
-      onClick: () => onImageClick(image),
-      "aria-expanded": isSelectedImage,
-      "aria-controls": `image-preview-${image.id}`,
-      children: [/*#__PURE__*/_jsx(StyledImage, {
-        alt: "",
-        srcSet: getPreviewSrcSets(image.image.imageUrl),
-        src: image.image.imageUrl,
-        variant: "rounded"
-      }), /*#__PURE__*/_jsx(StyledText, {
-        textStyle: "label.medium",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("span", {
-          children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`
-        })
-      })]
-    }), isSelectedImage ? /*#__PURE__*/_jsx(PreviewImage, {
-      id: `image-preview-${image.id}`,
-      image: selectedImage,
-      onSelectImage: onSelectImage,
-      translations: translations,
-      showCheckbox: showCheckbox,
-      locale: locale
-    }) : null]
-  });
-}

package/es/PreviewImage.js

@@ -1,190 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import { useState } from "react";
-import { CloseLine, HashTag, CheckLine } from "@ndla/icons";
-import { getModelReleaseValue } from "@ndla/licenses";
-import { Button, CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Text, Image, IconButton, FieldRoot } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import ImageMeta from "./ImageMeta";
-import { getSrcSets } from "./util/imageUtil";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ImageContainer = styled("div", {
-  base: {
-    flexShrink: "0"
-  }
-});
-const StyledImage = styled(Image, {
-  base: {
-    maxHeight: "surface.xsmall"
-  }
-});
-const StyledImageMetadata = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xxsmall"
-  }
-});
-const HashTagWrapper = styled("ul", {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    flexWrap: "wrap"
-  }
-});
-const HashTagGroup = styled("div", {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    flexWrap: "wrap"
-  }
-});
-const StyledTagItem = styled("li", {
-  base: {
-    display: "flex",
-    alignItems: "center"
-  }
-});
-const StyledPreview = styled("div", {
-  base: {
-    display: "flex",
-    gridColumn: "1 / -1",
-    borderColor: "stroke.default",
-    border: "1px solid",
-    borderRadius: "xsmall",
-    gap: "small",
-    padding: "small",
-    flexWrap: "wrap",
-    overflow: "hidden"
-  }
-});
-const StyledTopRow = styled("div", {
-  base: {
-    display: "flex",
-    justifyContent: "space-between"
-  }
-});
-const ContentWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium",
-    flex: "2"
-  }
-});
-const ActionsWrapper = styled("div", {
-  base: {
-    display: "flex",
-    gap: "small",
-    marginBlockEnd: "medium"
-  }
-});
-const StyledFieldRoot = styled(FieldRoot, {
-  base: {
-    alignSelf: "center"
-  }
-});
-const PreviewImage = _ref => {
-  let {
-    id,
-    image,
-    onSelectImage,
-    showCheckbox,
-    translations,
-    locale
-  } = _ref;
-  const [saveAsMetaImage, setSaveAsMetaImage] = useState(false);
-  return /*#__PURE__*/_jsxs(StyledPreview, {
-    id: id,
-    children: [/*#__PURE__*/_jsx(ImageContainer, {
-      children: /*#__PURE__*/_jsx(StyledImage, {
-        alt: "",
-        srcSet: getSrcSets(image.image.imageUrl),
-        sizes: "(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw",
-        src: image.image.imageUrl,
-        "aria-label": image.title.title,
-        variant: "rounded"
-      })
-    }), /*#__PURE__*/_jsxs(ContentWrapper, {
-      children: [/*#__PURE__*/_jsxs(StyledImageMetadata, {
-        children: [/*#__PURE__*/_jsxs(StyledTopRow, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            textStyle: "title.medium",
-            children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`
-          }), /*#__PURE__*/_jsx(IconButton, {
-            variant: "tertiary",
-            onClick: () => onSelectImage(undefined),
-            "aria-label": translations.close,
-            title: translations.close,
-            children: /*#__PURE__*/_jsx(CloseLine, {})
-          })]
-        }), !!image.copyright.creators.length && /*#__PURE__*/_jsxs(Text, {
-          children: [/*#__PURE__*/_jsx("b", {
-            children: `${translations.creatorsLabel}: `
-          }), image.copyright.creators.map(creator => creator.name).join(", ")]
-        }), !!image.copyright.license.description?.trim() && /*#__PURE__*/_jsxs(Text, {
-          children: [/*#__PURE__*/_jsx("b", {
-            children: `${translations.license}: `
-          }), image.copyright.license.description]
-        }), !!image.caption.caption.trim() && /*#__PURE__*/_jsxs(Text, {
-          children: [/*#__PURE__*/_jsx("b", {
-            children: `${translations.caption}: `
-          }), image.caption.caption]
-        }), !!image.alttext.alttext.trim() && /*#__PURE__*/_jsxs(Text, {
-          children: [/*#__PURE__*/_jsx("b", {
-            children: `${translations.altText}:`
-          }), " ", image.alttext.alttext]
-        }), !!image.modelRelease.trim() && /*#__PURE__*/_jsxs(Text, {
-          children: [/*#__PURE__*/_jsx("b", {
-            children: `${translations.modelRelease}: `
-          }), getModelReleaseValue(image.modelRelease, locale)]
-        }), /*#__PURE__*/_jsx(ImageMeta, {
-          contentType: image.image.contentType,
-          fileSize: image.image.size,
-          imageDimensions: image.image.dimensions,
-          locale: locale
-        }), !!image.tags.tags.length && /*#__PURE__*/_jsxs(HashTagGroup, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            id: "tags-title",
-            children: /*#__PURE__*/_jsx("b", {
-              children: `${translations.tags}: `
-            })
-          }), /*#__PURE__*/_jsx(HashTagWrapper, {
-            "aria-describedby": "tags-title",
-            children: image.tags.tags.map(tag => /*#__PURE__*/_jsxs(StyledTagItem, {
-              children: [/*#__PURE__*/_jsx(HashTag, {
-                size: "small"
-              }), tag]
-            }, tag))
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(ActionsWrapper, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          "data-testid": "use-image",
-          onClick: () => onSelectImage(image, saveAsMetaImage),
-          children: translations.useImageTitle
-        }), !!showCheckbox && /*#__PURE__*/_jsx(StyledFieldRoot, {
-          children: /*#__PURE__*/_jsxs(CheckboxRoot, {
-            checked: saveAsMetaImage,
-            onCheckedChange: () => setSaveAsMetaImage(prev => !prev),
-            children: [/*#__PURE__*/_jsx(CheckboxControl, {
-              children: /*#__PURE__*/_jsx(CheckboxIndicator, {
-                asChild: true,
-                children: /*#__PURE__*/_jsx(CheckLine, {})
-              })
-            }), /*#__PURE__*/_jsx(CheckboxLabel, {
-              children: translations.checkboxLabel
-            }), /*#__PURE__*/_jsx(CheckboxHiddenInput, {})]
-          })
-        })]
-      })]
-    })]
-  });
-};
-export default PreviewImage;

package/es/index.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-export { default as ImageMeta } from "./ImageMeta";
-export { default as ImageSearch } from "./ImageSearch";

package/es/util/imageUtil.js

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* - Source sets for gallery search is retina-display optimized
-   - Based on: https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ */
-
-export const getSrcSets = imageUrl => [`${imageUrl}?width=1440 1440w`, `${imageUrl}?width=1120 1120w`, `${imageUrl}?width=1000 1000w`, `${imageUrl}?width=960 960w`, `${imageUrl}?width=800 800w`, `${imageUrl}?width=640 640w`, `${imageUrl}?width=480 480w`, `${imageUrl}?width=320 320w`].join(", ");
-export const getPreviewSrcSets = imageUrl => [`${imageUrl}?width=480 3x`, `${imageUrl}?width=320 2x`, `${imageUrl}?width=160 1x`].join(", ");

package/lib/ImageMeta.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _primitives = require("@ndla/primitives");
-var _util = require("@ndla/util");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const ImageMeta = _ref => {
-  let {
-    contentType,
-    fileSize,
-    imageDimensions,
-    locale
-  } = _ref;
-  const prettySize = (0, _react.useMemo)(() => {
-    return (0, _util.humanFileSize)(fileSize, locale);
-  }, [fileSize, locale]);
-  const dimensions = imageDimensions ? ` - ${imageDimensions.width}x${imageDimensions.height} px` : "";
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-    children: `${contentType} - ${prettySize}${dimensions}`
-  });
-};
-var _default = exports.default = ImageMeta;

package/lib/ImageSearch.js

@@ -1,220 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _ImageSearchResult = _interopRequireDefault(require("./ImageSearchResult"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const ImageSearchWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "small"
-  }
-});
-const StyledSearchResults = (0, _jsx2.styled)("div", {
-  base: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
-    gridGap: "xsmall",
-    gridAutoFlow: "dense"
-  }
-});
-const InputWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    gap: "xsmall"
-  }
-});
-const StyledPaginationRoot = (0, _jsx2.styled)(_primitives.PaginationRoot, {
-  base: {
-    flexWrap: "wrap"
-  }
-});
-const StyledButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    tabletWideDown: {
-      paddingInline: "xsmall",
-      "& span": {
-        display: "none"
-      }
-    }
-  }
-});
-const StyledPaginationItem = (0, _jsx2.styled)(_primitives.PaginationItem, {
-  base: {
-    tabletWideDown: {
-      "&:nth-child(2)": {
-        display: "none"
-      },
-      "&:nth-last-child(2)": {
-        display: "none"
-      }
-    }
-  }
-});
-const ImageSearch = _ref => {
-  let {
-    onImageSelect,
-    searchImages: search,
-    onError,
-    locale,
-    noResults,
-    checkboxAction,
-    showCheckbox,
-    translations
-  } = _ref;
-  const [queryObject, setQueryObject] = (0, _react.useState)({
-    query: undefined,
-    page: 1,
-    pageSize: 16
-  });
-  const [selectedImage, setSelectedImage] = (0, _react.useState)();
-  const [searching, setSearching] = (0, _react.useState)(false);
-  const [searchResult, setSearchResult] = (0, _react.useState)();
-  const {
-    page
-  } = queryObject;
-  const noResultsFound = !searching && searchResult?.results.length === 0;
-  const onSelectImage = (image, saveAsMetaImage) => {
-    setSelectedImage(undefined);
-    if (!image) return;
-    onImageSelect(image);
-    if (saveAsMetaImage) {
-      checkboxAction?.(image);
-    }
-  };
-  const searchImages = queryObject => {
-    setSearching(true);
-    search(queryObject.query, queryObject.page).then(result => {
-      setQueryObject({
-        query: queryObject.query,
-        pageSize: result.pageSize,
-        page: queryObject.page
-      });
-      setSearchResult(result);
-      setSearching(false);
-    }).catch(err => {
-      onError?.(err);
-      setSearching(false);
-    });
-  };
-  const handleQueryChange = _ref2 => {
-    let {
-      target: {
-        value
-      }
-    } = _ref2;
-    setQueryObject(prevState => ({
-      ...prevState,
-      query: value
-    }));
-  };
-  const onEnter = e => {
-    if (e.key === "Enter") {
-      searchImages(queryObject);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    searchImages(queryObject);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageSearchWrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
-      role: "search",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Input, {
-        type: "search",
-        placeholder: translations.searchPlaceholder,
-        value: queryObject?.query ?? "",
-        onChange: handleQueryChange,
-        onKeyDown: onEnter
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
-        variant: "primary",
-        "aria-label": translations.searchButtonTitle,
-        title: translations.searchButtonTitle,
-        onKeyDown: onEnter,
-        onClick: () => searchImages(queryObject),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SearchLine, {})
-      })]
-    }), !!noResultsFound && noResults, /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearchResults, {
-      children: searchResult?.results.map(image => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSearchResult.default, {
-        image: image,
-        onImageClick: image => setSelectedImage(image),
-        selectedImage: selectedImage,
-        onSelectImage: onSelectImage,
-        showCheckbox: !!showCheckbox,
-        translations: translations.imagePreview,
-        locale: locale
-      }, image.id))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledPaginationRoot, {
-      page: page ?? 1,
-      onPageChange: details => searchImages({
-        ...queryObject,
-        page: details.page
-      }),
-      translations: translations.paginationTranslations,
-      count: searchResult?.totalCount ?? 0,
-      pageSize: searchResult?.pageSize,
-      hidden: noResultsFound,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PaginationPrevTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
-          variant: "tertiary",
-          "aria-label": translations.paginationTranslations?.prevTriggerLabel,
-          title: translations.paginationTranslations?.prevTriggerLabel,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowLeftShortLine, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: translations.paginationTranslations?.prevTriggerLabel
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PaginationContext, {
-        children: pagination => pagination.pages.map((page, index, full) => {
-          // Hide last page to not trigger RESULT_WINDOW_TOO_LARGE error
-          if (index === full.length - 1) return null;
-          return page.type === "page" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPaginationItem, {
-            ...page,
-            asChild: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
-              variant: page.value === pagination.page ? "primary" : "tertiary",
-              children: page.value
-            })
-          }, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PaginationEllipsis, {
-            index: index,
-            asChild: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-              asChild: true,
-              consumeCss: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                children: "\u2026"
-              })
-            })
-          }, index);
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PaginationNextTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
-          variant: "tertiary",
-          "aria-label": translations.paginationTranslations?.nextTriggerLabel,
-          title: translations.paginationTranslations?.nextTriggerLabel,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: translations.paginationTranslations?.nextTriggerLabel
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowRightShortLine, {})]
-        })
-      })]
-    })]
-  });
-};
-var _default = exports.default = ImageSearch;

package/lib/ImageSearchResult.js

@@ -1,80 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ImageSearchResult;
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _PreviewImage = _interopRequireDefault(require("./PreviewImage"));
-var _imageUtil = require("./util/imageUtil");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const StyledButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    borderColor: "stroke.subtle"
-  }
-});
-const StyledImage = (0, _jsx2.styled)(_primitives.Image, {
-  base: {
-    maxHeight: "135px",
-    width: "100%",
-    height: "100%"
-  }
-});
-const StyledText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    lineClamp: "3"
-  }
-});
-function ImageSearchResult(_ref) {
-  let {
-    image,
-    onImageClick,
-    selectedImage,
-    onSelectImage,
-    showCheckbox,
-    translations,
-    locale
-  } = _ref;
-  const isSelectedImage = selectedImage?.id === image.id;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
-      variant: isSelectedImage ? "secondary" : "tertiary",
-      "data-testid": "select-image-from-list",
-      onClick: () => onImageClick(image),
-      "aria-expanded": isSelectedImage,
-      "aria-controls": `image-preview-${image.id}`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
-        alt: "",
-        srcSet: (0, _imageUtil.getPreviewSrcSets)(image.image.imageUrl),
-        src: image.image.imageUrl,
-        variant: "rounded"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-        textStyle: "label.medium",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`
-        })
-      })]
-    }), isSelectedImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PreviewImage.default, {
-      id: `image-preview-${image.id}`,
-      image: selectedImage,
-      onSelectImage: onSelectImage,
-      translations: translations,
-      showCheckbox: showCheckbox,
-      locale: locale
-    }) : null]
-  });
-}

package/lib/PreviewImage.js

@@ -1,197 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _icons = require("@ndla/icons");
-var _licenses = require("@ndla/licenses");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _ImageMeta = _interopRequireDefault(require("./ImageMeta"));
-var _imageUtil = require("./util/imageUtil");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const ImageContainer = (0, _jsx2.styled)("div", {
-  base: {
-    flexShrink: "0"
-  }
-});
-const StyledImage = (0, _jsx2.styled)(_primitives.Image, {
-  base: {
-    maxHeight: "surface.xsmall"
-  }
-});
-const StyledImageMetadata = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xxsmall"
-  }
-});
-const HashTagWrapper = (0, _jsx2.styled)("ul", {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    flexWrap: "wrap"
-  }
-});
-const HashTagGroup = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    flexWrap: "wrap"
-  }
-});
-const StyledTagItem = (0, _jsx2.styled)("li", {
-  base: {
-    display: "flex",
-    alignItems: "center"
-  }
-});
-const StyledPreview = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    gridColumn: "1 / -1",
-    borderColor: "stroke.default",
-    border: "1px solid",
-    borderRadius: "xsmall",
-    gap: "small",
-    padding: "small",
-    flexWrap: "wrap",
-    overflow: "hidden"
-  }
-});
-const StyledTopRow = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    justifyContent: "space-between"
-  }
-});
-const ContentWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium",
-    flex: "2"
-  }
-});
-const ActionsWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    gap: "small",
-    marginBlockEnd: "medium"
-  }
-});
-const StyledFieldRoot = (0, _jsx2.styled)(_primitives.FieldRoot, {
-  base: {
-    alignSelf: "center"
-  }
-});
-const PreviewImage = _ref => {
-  let {
-    id,
-    image,
-    onSelectImage,
-    showCheckbox,
-    translations,
-    locale
-  } = _ref;
-  const [saveAsMetaImage, setSaveAsMetaImage] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledPreview, {
-    id: id,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
-        alt: "",
-        srcSet: (0, _imageUtil.getSrcSets)(image.image.imageUrl),
-        sizes: "(min-width: 800px) 360px, (min-width: 400px) 300px, 100vw",
-        src: image.image.imageUrl,
-        "aria-label": image.title.title,
-        variant: "rounded"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledImageMetadata, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTopRow, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "title.medium",
-            children: image.title.title.trim() ? image.title.title : translations.missingTitleFallback ?? `ID: ${image.id}`
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
-            variant: "tertiary",
-            onClick: () => onSelectImage(undefined),
-            "aria-label": translations.close,
-            title: translations.close,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseLine, {})
-          })]
-        }), !!image.copyright.creators.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-            children: `${translations.creatorsLabel}: `
-          }), image.copyright.creators.map(creator => creator.name).join(", ")]
-        }), !!image.copyright.license.description?.trim() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-            children: `${translations.license}: `
-          }), image.copyright.license.description]
-        }), !!image.caption.caption.trim() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-            children: `${translations.caption}: `
-          }), image.caption.caption]
-        }), !!image.alttext.alttext.trim() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-            children: `${translations.altText}:`
-          }), " ", image.alttext.alttext]
-        }), !!image.modelRelease.trim() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-            children: `${translations.modelRelease}: `
-          }), (0, _licenses.getModelReleaseValue)(image.modelRelease, locale)]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageMeta.default, {
-          contentType: image.image.contentType,
-          fileSize: image.image.size,
-          imageDimensions: image.image.dimensions,
-          locale: locale
-        }), !!image.tags.tags.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)(HashTagGroup, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            id: "tags-title",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-              children: `${translations.tags}: `
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(HashTagWrapper, {
-            "aria-describedby": "tags-title",
-            children: image.tags.tags.map(tag => /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTagItem, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HashTag, {
-                size: "small"
-              }), tag]
-            }, tag))
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ActionsWrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
-          "data-testid": "use-image",
-          onClick: () => onSelectImage(image, saveAsMetaImage),
-          children: translations.useImageTitle
-        }), !!showCheckbox && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFieldRoot, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.CheckboxRoot, {
-            checked: saveAsMetaImage,
-            onCheckedChange: () => setSaveAsMetaImage(prev => !prev),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CheckboxControl, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CheckboxIndicator, {
-                asChild: true,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CheckLine, {})
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CheckboxLabel, {
-              children: translations.checkboxLabel
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CheckboxHiddenInput, {})]
-          })
-        })]
-      })]
-    })]
-  });
-};
-var _default = exports.default = PreviewImage;

package/lib/index.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ImageMeta", {
-  enumerable: true,
-  get: function () {
-    return _ImageMeta.default;
-  }
-});
-Object.defineProperty(exports, "ImageSearch", {
-  enumerable: true,
-  get: function () {
-    return _ImageSearch.default;
-  }
-});
-var _ImageMeta = _interopRequireDefault(require("./ImageMeta"));
-var _ImageSearch = _interopRequireDefault(require("./ImageSearch"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/util/imageUtil.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getSrcSets = exports.getPreviewSrcSets = void 0;
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* - Source sets for gallery search is retina-display optimized
-   - Based on: https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ */
-
-const getSrcSets = imageUrl => [`${imageUrl}?width=1440 1440w`, `${imageUrl}?width=1120 1120w`, `${imageUrl}?width=1000 1000w`, `${imageUrl}?width=960 960w`, `${imageUrl}?width=800 800w`, `${imageUrl}?width=640 640w`, `${imageUrl}?width=480 480w`, `${imageUrl}?width=320 320w`].join(", ");
-exports.getSrcSets = getSrcSets;
-const getPreviewSrcSets = imageUrl => [`${imageUrl}?width=480 3x`, `${imageUrl}?width=320 2x`, `${imageUrl}?width=160 1x`].join(", ");
-exports.getPreviewSrcSets = getPreviewSrcSets;