@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.5

package/esm/components/widgets/AssetActionsBase/AssetActionsBase.js

@@ -0,0 +1,31 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../node_modules/react/index.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { AssetActions } from './AssetActionsBase.styled.js';
+import AssetAction from '../AssetAction/AssetAction.js';
+
+const _excluded = ["actions", "asset"];
+const AssetActionsBase = React.forwardRef(function AssetActionsBase(_ref, forwardedRef) {
+  let {
+      actions,
+      asset
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const assetActions = actions.map((action, index) => React.createElement(AssetAction, _extends({
+    key: `index_${action.title}`,
+    ref: forwardedRef
+  }, props, {
+    action: action,
+    asset: asset,
+    itemKey: `${index}-${action.title}`
+  })));
+  return React.createElement(AssetActions, null, assetActions);
+});
+AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  actions: PropTypes.arrayOf(PropTypes.object),
+  asset: PropTypes.object
+} : {};
+AssetActionsBase.defaultProps = {};
+var AssetActionsBase$1 = AssetActionsBase;
+
+export { AssetActionsBase$1 as default };

package/esm/components/widgets/AssetActionsBase/AssetActionsBase.styled.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t;
+const AssetActions = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  gap: 8px;
+`), props => props.theme.primaryFontFamily);
+
+export { AssetActions };

package/esm/components/widgets/AssetGallery/AssetGallery.js

@@ -0,0 +1,98 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { isFunction } from 'lodash';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import React from '../../../node_modules/react/index.js';
+import { assetShape } from './asset.propType.js';
+import AssetGalleryBase from './AssetGalleryBase/AssetGalleryBase.js';
+import { r as react } from '../../../_virtual/index.js';
+
+const _excluded = ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "displayIcon"];
+const AssetGallery = React.forwardRef(function AssetGallery(_ref, forwardedRef) {
+  let {
+      assets,
+      activeSummaryCard,
+      viewMode,
+      thumbnailMaxHeight,
+      selectable,
+      selectedAssetKeys,
+      onSelectedChanged,
+      softSelectable,
+      scrollElement,
+      onSoftSelectedChanged,
+      component,
+      displayIcon
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = react.exports.useState(selectedAssetKeys || []);
+  const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = react.exports.useState(null);
+  react.exports.useEffect(() => {
+    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
+  }, [selectedAssetKeys]);
+  react.exports.useEffect(() => {
+    setSelectedAssetKeysInternalState(current => {
+      return current.filter(c => assets.some(a => a.key === c));
+    });
+  }, [assets.length]);
+  react.exports.useEffect(() => {
+    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
+    if (isFunction(onSelectedChanged)) {
+      onSelectedChanged(selectedAssetKeysInternalState);
+    }
+  }, [selectedAssetKeysInternalState]);
+  react.exports.useEffect(() => {
+    if (isFunction(onSoftSelectedChanged)) {
+      onSoftSelectedChanged(softSelectedAssetKeyInternalState);
+    }
+  }, [softSelectedAssetKeyInternalState]);
+  const onSelected = react.exports.useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);
+  }, []);
+  const onUnselected = react.exports.useCallback(assetKey => {
+    setSelectedAssetKeysInternalState(currentState => currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey));
+  }, []);
+  const onAssetSoftSelectedChanged = react.exports.useCallback((assetKey = null) => {
+    setSoftSelectedAssetKeyInternalState(assetKey);
+  }, []);
+  return React.createElement(AssetGalleryBase, _extends({
+    ref: forwardedRef,
+    assets: assets,
+    activeSummaryCard: activeSummaryCard,
+    displayIcon: displayIcon,
+    thumbnailMaxHeight: thumbnailMaxHeight,
+    selectable: selectable,
+    selectedAssetKeys: selectedAssetKeysInternalState,
+    onAssetSelected: onSelected,
+    onAssetUnselected: onUnselected,
+    softSelectable: softSelectable,
+    softSelectedAssetKey: softSelectedAssetKeyInternalState,
+    scrollElement: scrollElement,
+    onAssetSoftSelectedChanged: onAssetSoftSelectedChanged,
+    component: component,
+    viewMode: viewMode
+  }, props));
+});
+AssetGallery.propTypes = process.env.NODE_ENV !== "production" ? {
+  assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),
+  displayIcon: PropTypes.string,
+  activeSummaryCard: PropTypes.bool,
+  viewMode: PropTypes.oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: PropTypes.number,
+  selectable: PropTypes.bool,
+  selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
+  onSelectedChanged: PropTypes.func,
+  softSelectable: PropTypes.bool,
+  scrollElement: PropTypes.instanceOf(Element),
+  onSoftSelectedChanged: PropTypes.func,
+  component: PropTypes.func
+} : {};
+AssetGallery.defaultProps = {
+  assets: [],
+  viewMode: 'compact',
+  thumbnailMaxHeight: 300,
+  selectedAssetKeys: [],
+  activeSummaryCard: false,
+  displayIcon: ''
+};
+var AssetGallery$1 = AssetGallery;
+
+export { AssetGallery$1 as default };

package/esm/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.js

@@ -0,0 +1,384 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React from '../../../../node_modules/react/index.js';
+import useMergedRefs from '../../../../node_modules/@restart/hooks/esm/useMergedRefs.js';
+import { throttle } from 'lodash';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import ResizeObserver from 'resize-observer-polyfill';
+import { assetShape } from '../asset.propType.js';
+import useIsomorphicLayoutEffect from '../../../../hooks/useIsomorphicLayoutEffect.js';
+import { AssetGalleryBase as AssetGalleryBase$2, GroupLabel, AssetGalleryCardBase } from './AssetGalleryBase.styled.js';
+import AssetGalleryGridCard from './AssetGalleryGridCard/AssetGalleryGridCard.js';
+import AssetGalleryCompactCard from './AssetGalleryCompactCard/AssetGalleryCompactCard.js';
+import { r as react } from '../../../../_virtual/index.js';
+
+const _excluded = ["assets", "activeSummaryCard", "displayIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"];
+const AssetGalleryBase = React.forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
+  let {
+      assets: assetsProp,
+      activeSummaryCard,
+      displayIcon,
+      viewMode,
+      thumbnailMaxHeight,
+      selectable,
+      selectedAssetKeys,
+      onAssetSelected,
+      onAssetUnselected,
+      softSelectable,
+      softSelectedAssetKey,
+      scrollElement: scrollElementProp,
+      onAssetSoftSelectedChanged,
+      component
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const assetGalleryDOMNode = react.exports.useRef();
+  const assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
+  const assetGalleryWidth = react.exports.useRef(0);
+  const minimumRowAspectRatio = react.exports.useRef(0);
+  const calculatedAssets = react.exports.useRef([]);
+  const [assets, setAssets] = react.exports.useState([]);
+  const MAXIMUM_ROW_HEIGHT = react.exports.useMemo(() => viewMode === 'grid' ? 450 : thumbnailMaxHeight, [viewMode, thumbnailMaxHeight]);
+  const SPACE_BETWEEN_ASSETS = 8;
+  const SPACE_UNDER_ASSETS = 8;
+  const PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
+  const SECONDARY_SCROLL_BUFFER_HEIGHT = 500;
+  const GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
+  const GRID_VIEW_MODE_ASSET_HEIGHT = 427;
+  const MISSING_WIDTH_PLACEHOLDER = 1920;
+  const MISSING_HEIGHT_PLACEHOLDER = 1080;
+  const isBrowser = typeof window !== 'undefined';
+  const scrollElement = scrollElementProp || window;
+  const previousYOffset = react.exports.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  const latestYOffset = react.exports.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  const scrollDirection = react.exports.useRef('down');
+  useIsomorphicLayoutEffect(() => {
+    if (!assetGalleryDOMNode.current) return;
+    const throttledOnResize = throttle(onResize, 1);
+    const resizeObserver = new ResizeObserver(throttledOnResize);
+    resizeObserver.observe(assetGalleryDOMNode.current);
+    function onResize(entries) {
+      entries.forEach(entry => {
+        if (assetGalleryWidth.current === entry.contentRect.width) return;
+        window.requestAnimationFrame(() => {
+          assetGalleryWidth.current = entry.contentRect.width;
+          main();
+        });
+      });
+    }
+    return () => {
+      resizeObserver.unobserve(assetGalleryDOMNode.current);
+    };
+  }, [assetsProp, assetGalleryDOMNode, MAXIMUM_ROW_HEIGHT]);
+  react.exports.useEffect(() => {
+    main();
+  }, [MAXIMUM_ROW_HEIGHT, assetsProp]);
+  const main = () => {
+    calculateAssetGalleryAspectRatio();
+    calculateLayout();
+    calculateVisibility();
+  };
+  const calculateAssetGalleryAspectRatio = () => {
+    if (assetGalleryWidth.current > 0) {
+      minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
+    }
+  };
+  const calculateLayout = () => {
+    const assetsWithoutAKey = assetsProp.filter(a => !a.key);
+    if (assetsWithoutAKey.length > 0) {
+      assetsProp = assetsProp.filter(a => a.key);
+      assetsWithoutAKey.forEach(a => console.warn('Omitted asset from the gallery because it was missing the unique `key` property.', a));
+    }
+    if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
+      let row = [];
+      let translateX = 0;
+      let translateY = 0;
+      const computedAssets = [];
+      let lastGroup = null;
+      const desiredAssetCountInRow = Math.floor(assetGalleryWidth.current / GRID_VIEW_MODE_ASSET_MIN_WIDTH) || 1;
+      const desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
+      assetsProp.forEach((asset, index) => {
+        var _assetsProp;
+        if (asset.group && asset.group !== lastGroup) {
+          computedAssets.push({
+            title: asset.group,
+            key: asset.key,
+            layout: {
+              type: 'groupLabel',
+              height: 50,
+              translateX: Math.round(translateX),
+              translateY: Math.round(translateY)
+            }
+          });
+          lastGroup = asset.group;
+          translateY += 50 + SPACE_UNDER_ASSETS;
+        }
+        row.push(asset);
+        if (row.length === desiredAssetCountInRow || index + 1 === assetsProp.length || (_assetsProp = assetsProp[index + 1]) !== null && _assetsProp !== void 0 && _assetsProp.group && assetsProp[index + 1].group !== asset.group) {
+          row.forEach(rowAsset => {
+            computedAssets.push(_objectSpread2(_objectSpread2({}, rowAsset), {}, {
+              layout: {
+                type: 'asset',
+                width: Math.round(desiredAssetWidth),
+                height: Math.round(GRID_VIEW_MODE_ASSET_HEIGHT),
+                translateX: Math.round(translateX),
+                translateY: Math.round(translateY)
+              }
+            }));
+            translateX += desiredAssetWidth + SPACE_BETWEEN_ASSETS;
+          });
+          row = [];
+          translateX = 0;
+          translateY += GRID_VIEW_MODE_ASSET_HEIGHT + SPACE_UNDER_ASSETS;
+        }
+      });
+      calculatedAssets.current = computedAssets;
+    } else {
+      if (minimumRowAspectRatio.current > 0) {
+        let row = [];
+        let translateX = 0;
+        let translateY = 0;
+        let rowAspectRatio = 0;
+        let lastGroup = null;
+        const computedAssets = [];
+        assetsProp.forEach((asset, index) => {
+          var _assetsProp2;
+          if (asset.group && asset.group !== lastGroup) {
+            computedAssets.push({
+              title: asset.group,
+              key: asset.key,
+              layout: {
+                type: 'groupLabel',
+                height: 50,
+                translateX: Math.round(translateX),
+                translateY: Math.round(translateY)
+              }
+            });
+            lastGroup = asset.group;
+            translateY += 50 + SPACE_UNDER_ASSETS;
+          }
+          rowAspectRatio += calculateAspectRatio(asset.width || MISSING_WIDTH_PLACEHOLDER, asset.height || MISSING_HEIGHT_PLACEHOLDER);
+          row.push(asset);
+          if (rowAspectRatio >= minimumRowAspectRatio.current || index + 1 === assetsProp.length || (_assetsProp2 = assetsProp[index + 1]) !== null && _assetsProp2 !== void 0 && _assetsProp2.group && assetsProp[index + 1].group !== asset.group) {
+            rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
+            const totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (row.length - 1);
+            const rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
+            row.forEach(rowAsset => {
+              const assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
+              computedAssets.push(_objectSpread2(_objectSpread2({}, rowAsset), {}, {
+                layout: {
+                  type: 'asset',
+                  width: Math.round(assetWidth),
+                  height: Math.round(rowHeight),
+                  translateX: Math.round(translateX),
+                  translateY: Math.round(translateY),
+                  hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
+                }
+              }));
+              translateX += assetWidth + SPACE_BETWEEN_ASSETS;
+            });
+            row = [];
+            rowAspectRatio = 0;
+            translateY += rowHeight + SPACE_UNDER_ASSETS;
+            translateX = 0;
+          }
+        });
+        calculatedAssets.current = computedAssets;
+      }
+    }
+  };
+  function calculateAspectRatio(width, height) {
+    return width / height;
+  }
+  const totalGalleryHeight = react.exports.useMemo(() => {
+    if (assets.length === 0) {
+      return 0;
+    }
+    const lastAsset = assets[assets.length - 1];
+    if (assets.length < 8) {
+      return (lastAsset.layout.translateY + lastAsset.layout.height) * 2;
+    }
+    return lastAsset.layout.translateY + lastAsset.layout.height;
+  }, [assets]);
+  react.exports.useEffect(() => {
+    const throttledOnScroll = throttle(onScroll, 200);
+    scrollElement.addEventListener('scroll', throttledOnScroll, false);
+    return () => scrollElement.removeEventListener('scroll', throttledOnScroll, false);
+  }, [assetGalleryDOMNode, calculatedAssets]);
+  function onScroll() {
+    setScrollPositionAndDirection();
+    calculateVisibility();
+  }
+  function setScrollPositionAndDirection() {
+    const newYOffset = scrollElement.pageYOffset;
+    previousYOffset.current = latestYOffset.current;
+    latestYOffset.current = newYOffset;
+    scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
+  }
+  const calculateVisibility = () => {
+    if (!assetGalleryDOMNode.current) return;
+    const bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
+    const bufferBottom = scrollDirection.current === 'up' ? SECONDARY_SCROLL_BUFFER_HEIGHT : PRIMARY_SCROLL_BUFFER_HEIGHT;
+    const containerOffset = getOffsetTop(assetGalleryDOMNode.current);
+    const scrollerHeight = scrollElement.innerHeight;
+    const yOffset = latestYOffset.current;
+    const minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
+    const maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
+    const finalizedAssets = calculatedAssets.current.map(asset => {
+      if (scrollElement.self == window && (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY)) {
+        asset.layout.show = false;
+      } else {
+        asset.layout.show = true;
+      }
+      return asset;
+    });
+    setAssets(finalizedAssets);
+  };
+  function getOffsetTop(elem) {
+    let offsetTop = 0;
+    do {
+      if (!isNaN(elem.offsetTop)) {
+        offsetTop += elem.offsetTop;
+      }
+      elem = elem.offsetParent;
+    } while (elem);
+    return offsetTop;
+  }
+  const handleKeyPress = react.exports.useCallback(e => {
+    function isElementVisible(el) {
+      const rect = el.getBoundingClientRect(),
+        vWidth = scrollElement.innerWidth || document.documentElement.clientWidth,
+        vHeight = scrollElement.innerHeight || document.documentElement.clientHeight,
+        efp = function efp(x, y) {
+          return document.elementFromPoint(x, y);
+        };
+      if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
+      return el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom));
+    }
+    function softSelectFirstVisibleAsset() {
+      const visibleAssets = assets.filter(asset => asset.layout.show);
+      for (let i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
+        if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
+          onAssetSoftSelectedChanged(visibleAssets[i].key);
+          break;
+        }
+      }
+    }
+    if (assets.length === 0) return;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      if (softSelectedAssetKey === null) {
+        softSelectFirstVisibleAsset();
+        return;
+      }
+    }
+    if (e.key === 'ArrowLeft') {
+      const previousAssetIndex = assets.findIndex(asset => asset.key === softSelectedAssetKey) - 1;
+      const previousAsset = assets[previousAssetIndex];
+      if (previousAsset) {
+        if (previousAsset.layout.show) {
+          onAssetSoftSelectedChanged(previousAsset.key);
+        } else {
+          softSelectFirstVisibleAsset();
+        }
+      }
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      const nextAssetIndex = assets.findIndex(asset => asset.key === softSelectedAssetKey) + 1;
+      const nextAsset = assets[nextAssetIndex];
+      if (nextAsset) {
+        if (nextAsset.layout.show) {
+          onAssetSoftSelectedChanged(nextAsset.key);
+        } else {
+          softSelectFirstVisibleAsset();
+        }
+      }
+      return;
+    }
+    if (e.key === 'Enter') {
+      if (softSelectedAssetKey === null) return;
+      if (selectedAssetKeys.includes(softSelectedAssetKey)) {
+        onAssetUnselected(softSelectedAssetKey);
+      } else {
+        onAssetSelected(softSelectedAssetKey);
+      }
+    }
+  }, [assets, softSelectedAssetKey, onAssetSoftSelectedChanged, selectedAssetKeys, assetGalleryCompactRef]);
+  const handleClick = react.exports.useCallback(() => {
+    onAssetSoftSelectedChanged(null);
+  }, []);
+  react.exports.useEffect(() => {
+    if (softSelectable) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+    return () => document.removeEventListener('keydown', handleKeyPress);
+  }, [softSelectable, handleKeyPress]);
+  react.exports.useEffect(() => {
+    if (softSelectable && softSelectedAssetKey !== null) {
+      document.addEventListener('click', handleClick, true);
+    }
+    return () => document.removeEventListener('click', handleClick, true);
+  }, [softSelectable, softSelectedAssetKey, handleClick]);
+  return React.createElement(React.Fragment, null, React.createElement(AssetGalleryBase$2, _extends({
+    ref: assetGalleryCompactRef,
+    style: {
+      height: `${totalGalleryHeight}px`
+    },
+    className: props.className
+  }, props), assets.map(asset => asset.layout.show && React.createElement(React.Fragment, {
+    key: `asset-gallery-${asset.layout.type}-${asset.key}`
+  }, asset.layout.type === 'groupLabel' && React.createElement(GroupLabel, {
+    style: {
+      transform: `translate3d(${asset.layout.translateX}px,${asset.layout.translateY}px, 0)`,
+      height: `${asset.layout.height}px`
+    }
+  }, asset.title), asset.layout.type === 'asset' && React.createElement(AssetGalleryCardBase, {
+    style: {
+      transform: `translate3d(${asset.layout.translateX}px, ${asset.layout.translateY}px, 0)`,
+      width: `${asset.layout.width}px`,
+      height: `${asset.layout.height}px`,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, viewMode === 'grid' ? React.createElement(AssetGalleryGridCard, {
+    asset: asset,
+    selectable: 'selectable' in asset ? asset.selectable : selectable,
+    selected: selectedAssetKeys.includes(asset.key),
+    extendedSelectMode: Boolean(selectedAssetKeys.length),
+    onAssetSelected: onAssetSelected,
+    onAssetUnselected: onAssetUnselected,
+    softSelected: softSelectedAssetKey === asset.key,
+    component: component
+  }) : React.createElement(AssetGalleryCompactCard, {
+    asset: asset,
+    activeSummaryCard: activeSummaryCard,
+    displayIcon: displayIcon,
+    hasHeightAndWidth: asset.layout.hasHeightAndWidth,
+    collapseExtraInfo: asset.layout.width < 90,
+    selectable: 'selectable' in asset ? asset.selectable : selectable,
+    selected: selectedAssetKeys.includes(asset.key),
+    extendedSelectMode: Boolean(selectedAssetKeys.length),
+    onAssetSelected: onAssetSelected,
+    onAssetUnselected: onAssetUnselected,
+    softSelected: softSelectedAssetKey === asset.key,
+    component: component
+  }))))));
+});
+AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  assets: PropTypes.arrayOf(PropTypes.shape(assetShape)),
+  activeSummaryCard: PropTypes.bool,
+  displayIcon: PropTypes.string,
+  viewMode: PropTypes.oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: PropTypes.number,
+  selectable: PropTypes.bool,
+  selectedAssetKeys: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
+  scrollElement: PropTypes.instanceOf(Element),
+  onAssetSelected: PropTypes.func.isRequired,
+  onAssetUnselected: PropTypes.func.isRequired,
+  softSelectable: PropTypes.bool,
+  softSelectedAssetKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onAssetSoftSelectedChanged: PropTypes.func.isRequired,
+  component: PropTypes.func,
+  className: PropTypes.string
+} : {};
+var AssetGalleryBase$1 = AssetGalleryBase;
+
+export { AssetGalleryBase$1 as default };

package/esm/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryBase.styled.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3;
+const AssetGalleryBase = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  position: relative;
+`));
+const GroupLabel = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+  font-family: ${0};
+  ${0}
+  display: flex;
+  align-items: flex-end;
+  position: absolute;
+  padding-bottom: 4px;
+  box-sizing: border-box;
+`), props => props.theme.primaryFontFamily, props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
+const AssetGalleryCardBase = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  z-index: 1;
+  will-change: transform, width, height;
+
+  &:hover {
+    z-index: 2;
+  }
+`));
+
+export { AssetGalleryBase, AssetGalleryCardBase, GroupLabel };