@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.27

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

@@ -1,31 +0,0 @@
-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

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const AssetActions = styled.div.withConfig({
-  shouldForwardProp
-}).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

@@ -1,102 +0,0 @@
-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", "customSelectedBorder", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "displayIcon"];
-const AssetGallery = React.forwardRef(function AssetGallery(_ref, forwardedRef) {
-  let {
-      assets,
-      activeSummaryCard,
-      viewMode,
-      thumbnailMaxHeight,
-      selectable,
-      customSelectedBorder,
-      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,
-    customSelectedBorder: customSelectedBorder,
-    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,
-  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
-  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: [],
-  customSelectedBorder: [],
-  activeSummaryCard: false,
-  displayIcon: ''
-};
-var AssetGallery$1 = AssetGallery;
-
-export { AssetGallery$1 as default };

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

@@ -1,387 +0,0 @@
-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/lib/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", "customSelectedBorder", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"];
-const AssetGalleryBase = React.forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
-  let {
-      assets: assetsProp,
-      activeSummaryCard,
-      displayIcon,
-      viewMode,
-      thumbnailMaxHeight,
-      selectable,
-      customSelectedBorder,
-      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),
-    customSelectedBorder: customSelectedBorder,
-    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,
-  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
-  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

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const AssetGalleryBase = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)(_t || (_t = _`
-  position: relative;
-`));
-const GroupLabel = styled.div.withConfig({
-  shouldForwardProp
-}).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.withConfig({
-  shouldForwardProp
-}).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 };