@ntbjs/react-components 1.3.0-rc.34 → 1.3.0-rc.35

package/{AssetAction-32d5a090.js → AssetAction-2acf7b52.js}

@@ -155,8 +155,8 @@ var assetShapeWithLayout = defaultTheme._objectSpread2(defaultTheme._objectSprea
   }).isRequired
 });
 
-var _templateObject$4, _templateObject2$4, _templateObject3$4;
-var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$4 || (_templateObject$4 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
+var _templateObject$5, _templateObject2$4, _templateObject3$4;
+var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$5 || (_templateObject$5 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
 var GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2$4 || (_templateObject2$4 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  display: flex;\n  align-items: flex-end;\n  position: absolute;\n  padding-bottom: 4px;\n  box-sizing: border-box;\n"])), function (props) {
   return props.theme.primaryFontFamily;
 }, function (props) {
@@ -182,8 +182,8 @@ var convertMsToHMS = function convertMsToHMS(ms) {
   return hmsString;
 };
 
-var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
-var SummaryCard$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (props) {
+var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
+var SummaryCard$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$4 || (_templateObject$4 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  width: ", ";\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.width ? "".concat(props.width, "px") : '100%';
 }, function (props) {
   return props.compact ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent';
@@ -293,8 +293,8 @@ SummaryCard.defaultProps = {
   activeSummaryCard: false
 };
 
-var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27, _templateObject28, _templateObject29;
-var AssetGalleryWrapper$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
+var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27, _templateObject28, _templateObject29;
+var AssetGalleryWrapper$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$3 || (_templateObject$3 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
   return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
 });
 var Reference = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n"])));
@@ -379,22 +379,27 @@ var StyledFloatingArrow$1 = styled__default["default"](react.FloatingArrow).attr
   return props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'));
 });
 
+var _templateObject$2;
+var AssetActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  display: flex;\n  flex-direction: column;\n  padding: 2px;\n  gap: 8px;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+});
+
 var _excluded$5 = ["actions", "asset"];
 var AssetActionsBase = React__default["default"].forwardRef(function AssetActionsBase(_ref, forwardedRef) {
   var actions = _ref.actions,
     asset = _ref.asset,
     props = defaultTheme._objectWithoutProperties(_ref, _excluded$5);
-  return actions.map(function (action, index) {
-    return React__default["default"].createElement("div", {
-      key: index
-    }, React__default["default"].createElement(AssetAction$1, defaultTheme._extends({
+  var assetActions = actions.map(function (action, index) {
+    return React__default["default"].createElement(AssetAction$1, defaultTheme._extends({
+      key: "index_".concat(action.title),
       ref: forwardedRef
     }, props, {
       action: action,
       asset: asset,
       itemKey: "".concat(index, "-").concat(action.title)
-    })));
+    }));
   });
+  return React__default["default"].createElement(AssetActions, null, assetActions);
 });
 AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
   actions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
@@ -1729,17 +1734,29 @@ AssetGallery.defaultProps = {
 };
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-var AssetAction$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  margin: 3px;\n"])), function (props) {
+var AssetAction$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n"])), function (props) {
   return props.theme.primaryFontFamily;
 });
-var ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 14px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  white-space: nowrap;\n  color: white;\n  ", ";\n"])), function (props) {
-  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'));
+var AssetActionButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);\n  ", ";\n  svg {\n    pointer-events: none;\n    width: ", ";\n    height: ", ";\n    ", ";\n  }\n"])), function (props) {
+  return "".concat(props.actionWidthHeight[0], "px");
+}, function (props) {
+  return "".concat(props.actionWidthHeight[1], "px");
+}, function (props) {
+  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+}, function (props) {
+  return "".concat(props.actionWidthHeight[0] - 14, "px");
+}, function (props) {
+  return "".concat(props.actionWidthHeight[1] - 14, "px");
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
+});
+var ActionTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 14px;\n  border-radius: 4px;\n  padding: 8px 12px;\n  white-space: nowrap;\n  color: white;\n  background: ", ";\n"])), function (props) {
+  return props.theme.getColor('gray-700');
 });
-var StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
-  return props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'));
+var StyledFloatingArrow = styled__default["default"](react.FloatingArrow).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  fill: ", ";\n"])), function (props) {
+  return props.theme.getColor('gray-700');
 });
-var Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
-styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  svg {\n    width: 20px;\n    height: 20px;\n  }\n"])));
+var Floating = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
 
 var _excluded = ["action", "asset", "itemKey"];
 var AssetAction = React__default["default"].forwardRef(function AssetAction(_ref, forwardedRef) {
@@ -1802,19 +1819,15 @@ var AssetAction = React__default["default"].forwardRef(function AssetAction(_ref
   }, [action]);
   return React__default["default"].createElement(AssetAction$2, defaultTheme._extends({
     ref: forwardedRef
-  }, props), React__default["default"].createElement(ActionButton.ActionButton, defaultTheme._extends({
+  }, props), React__default["default"].createElement(AssetActionButton, defaultTheme._extends({
     key: itemKey,
     ref: refs.setReference
   }, getReferenceProps(), {
-    useShadow: true,
-    active: true,
-    icon: action.icon,
-    backgroundColors: ['black', 'white'],
     onClick: function onClick(e) {
       return onActionClick(e, action.onClick(asset), itemKey);
     },
     actionWidthHeight: action.actionWidthHeight
-  })), isOpen && isMounted && React__default["default"].createElement(Floating, defaultTheme._extends({
+  }), action.icon), isOpen && isMounted && React__default["default"].createElement(Floating, defaultTheme._extends({
     className: "floating",
     ref: refs.setFloating,
     style: floatingStyles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.3.0-rc.34",
+  "version": "1.3.0-rc.35",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",

package/widgets/AssetGallery/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var AssetAction = require('../../AssetAction-32d5a090.js');
+var AssetAction = require('../../AssetAction-2acf7b52.js');
 require('../../defaultTheme-cd01e6c2.js');
 require('styled-components');
 require('lodash');

package/widgets/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetAction = require('../AssetAction-32d5a090.js');
+var AssetAction = require('../AssetAction-2acf7b52.js');
 var ContextMenu = require('../ContextMenu-4eb8fdc5.js');
 var AssetPreviewTopBar = require('../AssetPreviewTopBar-f800a63a.js');
 var Instructions = require('../Instructions-52e8f6dd.js');