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

package/cjs/components/widgets/AssetAction/AssetAction.js

@@ -1,106 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../../node_modules/react/index.js');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var AssetAction_styled = require('./AssetAction.styled.js');
-var lodash = require('lodash');
-var react = require('@floating-ui/react');
-var index$1 = require('../../../_virtual/index.js');
-
-const _excluded = ["action", "asset", "itemKey"];
-const AssetAction = index["default"].forwardRef(function AssetAction(_ref, forwardedRef) {
-  let {
-      action,
-      asset,
-      itemKey
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const ARROW_WIDTH = 10;
-  const ARROW_HEIGHT = 5;
-  const GAP = 3;
-  const arrowRef = index$1.react.exports.useRef(null);
-  const [isOpen, setIsOpen] = index$1.react.exports.useState(false);
-  const [placement] = index$1.react.exports.useState('bottom');
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = react.useFloating({
-    placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: react.autoUpdate,
-    middleware: [react.offset(ARROW_HEIGHT + GAP), react.flip({
-      padding: 5
-    }), react.shift({
-      padding: 5
-    }), react.arrow({
-      element: arrowRef
-    })]
-  });
-  const {
-    isMounted,
-    styles
-  } = react.useTransitionStyles(context, {
-    initial: {
-      transform: 'translateY(-8px)',
-      opacity: 0
-    },
-    duration: {
-      open: 200,
-      close: 100
-    }
-  });
-  const hover = react.useHover(context);
-  const dismiss = react.useDismiss(context, {
-    referencePress: true
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = react.useInteractions([dismiss, hover]);
-  const onActionClick = index$1.react.exports.useCallback((e, action) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (lodash.isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
-      action.onClick(asset);
-    }
-  }, [action]);
-  return index["default"].createElement(AssetAction_styled.AssetAction, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef
-  }, props), index["default"].createElement(AssetAction_styled.AssetActionButton, _rollupPluginBabelHelpers["extends"]({
-    key: itemKey,
-    ref: refs.setReference
-  }, getReferenceProps(), {
-    onClick: e => onActionClick(e, action.onClick(asset), itemKey),
-    $actionWidthHeight: action.actionWidthHeight
-  }), action.icon), isOpen && isMounted && index["default"].createElement(AssetAction_styled.Floating, _rollupPluginBabelHelpers["extends"]({
-    className: "floating",
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, getFloatingProps()), index["default"].createElement(AssetAction_styled.ActionTitle, {
-    style: styles
-  }, action.title), index["default"].createElement(AssetAction_styled.StyledFloatingArrow, {
-    ref: arrowRef,
-    context: context,
-    width: ARROW_WIDTH,
-    height: ARROW_HEIGHT
-  })));
-});
-AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
-  action: index$2["default"].shape({
-    icon: index$2["default"].node,
-    onClick: index$2["default"].func,
-    actionWidthHeight: index$2["default"].arrayOf(index$2["default"].number),
-    title: index$2["default"].string
-  }),
-  asset: index$2["default"].object,
-  itemKey: index$2["default"].string
-} : {};
-AssetAction.defaultProps = {};
-var AssetAction$1 = AssetAction;
-
-exports["default"] = AssetAction$1;

package/cjs/components/widgets/AssetAction/AssetAction.styled.js

@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-var react = require('@floating-ui/react');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const AssetAction = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-`), props => props.theme.primaryFontFamily);
-const AssetActionButton = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
-  border-radius: 50%;
-  width: ${0};
-  height: ${0};
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  ${0};
-  svg {
-    pointer-events: none;
-    width: ${0};
-    height: ${0};
-    ${0};
-  }
-`), props => props.$actionWidthHeight ? `${props.$actionWidthHeight[0]}px` : 'auto', props => props.$actionWidthHeight ? `${props.$actionWidthHeight[1]}px` : 'auto', props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white')), props => props.$actionWidthHeightactionWidthHeight ? `${props.$actionWidthHeight[0] - 14}px` : 'auto', props => props.$actionWidthHeight ? `${props.$actionWidthHeight[1] - 14}px` : 'auto', props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white')));
-const ActionTitle = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
-  font-size: 14px;
-  border-radius: 4px;
-  padding: 8px 12px;
-  white-space: nowrap;
-  color: white;
-  background: ${0};
-`), props => props.theme.getColor('gray-700'));
-const StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
-  fill: ${0};
-`), props => props.theme.getColor('gray-700'));
-const Floating = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
-  pointer-events: none;
-`));
-
-exports.ActionTitle = ActionTitle;
-exports.AssetAction = AssetAction;
-exports.AssetActionButton = AssetActionButton;
-exports.Floating = Floating;
-exports.StyledFloatingArrow = StyledFloatingArrow;

package/cjs/components/widgets/AssetActionsBase/AssetActionsBase.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../../node_modules/react/index.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var AssetActionsBase_styled = require('./AssetActionsBase.styled.js');
-var AssetAction = require('../AssetAction/AssetAction.js');
-
-const _excluded = ["actions", "asset"];
-const AssetActionsBase = index["default"].forwardRef(function AssetActionsBase(_ref, forwardedRef) {
-  let {
-      actions,
-      asset
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const assetActions = actions.map((action, index$1) => index["default"].createElement(AssetAction["default"], _rollupPluginBabelHelpers["extends"]({
-    key: `index_${action.title}`,
-    ref: forwardedRef
-  }, props, {
-    action: action,
-    asset: asset,
-    itemKey: `${index$1}-${action.title}`
-  })));
-  return index["default"].createElement(AssetActionsBase_styled.AssetActions, null, assetActions);
-});
-AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
-  actions: index$1["default"].arrayOf(index$1["default"].object),
-  asset: index$1["default"].object
-} : {};
-AssetActionsBase.defaultProps = {};
-var AssetActionsBase$1 = AssetActionsBase;
-
-exports["default"] = AssetActionsBase$1;

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

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const AssetActions = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.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);
-
-exports.AssetActions = AssetActions;

package/cjs/components/widgets/AssetGallery/AssetGallery.js

@@ -1,106 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var lodash = require('lodash');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var asset_propType = require('./asset.propType.js');
-var AssetGalleryBase = require('./AssetGalleryBase/AssetGalleryBase.js');
-var index$1 = require('../../../_virtual/index.js');
-
-const _excluded = ["assets", "activeSummaryCard", "viewMode", "thumbnailMaxHeight", "selectable", "customSelectedBorder", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "scrollElement", "onSoftSelectedChanged", "component", "displayIcon"];
-const AssetGallery = index["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
-  let {
-      assets,
-      activeSummaryCard,
-      viewMode,
-      thumbnailMaxHeight,
-      selectable,
-      customSelectedBorder,
-      selectedAssetKeys,
-      onSelectedChanged,
-      softSelectable,
-      scrollElement,
-      onSoftSelectedChanged,
-      component,
-      displayIcon
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const [selectedAssetKeysInternalState, setSelectedAssetKeysInternalState] = index$1.react.exports.useState(selectedAssetKeys || []);
-  const [softSelectedAssetKeyInternalState, setSoftSelectedAssetKeyInternalState] = index$1.react.exports.useState(null);
-  index$1.react.exports.useEffect(() => {
-    setSelectedAssetKeysInternalState(selectedAssetKeys || []);
-  }, [selectedAssetKeys]);
-  index$1.react.exports.useEffect(() => {
-    setSelectedAssetKeysInternalState(current => {
-      return current.filter(c => assets.some(a => a.key === c));
-    });
-  }, [assets.length]);
-  index$1.react.exports.useEffect(() => {
-    if (selectedAssetKeys === selectedAssetKeysInternalState) return;
-    if (lodash.isFunction(onSelectedChanged)) {
-      onSelectedChanged(selectedAssetKeysInternalState);
-    }
-  }, [selectedAssetKeysInternalState]);
-  index$1.react.exports.useEffect(() => {
-    if (lodash.isFunction(onSoftSelectedChanged)) {
-      onSoftSelectedChanged(softSelectedAssetKeyInternalState);
-    }
-  }, [softSelectedAssetKeyInternalState]);
-  const onSelected = index$1.react.exports.useCallback(assetKey => {
-    setSelectedAssetKeysInternalState(currentState => [...currentState, assetKey]);
-  }, []);
-  const onUnselected = index$1.react.exports.useCallback(assetKey => {
-    setSelectedAssetKeysInternalState(currentState => currentState.filter(filteredAssetKey => filteredAssetKey !== assetKey));
-  }, []);
-  const onAssetSoftSelectedChanged = index$1.react.exports.useCallback((assetKey = null) => {
-    setSoftSelectedAssetKeyInternalState(assetKey);
-  }, []);
-  return index["default"].createElement(AssetGalleryBase["default"], _rollupPluginBabelHelpers["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: index$2["default"].arrayOf(index$2["default"].shape(asset_propType.assetShape)),
-  displayIcon: index$2["default"].string,
-  activeSummaryCard: index$2["default"].bool,
-  viewMode: index$2["default"].oneOf(['compact', 'grid']),
-  thumbnailMaxHeight: index$2["default"].number,
-  selectable: index$2["default"].bool,
-  customSelectedBorder: index$2["default"].arrayOf(index$2["default"].string),
-  selectedAssetKeys: index$2["default"].oneOfType([index$2["default"].arrayOf(index$2["default"].string), index$2["default"].arrayOf(index$2["default"].number)]),
-  onSelectedChanged: index$2["default"].func,
-  softSelectable: index$2["default"].bool,
-  scrollElement: index$2["default"].instanceOf(Element),
-  onSoftSelectedChanged: index$2["default"].func,
-  component: index$2["default"].func
-} : {};
-AssetGallery.defaultProps = {
-  assets: [],
-  viewMode: 'compact',
-  thumbnailMaxHeight: 300,
-  selectedAssetKeys: [],
-  customSelectedBorder: [],
-  activeSummaryCard: false,
-  displayIcon: ''
-};
-var AssetGallery$1 = AssetGallery;
-
-exports["default"] = AssetGallery$1;