@seafile/seafile-database 0.0.24 → 0.0.26

package/dist/components/popover/groupbys-popover/index.js

@@ -11,7 +11,7 @@ var _reactstrap = require("reactstrap");
 var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _customizeAddTool = _interopRequireDefault(require("../../../common/components/customize-add-tool"));
 var _dom = require("../../../common/utils/dom");
-var _appContext = require("../../../hooks/app-context");
+var _hooks = require("../../../hooks");
 var _translate = _interopRequireDefault(require("../../../lang/translate"));
 var _constants = require("../../../constants");
 var _group = require("../../../utils/group");
@@ -29,7 +29,7 @@ const GroupbysPopover = _ref => {
   } = _ref;
   const {
     context
-  } = (0, _appContext.useAppContext)();
+  } = (0, _hooks.useFileViewContext)();
   const [groupbys, setGroupbys] = (0, _react.useState)(propsGroupBys);
   const [isChanged, setChanged] = (0, _react.useState)(false);
   const isSelectOpenRef = (0, _react.useState)(false);
@@ -66,7 +66,7 @@ const GroupbysPopover = _ref => {
       document.removeEventListener('keydown', onHotKey);
       unsubscribeOpenSelect();
     };
-  }, [hide, onHotKey, setSelectStatus]);
+  }, [context.eventBus, hide, onHotKey, setSelectStatus]);
   const updateGroups = (0, _react.useCallback)(newGroupBys => {
     setChanged(true);
     setGroupbys(newGroupBys);
@@ -98,10 +98,10 @@ const GroupbysPopover = _ref => {
   }, [groupbys, updateGroups]);
   const hideAllGroups = (0, _react.useCallback)(() => {
     context.eventBus.dispatch(_constants.EVENT_BUS_TYPE.COLLAPSE_ALL_GROUPS);
-  }, []);
+  }, [context.eventBus]);
   const showAllGroups = (0, _react.useCallback)(() => {
     context.eventBus.dispatch(_constants.EVENT_BUS_TYPE.EXPAND_ALL_GROUPS);
-  }, []);
+  }, [context.eventBus]);
   const onPopoverInsideClick = (0, _react.useCallback)(event => {
     event.stopPropagation();
   }, []);

package/dist/components/popover/index.js

@@ -52,6 +52,12 @@ Object.defineProperty(exports, "SortPopover", {
     return _sortPopover.default;
   }
 });
+Object.defineProperty(exports, "ViewTypePopover", {
+  enumerable: true,
+  get: function () {
+    return _viewTypePopover.default;
+  }
+});
 var _columnPopover = _interopRequireDefault(require("./column-popover"));
 var _filterPopover = _interopRequireDefault(require("./filter-popover"));
 var _groupbysPopover = _interopRequireDefault(require("./groupbys-popover"));
@@ -60,4 +66,5 @@ var _optionsPopover = _interopRequireDefault(require("./options-popover"));
 var _renamePopover = _interopRequireDefault(require("./rename-popover"));
 var _rowHeightPopover = _interopRequireDefault(require("./row-height-popover"));
 var _sortPopover = _interopRequireDefault(require("./sort-popover"));
+var _viewTypePopover = _interopRequireDefault(require("./view-type-popover"));
 require("./index.css");

package/dist/components/popover/settings-popover/field-display-settings/field-item.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _switch = _interopRequireDefault(require("../../../../common/components/switch"));
+var _icons = _interopRequireDefault(require("../../../icons"));
+function FieldItem(_ref) {
+  let {
+    field,
+    index,
+    onToggleField,
+    onMoveField,
+    fieldIconConfig,
+    updateDragOverKey,
+    dragOverColumnKey,
+    draggingColumnIndex,
+    updateDraggingKey
+  } = _ref;
+  let enteredCounter = 0;
+  const fieldItemRef = (0, _react.useRef)(null);
+  const [isItemDropTipShow, setDropTipShow] = (0, _react.useState)(false);
+  const handleClickField = e => {
+    e.nativeEvent.stopImmediatePropagation();
+    const value = e.target.checked;
+    if (value === field.shown) return;
+    onToggleField(field.key, value);
+  };
+  const onDragStart = e => {
+    e.stopPropagation();
+    e.dataTransfer.setDragImage(fieldItemRef.current, 10, 10);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('application/sf-metadata-field-display-setting', field.key);
+    updateDraggingKey(field.key);
+  };
+  const onDragEnter = e => {
+    e.stopPropagation();
+    enteredCounter++;
+    if (enteredCounter !== 0 && !isItemDropTipShow) {
+      setDropTipShow(true);
+    }
+    updateDragOverKey(field.key);
+  };
+  const onDragOver = e => {
+    if (e.dataTransfer.dropEffect === 'copy') {
+      return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    updateDragOverKey(field.key);
+  };
+  const onDragLeave = e => {
+    e.stopPropagation();
+    enteredCounter--;
+    if (enteredCounter === 0) {
+      setDropTipShow(false);
+    }
+    updateDragOverKey(null);
+  };
+  const onDrop = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    setDropTipShow(false);
+    const droppedColumnKey = e.dataTransfer.getData('application/sf-metadata-field-display-setting');
+    if (droppedColumnKey === field.key) return;
+    onMoveField(droppedColumnKey, field.key);
+    updateDragOverKey(null);
+    updateDraggingKey(null);
+  };
+  const placeholder = () => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "sf-metadata-field-display-setting-switch"
+    }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+      symbol: fieldIconConfig[field.type]
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "text-truncate"
+    }, field.name));
+  };
+  const isOver = dragOverColumnKey === field.key;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: fieldItemRef,
+    className: (0, _classnames.default)('sf-metadata-field-display-setting-item-container', {
+      'hide-column-can-drop-top': isOver && draggingColumnIndex >= index
+    }, {
+      'hide-column-can-drop': isOver && draggingColumnIndex < index
+    }),
+    onDrop: onDrop,
+    onDragEnter: onDragEnter,
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-field-display-setting-dragbar",
+    draggable: "true",
+    onDragStart: onDragStart
+  }, /*#__PURE__*/_react.default.createElement(_icons.default, {
+    symbol: "drag"
+  })), /*#__PURE__*/_react.default.createElement(_switch.default, {
+    checked: field.shown,
+    className: "sf-metadata-switch flex-fill",
+    placeholder: placeholder(),
+    onChange: handleClickField
+  }));
+}
+var _default = exports.default = FieldItem;

package/dist/components/popover/settings-popover/field-display-settings/index.css

@@ -0,0 +1,135 @@
+.sea-metadata-field-display-popover .popover {
+  width: 300px;
+}
+
+.sf-metadata-field-display-setting {
+  padding: 8px 0;
+}
+
+.sf-metadata-field-display-setting .sf-metadata-field-display-setting-header .sf-metadata-field-display-toggle-btn {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ccc;
+  cursor: pointer;
+  transition: transform .3s cubic-bezier(.645, .045, .355, 1);
+}
+
+.sf-metadata-field-display-setting .sf-metadata-field-display-setting-header .sf-metadata-field-display-toggle-btn:hover {
+  border-radius: 3px;
+  background-color: var(--bs-hover-bg);
+  color: var(--bs-icon-color);
+  cursor: pointer;
+}
+
+.sf-metadata-field-display-setting .sf-metadata-field-display-setting-header .sf-metadata-field-display-toggle-btn .seafile-multicolor-icon-down {
+  width: 12px;
+  height: 12px;
+}
+
+.sf-metadata-field-display-setting .sf-metadata-field-display-setting-body .sf-metadata-field-display-setting-item-container {
+  position: relative;
+  display: flex;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 4px;
+  padding: 0 14px 0 12px;
+}
+
+.sf-metadata-field-display-setting .sf-metadata-field-display-setting-body .sf-metadata-field-display-setting-item-container:hover {
+  background-color: var(--bs-nav-hover-bg);
+}
+
+.sf-metadata-field-display-setting .sf-metadata-field-display-setting-body .sf-metadata-field-display-setting-dragbar {
+  color: #c2c2c2;
+  cursor: grab;
+  margin-right: 8px;
+}
+
+.sf-metadata-field-display-setting .sf-metadata-field-display-setting-body .sf-metadata-field-display-setting-dragbar .seafile-multicolor-icon-drag {
+  vertical-align: -0.15em;
+}
+
+.sf-metadata-field-display-setting-item-container .sf-metadata-switch .custom-switch {
+  width: 100%;
+  padding-left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sf-metadata-field-display-setting-item-container .sf-metadata-switch .custom-switch .seafile-multicolor-icon {
+  fill: #666;
+  transform: scale(0.8);
+  font-size: 16px;
+  margin-right: 8px;
+  vertical-align: -0.15em;
+}
+
+.sf-metadata-field-display-setting-item-container .sf-metadata-switch .custom-switch .custom-switch-description {
+  margin-left: 0;
+  padding-right: 5px;
+  flex: 1;
+  transition: .3s color;
+}
+
+.sf-metadata-field-display-setting-item-container .sf-metadata-switch .custom-switch .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+  border-radius: 6px;
+  margin-right: .25rem;
+}
+
+.sf-metadata-field-display-setting-item-container .sf-metadata-switch .custom-switch .custom-switch-indicator::before {
+  height: 8px;
+  width: 8px;
+}
+
+.sf-metadata-field-display-setting-item-container .sf-metadata-switch .custom-switch-input:checked~.custom-switch-indicator:before {
+  left: 12px;
+}
+
+.sf-metadata-field-display-setting-item-container.hide-column-can-drop::after,
+.sf-metadata-field-display-setting-item-container.hide-column-can-drop-top::before {
+  content: '';
+  height: 1px;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background: #666;
+}
+
+.sf-metadata-field-display-setting-item-container.hide-column-can-drop::after {
+  bottom: 0;
+}
+
+.sf-metadata-field-display-setting-item-container.hide-column-can-drop-top::before {
+  top: 0;
+}
+
+
+.sea-metadata-field-display-popover .sf-metadata-field-display-operations {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 17px;
+  width: 100%;
+}
+
+.sea-metadata-field-display-popover .sf-metadata-field-display-operations .sea-metadata-field-display-operation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bs-tr-hover-bg);
+  border-radius: 3px;
+  color: var(--bs-body-color);
+  height: 28px;
+}
+
+.sea-metadata-field-display-popover .sf-metadata-field-display-operations .sea-metadata-field-display-operation:hover {
+  background: var(--bs-hover-bg);
+  color: var(--bs-body-color);
+  cursor: pointer;
+}

package/dist/components/popover/settings-popover/field-display-settings/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("../../../../common/components");
+var _keyCodes = require("../../../../constants/keyCodes");
+var _translate = _interopRequireDefault(require("../../../../lang/translate"));
+var _fieldItem = _interopRequireDefault(require("./field-item"));
+require("./index.css");
+const DURATION = 300;
+const FieldDisplaySettings = _ref => {
+  let {
+    fieldIconConfig,
+    fields,
+    onToggleField,
+    onMoveField,
+    onToggleFieldsVisibility,
+    hidePopover = () => {}
+  } = _ref;
+  const nodeRef = (0, _react.useRef)(null);
+  const [dragOverColumnKey, setDragOverCellKey] = (0, _react.useState)(null);
+  const [draggingColumnKey, setDraggingCellKey] = (0, _react.useState)(null);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const updateDragOverKey = (0, _react.useCallback)(cellKey => {
+    if (cellKey === dragOverColumnKey) return;
+    setDragOverCellKey(cellKey);
+  }, [dragOverColumnKey]);
+  const updateDraggingKey = (0, _react.useCallback)(cellKey => {
+    if (cellKey === draggingColumnKey) return;
+    setDraggingCellKey(cellKey);
+  }, [draggingColumnKey]);
+  const onSearchColumn = (0, _react.useCallback)(event => {
+    const value = event.target.value;
+    if (value === searchValue) return;
+    setSearchValue(value);
+  }, [searchValue]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if (event.keyCode === _keyCodes.KeyCodes.ChineseInputMethod || event.keyCode === _keyCodes.KeyCodes.Enter || event.keyCode === _keyCodes.KeyCodes.LeftArrow || event.keyCode === _keyCodes.KeyCodes.RightArrow) {
+      event.stopPropagation();
+    }
+  }, []);
+  const defaultStyle = {
+    transition: `all ${DURATION}ms cubic-bezier(.645,.045,.355,1)`
+  };
+  const shownFields = (0, _react.useMemo)(() => {
+    if (!searchValue) return fields;
+    const validValue = searchValue.trim().toLocaleLowerCase();
+    return fields.filter(item => {
+      const columnName = item.name.toLocaleLowerCase();
+      return columnName.indexOf(validValue) > -1;
+    });
+  }, [fields, searchValue]);
+  const draggingColumnIndex = draggingColumnKey ? shownFields.findIndex(f => f.key === draggingColumnKey) : -1;
+  return /*#__PURE__*/_react.default.createElement(_components.CustomizePopover, {
+    target: 'sea-metadata-field-display-popover',
+    popoverClassName: "sea-metadata-field-display-popover",
+    hidePopover: hidePopover,
+    hidePopoverWithEsc: hidePopover,
+    placement: "right",
+    modifiers: [{
+      name: 'preventOverflow',
+      options: {
+        boundary: document.body
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [0, 0]
+      }
+    }]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-field-display-setting"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-field-display-setting-wrapper",
+    ref: nodeRef,
+    style: {
+      ...defaultStyle
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-column-container"
+  }, /*#__PURE__*/_react.default.createElement(_components.SearchInput, {
+    placeholder: _translate.default.gettext('Search property'),
+    onKeyDown: onKeyDown,
+    onChange: onSearchColumn,
+    size: 28,
+    autoFocus: true
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-field-display-setting-body"
+  }, shownFields.map((field, index) => {
+    return /*#__PURE__*/_react.default.createElement(_fieldItem.default, {
+      key: `${field.key}-${index}`,
+      field: field,
+      index: index,
+      fieldIconConfig: fieldIconConfig,
+      onToggleField: onToggleField,
+      onMoveField: onMoveField,
+      updateDragOverKey: updateDragOverKey,
+      updateDraggingKey: updateDraggingKey,
+      dragOverColumnKey: dragOverColumnKey,
+      draggingColumnIndex: draggingColumnIndex
+    });
+  })), !searchValue && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-metadata-field-display-operations"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-field-display-operation px-2",
+    onClick: () => onToggleFieldsVisibility(false),
+    "aria-label": _translate.default.gettext('Hide all')
+  }, _translate.default.gettext('Hide all')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-field-display-operation px-2",
+    onClick: () => onToggleFieldsVisibility(true),
+    "aria-label": _translate.default.gettext('Show all')
+  }, _translate.default.gettext('Show all'))))));
+};
+var _default = exports.default = FieldDisplaySettings;

package/dist/components/popover/settings-popover/index.css

@@ -0,0 +1,52 @@
+.sea-metadata-settings-popover .popover {
+  width: 300px;
+}
+
+.sea-metadata-settings-wrapper {
+  padding: 8px 0;
+}
+
+.sea-metadata-settings-item {
+  cursor: pointer;
+  height: 32px;
+  padding-left: 14px;
+  padding-right: 12px;
+  font-size: 14px;
+  height: 32px;
+  white-space: nowrap;
+  display: flex;
+  flex: 0 0 100%;
+  -webkit-box-flex: 0;
+  -webkit-box-align: center;
+  align-items: center;
+  text-overflow: ellipsis;
+  min-width: min-content;
+  justify-content: space-between;
+}
+
+.sea-metadata-settings-item:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.sea-metadata-settings-item-divider {
+  width: 100%;
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid #e9ecef;
+}
+
+.sea-metadata-settings-item .seaqa-switch {
+  width: 100%;
+}
+
+.sea-metadata-settings-item .seaqa-switch .custom-switch {
+  justify-content: space-between;
+  width: 100%;
+}
+
+.sea-metadata-settings-item .seaqa-switch .custom-switch .custom-switch-description {
+  color: #212529;
+  margin-left: 0;
+  font-size: 14px;
+}

package/dist/components/popover/settings-popover/index.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("../../../common/components");
+var _switch = _interopRequireDefault(require("../../../common/components/switch"));
+var _icons = _interopRequireDefault(require("../../icons"));
+var _constants = require("../../../constants");
+var _translate = _interopRequireDefault(require("../../../lang/translate"));
+var _fieldDisplaySettings = _interopRequireDefault(require("./field-display-settings"));
+require("./index.css");
+// import FieldDisplaySettings from './field-display-settings';
+
+const SettingsPopover = _ref => {
+  let {
+    target,
+    columns: fields,
+    settings,
+    handleUpdateSettings,
+    onMoveField,
+    onToggleField,
+    onToggleFieldsVisibility,
+    hidePopover
+  } = _ref;
+  const [isShowPopover, setIsShowPopover] = (0, _react.useState)(false);
+  const onChangeNullProperty = (0, _react.useCallback)(() => {
+    handleUpdateSettings('hide_empty_value', !settings.hide_empty_value);
+  }, [handleUpdateSettings, settings.hide_empty_value]);
+  const onChangePropertyNames = (0, _react.useCallback)(() => {
+    handleUpdateSettings('shown_column_name', !settings.shown_column_name);
+  }, [handleUpdateSettings, settings.shown_column_name]);
+  const onChangeTextWrap = (0, _react.useCallback)(() => {
+    handleUpdateSettings('text_wrap', !settings.text_wrap);
+  }, [handleUpdateSettings, settings.text_wrap]);
+  const onFieldPopoverToggle = (0, _react.useCallback)(() => {
+    setIsShowPopover(!isShowPopover);
+  }, [isShowPopover]);
+  return /*#__PURE__*/_react.default.createElement(_components.CustomizePopover, {
+    target: target,
+    popoverClassName: "sea-metadata-settings-popover",
+    hidePopover: hidePopover,
+    hidePopoverWithEsc: hidePopover,
+    modifiers: [{
+      name: 'preventOverflow',
+      options: {
+        boundary: document.body
+      }
+    }, {
+      name: 'offset',
+      options: {
+        offset: [-6, 8]
+      }
+    }]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-settings-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-settings-item"
+  }, /*#__PURE__*/_react.default.createElement(_switch.default, {
+    onChange: onChangeNullProperty,
+    checked: settings.hide_empty_value,
+    size: 'small',
+    placeholder: _translate.default.gettext('Don\'t show empty values')
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-settings-item"
+  }, /*#__PURE__*/_react.default.createElement(_switch.default, {
+    onChange: onChangePropertyNames,
+    checked: settings.shown_column_name,
+    size: 'small',
+    placeholder: _translate.default.gettext('Show property names')
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-settings-item"
+  }, /*#__PURE__*/_react.default.createElement(_switch.default, {
+    onChange: onChangeTextWrap,
+    checked: settings.text_wrap,
+    size: 'small',
+    placeholder: _translate.default.gettext('Text wraps')
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sea-metadata-settings-item-divider"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "sea-metadata-field-display-popover",
+    className: "sea-metadata-settings-item",
+    onClick: onFieldPopoverToggle
+  }, /*#__PURE__*/_react.default.createElement("span", null, _translate.default.gettext('Properties to display on the card')), /*#__PURE__*/_react.default.createElement(_icons.default, {
+    symbol: 'arrow-right'
+  })), isShowPopover && /*#__PURE__*/_react.default.createElement(_fieldDisplaySettings.default, {
+    fieldIconConfig: _constants.COLUMNS_ICON_CONFIG,
+    fields: fields,
+    onMoveField: onMoveField,
+    onToggleField: onToggleField,
+    onToggleFieldsVisibility: onToggleFieldsVisibility,
+    onHidePopover: onFieldPopoverToggle
+  })));
+};
+var _default = exports.default = SettingsPopover;

package/dist/components/popover/sort-popover/index.js

@@ -250,7 +250,7 @@ class SortPopover extends _react.Component {
     } = this.state;
     const isEmpty = (0, _utils.isSortsEmpty)(sorts);
     return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
-      placement: "bottom-end",
+      placement: "bottom-start",
       isOpen: true,
       target: target,
       fade: false,

package/dist/components/popover/view-type-popover/index.css

@@ -0,0 +1,51 @@
+.sea-metadata-view-type-popover .popover {
+  width: 200px;
+}
+
+.sea-metadata-view-type-wrapper {
+  padding: 8px 0;
+}
+
+.sea-metadata-view-type-header {
+  padding: 0 12px;
+  margin-bottom: 4px;
+  font-size: 13px;
+  color: #666;
+}
+
+.sea-metadata-view-type-item {
+  cursor: pointer;
+  height: 32px;
+  padding-left: 14px;
+  padding-right: 12px;
+  font-size: 14px;
+  height: 32px;
+  white-space: nowrap;
+  display: flex;
+  flex: 0 0 100%;
+  -webkit-box-flex: 0;
+  -webkit-box-align: center;
+  align-items: center;
+  text-overflow: ellipsis;
+  min-width: min-content;
+  justify-content: space-between;
+}
+
+.sea-metadata-view-type-item>* {
+  pointer-events: none;
+}
+
+.sea-metadata-view-type-item:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.sea-metadata-view-type-item-left,
+.sea-metadata-view-type-item-right {
+  display: flex;
+  align-items: center;
+}
+
+.sea-metadata-view-type-item .sea-qa-icon-svg {
+  fill: #666;
+  font-size: 16px;
+}