@vidispine/vdt-materialui 22.3.0-pre.1 → 22.3.0-pre.2

package/dist/index.es.js

@@ -47,7 +47,7 @@ import Paper from '@material-ui/core/Paper';
 import { parseFacetType, parseNowDate, formatSeconds, roles, parseShapeType, parseTranscodePreset, parseTimespan, formatTimeBase, formatSmpte, createMetadataType, formatTimeCodeText, formatTimeCodeType, parseMetadataType, parseAudioComponent, parseContainerComponent, parseVideoComponent, parseSimpleMetadataType, findNearestThumbnail, parseHighlightTimespanList, metadataTypeToWebVtt, filterShapeSource, getShapeMediaType, getDocumentType } from '@vidispine/vdt-js';
 import IconButton from '@material-ui/core/IconButton';
 import CancelIcon from '@material-ui/icons/Cancel';
-import { Cancel, CheckCircle, Replay, ExpandLess, Label, Search, Delete, Block, ExpandMore, Folder, Wallpaper, Add, Visibility as Visibility$1, VisibilityOff as VisibilityOff$1 } from '@material-ui/icons';
+import { Cancel, CheckCircle, Replay, ExpandLess, Label, Search, Delete, Block, ExpandMore, Folder, ArrowDropUp, ArrowDropDown, Wallpaper, Add, Visibility as Visibility$1, VisibilityOff as VisibilityOff$1 } from '@material-ui/icons';
 import moment from 'moment';
 import { red, green, grey as grey$1 } from '@material-ui/core/colors';
 import Chip$1 from '@material-ui/core/Chip';
@@ -9274,7 +9274,8 @@ var toCapsCase$1 = function toCapsCase(string) {
 function EntityAccessMenu(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? 'VdtEntityAccessMenu-root' : _ref$className,
-      classes = _ref.classes,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       onRemove = _ref.onRemove,
       accessType = _ref.accessType,
       entityType = _ref.entityType,
@@ -20625,6 +20626,8 @@ function SearchInput(_ref2) {
       onChange = _ref2.onChange,
       SuggestionsComponent = _ref2.SuggestionsComponent,
       SuggestionsProps = _ref2.SuggestionsProps,
+      TopSearchesComponent = _ref2.TopSearchesComponent,
+      TopSearchesProps = _ref2.TopSearchesProps,
       ButtonProps = _ref2.ButtonProps,
       InputBaseProps = _ref2.InputBaseProps,
       SearchIconComponent = _ref2.SearchIconComponent,
@@ -20645,6 +20648,12 @@ function SearchInput(_ref2) {
       canClear = _useState6[0],
       setCanClear = _useState6[1];
 
+  useEffect(function () {
+    if (defaultValue !== '') {
+      setCanClear(true);
+    }
+  }, [defaultValue]);
+
   var handleOnChange = function handleOnChange(val) {
     onChange(val);
     setCanClear(inputRef.current.value.length > 0);
@@ -20682,7 +20691,17 @@ function SearchInput(_ref2) {
       anchorEl = _useState8[0],
       setAnchorEl = _useState8[1];
 
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isTopSearchesOpen = _useState10[0],
+      setIsTopSearchesOpen = _useState10[1];
+
   var suggestionsVisible = Boolean(anchorEl) && isFocused && canClear;
+  var topSearchesVisible = Boolean(anchorEl) && isTopSearchesOpen;
+
+  var onOpenTopSearch = function onOpenTopSearch() {
+    setIsTopSearchesOpen(!isTopSearchesOpen);
+  };
 
   var _useSuggestionsNaviga = useSuggestionsNavigation({
     suggestions: suggestions,
@@ -20719,6 +20738,16 @@ function SearchInput(_ref2) {
         children: [/*#__PURE__*/jsx(CloseIconComponent, {
           className: canClear ? classes.closeButton : classes.closeButtonHidden,
           onClick: onClear
+        }), TopSearchesComponent && /*#__PURE__*/jsx(IconButton$1, {
+          onClick: onOpenTopSearch,
+          style: {
+            borderRadius: '50%'
+          },
+          children: topSearchesVisible ? /*#__PURE__*/jsx(ArrowDropUp, {
+            fontSize: "small"
+          }) : /*#__PURE__*/jsx(ArrowDropDown, {
+            fontSize: "small"
+          })
         }), /*#__PURE__*/jsx(Button$1, _objectSpread$1w(_objectSpread$1w({
           size: "small",
           type: "submit",
@@ -20741,7 +20770,9 @@ function SearchInput(_ref2) {
       onHover: onHoverSuggestion,
       focused: focusedSuggestion,
       anchorEl: anchorEl
-    }, SuggestionsProps))]
+    }, SuggestionsProps)), topSearchesVisible && TopSearchesComponent && /*#__PURE__*/jsx(TopSearchesComponent, _objectSpread$1w({
+      anchorEl: anchorEl
+    }, TopSearchesProps))]
   });
 }
 SearchInput.propTypes = {
@@ -20758,6 +20789,8 @@ SearchInput.propTypes = {
   onChange: PropTypes$1.func,
   SuggestionsComponent: PropTypes$1.elementType,
   SuggestionsProps: PropTypes$1.objectOf(PropTypes$1.any),
+  TopSearchesComponent: PropTypes$1.elementType,
+  TopSearchesProps: PropTypes$1.objectOf(PropTypes$1.any),
   ButtonProps: PropTypes$1.objectOf(PropTypes$1.any),
   InputBaseProps: PropTypes$1.objectOf(PropTypes$1.any),
   SearchIconComponent: PropTypes$1.elementType,
@@ -20779,6 +20812,8 @@ SearchInput.defaultProps = {
   onChange: function onChange() {},
   SuggestionsComponent: null,
   SuggestionsProps: {},
+  TopSearchesComponent: null,
+  TopSearchesProps: {},
   ButtonProps: {},
   InputBaseProps: {},
   SearchIconComponent: SearchIcon,
@@ -28750,6 +28785,7 @@ var styles$10 = function styles(theme) {
     disabled: {
       opacity: 1
     },
+    menuContext: {},
     menuExpand: {
       minWidth: theme.breakpoints.values.sm / 2
     },
@@ -28782,6 +28818,8 @@ function SavedSearchRow(_ref) {
       disableDeletion = _ref.disableDeletion,
       type = _ref.type,
       accessTranslate = _ref.accessTranslate,
+      _ref$extraMenuItems = _ref.extraMenuItems,
+      extraMenuItems = _ref$extraMenuItems === void 0 ? [] : _ref$extraMenuItems,
       _ref$isFolderRow = _ref.isFolderRow,
       isFolderRow = _ref$isFolderRow === void 0 ? false : _ref$isFolderRow,
       _ref$hideSubFolderSha = _ref.hideSubFolderSharing,
@@ -29074,7 +29112,17 @@ function SavedSearchRow(_ref) {
           }) : null, /*#__PURE__*/jsx(ListItemText, {
             primary: deleteText
           })]
-        }, 6)]
+        }, 6), extraMenuItems.map(function (item) {
+          return /*#__PURE__*/jsxs(MenuItem, {
+            dense: true,
+            onClick: item["function"],
+            children: [/*#__PURE__*/jsx(ListItemIcon$1, {
+              children: /*#__PURE__*/jsx(item.icon, {})
+            }), /*#__PURE__*/jsx(ListItemText, {
+              primary: item.name
+            })]
+          });
+        })]
       })
     }), /*#__PURE__*/jsx(Popover, {
       open: expandedView !== null,
@@ -29121,7 +29169,7 @@ var SavedSearchRow$1 = withStyles(styles$10, {
   name: 'VdtSavedSearchRow'
 })(SavedSearchRow);
 
-var _excluded$t = ["searchProps", "searchPlaceholderText", "onSelect", "onDelete", "onUpdateSearchMetadata", "RowComponent", "RowProps", "accessTranslate"];
+var _excluded$t = ["searchProps", "searchPlaceholderText", "onSelect", "onDelete", "onUpdateSearchMetadata", "RowComponent", "RowProps", "accessTranslate", "extraMenuItems"];
 
 function ownKeys$V(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -29140,6 +29188,7 @@ function SavedSearchList(_ref) {
       _ref$RowProps = _ref.RowProps,
       RowProps = _ref$RowProps === void 0 ? {} : _ref$RowProps,
       accessTranslate = _ref.accessTranslate,
+      extraMenuItems = _ref.extraMenuItems,
       props = _objectWithoutProperties(_ref, _excluded$t);
 
   return /*#__PURE__*/jsx(Component$A, _objectSpread$V({
@@ -29170,7 +29219,8 @@ function SavedSearchList(_ref) {
                 metadataDocument: metadataDocument
               }).then(onRefresh));
             },
-            accessTranslate: accessTranslate
+            accessTranslate: accessTranslate,
+            extraMenuItems: extraMenuItems
           }, RowProps), collectionType.id);
         })
       });
@@ -29290,7 +29340,8 @@ function SavedSearch(_ref) {
       SearchFormComponent = _ref$SearchFormCompon === void 0 ? SaveSearchForm$1 : _ref$SearchFormCompon,
       _ref$SearchFormProps = _ref.SearchFormProps,
       SearchFormProps = _ref$SearchFormProps === void 0 ? {} : _ref$SearchFormProps,
-      accessTranslate = _ref.accessTranslate;
+      accessTranslate = _ref.accessTranslate,
+      extraMenuItems = _ref.extraMenuItems;
 
   var _useSavedSearch = useSavedSearch({
     markerField: markerField,
@@ -29326,7 +29377,8 @@ function SavedSearch(_ref) {
       onDelete: onDeleteSearch,
       onUpdateSearchMetadata: onUpdateSearchMetadata,
       searchProps: searchProps,
-      accessTranslate: accessTranslate
+      accessTranslate: accessTranslate,
+      extraMenuItems: extraMenuItems
     }, SearchListProps))]
   });
 }

package/dist/index.js

@@ -9463,7 +9463,8 @@ var toCapsCase$1 = function toCapsCase(string) {
 function EntityAccessMenu(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? 'VdtEntityAccessMenu-root' : _ref$className,
-      classes = _ref.classes,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
       onRemove = _ref.onRemove,
       accessType = _ref.accessType,
       entityType = _ref.entityType,
@@ -20814,6 +20815,8 @@ function SearchInput(_ref2) {
       onChange = _ref2.onChange,
       SuggestionsComponent = _ref2.SuggestionsComponent,
       SuggestionsProps = _ref2.SuggestionsProps,
+      TopSearchesComponent = _ref2.TopSearchesComponent,
+      TopSearchesProps = _ref2.TopSearchesProps,
       ButtonProps = _ref2.ButtonProps,
       InputBaseProps = _ref2.InputBaseProps,
       SearchIconComponent = _ref2.SearchIconComponent,
@@ -20834,6 +20837,12 @@ function SearchInput(_ref2) {
       canClear = _useState6[0],
       setCanClear = _useState6[1];
 
+  React.useEffect(function () {
+    if (defaultValue !== '') {
+      setCanClear(true);
+    }
+  }, [defaultValue]);
+
   var handleOnChange = function handleOnChange(val) {
     onChange(val);
     setCanClear(inputRef.current.value.length > 0);
@@ -20871,7 +20880,17 @@ function SearchInput(_ref2) {
       anchorEl = _useState8[0],
       setAnchorEl = _useState8[1];
 
+  var _useState9 = React.useState(false),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
+      isTopSearchesOpen = _useState10[0],
+      setIsTopSearchesOpen = _useState10[1];
+
   var suggestionsVisible = Boolean(anchorEl) && isFocused && canClear;
+  var topSearchesVisible = Boolean(anchorEl) && isTopSearchesOpen;
+
+  var onOpenTopSearch = function onOpenTopSearch() {
+    setIsTopSearchesOpen(!isTopSearchesOpen);
+  };
 
   var _useSuggestionsNaviga = useSuggestionsNavigation({
     suggestions: suggestions,
@@ -20908,6 +20927,16 @@ function SearchInput(_ref2) {
         children: [/*#__PURE__*/jsxRuntime.jsx(CloseIconComponent, {
           className: canClear ? classes.closeButton : classes.closeButtonHidden,
           onClick: onClear
+        }), TopSearchesComponent && /*#__PURE__*/jsxRuntime.jsx(core.IconButton, {
+          onClick: onOpenTopSearch,
+          style: {
+            borderRadius: '50%'
+          },
+          children: topSearchesVisible ? /*#__PURE__*/jsxRuntime.jsx(icons.ArrowDropUp, {
+            fontSize: "small"
+          }) : /*#__PURE__*/jsxRuntime.jsx(icons.ArrowDropDown, {
+            fontSize: "small"
+          })
         }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], _objectSpread$1w(_objectSpread$1w({
           size: "small",
           type: "submit",
@@ -20930,7 +20959,9 @@ function SearchInput(_ref2) {
       onHover: onHoverSuggestion,
       focused: focusedSuggestion,
       anchorEl: anchorEl
-    }, SuggestionsProps))]
+    }, SuggestionsProps)), topSearchesVisible && TopSearchesComponent && /*#__PURE__*/jsxRuntime.jsx(TopSearchesComponent, _objectSpread$1w({
+      anchorEl: anchorEl
+    }, TopSearchesProps))]
   });
 }
 SearchInput.propTypes = {
@@ -20947,6 +20978,8 @@ SearchInput.propTypes = {
   onChange: PropTypes$1.func,
   SuggestionsComponent: PropTypes$1.elementType,
   SuggestionsProps: PropTypes$1.objectOf(PropTypes$1.any),
+  TopSearchesComponent: PropTypes$1.elementType,
+  TopSearchesProps: PropTypes$1.objectOf(PropTypes$1.any),
   ButtonProps: PropTypes$1.objectOf(PropTypes$1.any),
   InputBaseProps: PropTypes$1.objectOf(PropTypes$1.any),
   SearchIconComponent: PropTypes$1.elementType,
@@ -20968,6 +21001,8 @@ SearchInput.defaultProps = {
   onChange: function onChange() {},
   SuggestionsComponent: null,
   SuggestionsProps: {},
+  TopSearchesComponent: null,
+  TopSearchesProps: {},
   ButtonProps: {},
   InputBaseProps: {},
   SearchIconComponent: SearchIcon__default["default"],
@@ -28939,6 +28974,7 @@ var styles$10 = function styles(theme) {
     disabled: {
       opacity: 1
     },
+    menuContext: {},
     menuExpand: {
       minWidth: theme.breakpoints.values.sm / 2
     },
@@ -28971,6 +29007,8 @@ function SavedSearchRow(_ref) {
       disableDeletion = _ref.disableDeletion,
       type = _ref.type,
       accessTranslate = _ref.accessTranslate,
+      _ref$extraMenuItems = _ref.extraMenuItems,
+      extraMenuItems = _ref$extraMenuItems === void 0 ? [] : _ref$extraMenuItems,
       _ref$isFolderRow = _ref.isFolderRow,
       isFolderRow = _ref$isFolderRow === void 0 ? false : _ref$isFolderRow,
       _ref$hideSubFolderSha = _ref.hideSubFolderSharing,
@@ -29263,7 +29301,17 @@ function SavedSearchRow(_ref) {
           }) : null, /*#__PURE__*/jsxRuntime.jsx(ListItemText__default["default"], {
             primary: deleteText
           })]
-        }, 6)]
+        }, 6), extraMenuItems.map(function (item) {
+          return /*#__PURE__*/jsxRuntime.jsxs(MenuItem__default["default"], {
+            dense: true,
+            onClick: item["function"],
+            children: [/*#__PURE__*/jsxRuntime.jsx(ListItemIcon__default["default"], {
+              children: /*#__PURE__*/jsxRuntime.jsx(item.icon, {})
+            }), /*#__PURE__*/jsxRuntime.jsx(ListItemText__default["default"], {
+              primary: item.name
+            })]
+          });
+        })]
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Popover__default["default"], {
       open: expandedView !== null,
@@ -29310,7 +29358,7 @@ var SavedSearchRow$1 = styles$2B.withStyles(styles$10, {
   name: 'VdtSavedSearchRow'
 })(SavedSearchRow);
 
-var _excluded$t = ["searchProps", "searchPlaceholderText", "onSelect", "onDelete", "onUpdateSearchMetadata", "RowComponent", "RowProps", "accessTranslate"];
+var _excluded$t = ["searchProps", "searchPlaceholderText", "onSelect", "onDelete", "onUpdateSearchMetadata", "RowComponent", "RowProps", "accessTranslate", "extraMenuItems"];
 
 function ownKeys$V(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -29329,6 +29377,7 @@ function SavedSearchList(_ref) {
       _ref$RowProps = _ref.RowProps,
       RowProps = _ref$RowProps === void 0 ? {} : _ref$RowProps,
       accessTranslate = _ref.accessTranslate,
+      extraMenuItems = _ref.extraMenuItems,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$t);
 
   return /*#__PURE__*/jsxRuntime.jsx(Component$A, _objectSpread$V({
@@ -29359,7 +29408,8 @@ function SavedSearchList(_ref) {
                 metadataDocument: metadataDocument
               }).then(onRefresh));
             },
-            accessTranslate: accessTranslate
+            accessTranslate: accessTranslate,
+            extraMenuItems: extraMenuItems
           }, RowProps), collectionType.id);
         })
       });
@@ -29479,7 +29529,8 @@ function SavedSearch(_ref) {
       SearchFormComponent = _ref$SearchFormCompon === void 0 ? SaveSearchForm$1 : _ref$SearchFormCompon,
       _ref$SearchFormProps = _ref.SearchFormProps,
       SearchFormProps = _ref$SearchFormProps === void 0 ? {} : _ref$SearchFormProps,
-      accessTranslate = _ref.accessTranslate;
+      accessTranslate = _ref.accessTranslate,
+      extraMenuItems = _ref.extraMenuItems;
 
   var _useSavedSearch = vdtReact.useSavedSearch({
     markerField: markerField,
@@ -29515,7 +29566,8 @@ function SavedSearch(_ref) {
       onDelete: onDeleteSearch,
       onUpdateSearchMetadata: onUpdateSearchMetadata,
       searchProps: searchProps,
-      accessTranslate: accessTranslate
+      accessTranslate: accessTranslate,
+      extraMenuItems: extraMenuItems
     }, SearchListProps))]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-materialui",
-  "version": "22.3.0-pre.1",
+  "version": "22.3.0-pre.2",
   "license": "SEE LICENSE IN LICENSE.md",
   "private": false,
   "publishConfig": {
@@ -27,10 +27,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.0",
-    "@vidispine/vdt-api": "22.3.0-pre.1",
-    "@vidispine/vdt-js": "22.3.0-pre.1",
-    "@vidispine/vdt-react": "22.3.0-pre.1",
-    "@vidispine/vdt-videojs-react": "22.3.0-pre.1",
+    "@vidispine/vdt-api": "22.3.0-pre.2",
+    "@vidispine/vdt-js": "22.3.0-pre.2",
+    "@vidispine/vdt-react": "22.3.0-pre.2",
+    "@vidispine/vdt-videojs-react": "22.3.0-pre.2",
     "clsx": "^1.1.1",
     "core-js": "^3.8.3",
     "filesize": "^6.1.0",
@@ -72,10 +72,10 @@
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@svgr/rollup": "^6.2.1",
-    "@vidispine/eslint-config-react": "22.3.0-pre.1",
-    "@vidispine/eslint-config-storybook": "22.3.0-pre.1",
-    "@vidispine/prettier-config": "22.3.0-pre.1",
-    "@vidispine/proptypes": "22.3.0-pre.1",
+    "@vidispine/eslint-config-react": "22.3.0-pre.2",
+    "@vidispine/eslint-config-storybook": "22.3.0-pre.2",
+    "@vidispine/prettier-config": "22.3.0-pre.2",
+    "@vidispine/proptypes": "22.3.0-pre.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "axios-mock-adapter": "^1.20.0",
     "enzyme": "^3.11.0",
@@ -110,5 +110,5 @@
     }
   },
   "prettier": "@vidispine/prettier-config",
-  "gitHead": "37102605aa7e42295e697e9157143bc6363c55f2"
+  "gitHead": "ff7ae2bb82262231c53eb1438e5e171f051303d8"
 }