Merge branch 'develop' into feature/backup

packages/asc-web-common/components/FilterInput/sub-components/HideFilter.js

@@ -66,6 +66,7 @@ class HideFilter extends React.Component {
             isDefaultMode={false}
             manualY="8px"
             open={popoverOpen}
+            fixedDirection={true}
           >
             {children}
           </DropDown>

packages/asc-web-components/calendar/index.js

@@ -146,26 +146,35 @@ class Calendar extends Component {
 
     const openToDateYear = openToDate.getFullYear();
 
-    let disabled = false;
     const listMonths = [];
 
     let i = 0;
     while (i <= 11) {
       listMonths.push({
         key: `${i}`,
         label: `${months[i]}`,
-        disabled: disabled,
+        disabled: false,
       });
       i++;
     }
 
+    if (openToDateYear < minDateYear) {
+      i = 0;
+      while (i != 12) {
+        if (i != minDateMonth) listMonths[i].disabled = true;
+        i++;
+      }
+    }
+
     if (openToDateYear === minDateYear) {
       i = 0;
       while (i != minDateMonth) {
         listMonths[i].disabled = true;
         i++;
       }
-    } else if (openToDateYear === maxDateYear) {
+    }
+
+    if (openToDateYear === maxDateYear) {
       i = 11;
       while (i != maxDateMonth) {
         listMonths[i].disabled = true;
@@ -502,6 +511,9 @@ class Calendar extends Component {
                 options={optionsMonth}
                 isDisabled={false}
                 name="month-button"
+                displaySelectedOption
+                fixedDirection={true}
+                directionY="bottom"
               />
             </ComboBoxMonthStyle>
             <ComboBoxDateStyle>
@@ -514,7 +526,11 @@ class Calendar extends Component {
                 selectedOption={selectedOptionYear}
                 options={optionsYear}
                 isDisabled={false}
+                showDisabledItems
                 name="year-button"
+                displaySelectedOption
+                fixedDirection={true}
+                directionY="bottom"
               />
             </ComboBoxDateStyle>
           </ComboBoxStyle>

packages/asc-web-components/combobox/index.js

@@ -94,6 +94,8 @@ class ComboBox extends React.Component {
       manualX,
       isDefaultMode,
       manualWidth,
+      displaySelectedOption,
+      fixedDirection,
     } = this.props;
     const { isOpen, selectedOption } = this.state;
 
@@ -158,20 +160,26 @@ class ComboBox extends React.Component {
             {...dropDownManualWidthProp}
             showDisabledItems={showDisabledItems}
             isDefaultMode={isDefaultMode}
+            fixedDirection={fixedDirection}
           >
             {advancedOptions
               ? advancedOptions
-              : options.map((option) => (
-                  <DropDownItem
-                    {...option}
-                    textOverflow={textOverflow}
-                    key={option.key}
-                    disabled={
-                      option.disabled || option.label === selectedOption.label
-                    }
-                    onClick={this.optionClick.bind(this, option)}
-                  />
-                ))}
+              : options.map((option) => {
+                  const disabled =
+                    option.disabled ||
+                    (!displaySelectedOption &&
+                      option.label === selectedOption.label);
+
+                  return (
+                    <DropDownItem
+                      {...option}
+                      textOverflow={textOverflow}
+                      key={option.key}
+                      disabled={disabled}
+                      onClick={this.optionClick.bind(this, option)}
+                    />
+                  );
+                })}
           </DropDown>
         )}
       </StyledComboBox>
@@ -233,6 +241,8 @@ ComboBox.propTypes = {
   manualX: PropTypes.string,
   //** Dropdown manual width */
   manualWidth: PropTypes.string,
+  displaySelectedOption: PropTypes.bool,
+  fixedDirection: PropTypes.bool,
 };
 
 ComboBox.defaultProps = {
@@ -247,6 +257,8 @@ ComboBox.defaultProps = {
   manualY: "102%",
   isDefaultMode: true,
   manualWidth: "200px",
+  displaySelectedOption: false,
+  fixedDirection: false,
 };
 
 export default ComboBox;

packages/asc-web-components/date-picker/index.js

@@ -318,6 +318,7 @@ class DatePicker extends Component {
       style,
       className,
       inputClassName,
+      fixedDirection,
     } = this.props;
     const { value, isOpen, mask, hasError, displayType } = this.state;
 
@@ -354,6 +355,7 @@ class DatePicker extends Component {
                 open={isOpen}
                 clickOutsideAction={this.onClose}
                 isDefaultMode={false}
+                fixedDirection={fixedDirection}
               >
                 {this.renderBody()}
               </DropDown>
@@ -424,6 +426,7 @@ DatePicker.propTypes = {
   id: PropTypes.string,
   /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  fixedDirection: PropTypes.bool,
 };
 
 DatePicker.defaultProps = {

packages/asc-web-components/drop-down/index.js

@@ -30,6 +30,7 @@ class DropDown extends React.PureComponent {
     this.state = {
       directionX: props.directionX,
       directionY: props.directionY,
+      manualY: props.manualY,
     };
 
     this.dropDownRef = React.createRef();
@@ -99,35 +100,58 @@ class DropDown extends React.PureComponent {
   }
 
   checkPosition = () => {
-    if (!this.dropDownRef.current) return;
-    const { smallSectionWidth } = this.props;
+    if (!this.dropDownRef.current || this.props.fixedDirection) return;
+    const { smallSectionWidth, forwardedRef } = this.props;
+    const { manualY } = this.state;
+
     const rects = this.dropDownRef.current.getBoundingClientRect();
-    const container = { width: window.innerWidth, height: window.innerHeight };
+    const parentRects = forwardedRef?.current?.getBoundingClientRect();
+    const container = DomHelpers.getViewport();
+
+    const dimensions = parentRects
+      ? {
+          toTopCorner: parentRects.top,
+          parentHeight: parentRects.height,
+          containerHeight: parentRects.top,
+        }
+      : {
+          toTopCorner: rects.top,
+          parentHeight: 42,
+          containerHeight: container.height,
+        };
+
     const left = rects.left < 0 && rects.width < container.width;
     const right =
       rects.width &&
       rects.left < (rects.width || 250) &&
       rects.left > rects.width &&
       rects.width < container.width;
-    const top = rects.bottom > container.height && rects.top > rects.height;
+    const top =
+      rects.bottom > dimensions.containerHeight &&
+      dimensions.toTopCorner > rects.height;
     const bottom = rects.top < 0;
+
     const x = left
       ? "left"
       : right || smallSectionWidth
       ? "right"
       : this.state.directionX;
     const y = bottom ? "bottom" : top ? "top" : this.state.directionY;
 
+    const mY = top ? `${dimensions.parentHeight}px` : manualY;
+
     this.setState({
       directionX: x,
       directionY: y,
+      manualY: mY,
       width: this.dropDownRef ? this.dropDownRef.current.offsetWidth : 240,
     });
   };
 
   checkPositionPortal = () => {
     const parent = this.props.forwardedRef;
-    if (!parent.current) return;
+    if (!parent.current || this.props.fixedDirection) return;
+
     const rects = parent.current.getBoundingClientRect();
 
     let dropDownHeight = this.dropDownRef.current.offsetParent
@@ -199,7 +223,7 @@ class DropDown extends React.PureComponent {
 
   renderDropDown() {
     const { maxHeight, children, showDisabledItems } = this.props;
-    const { directionX, directionY, width } = this.state;
+    const { directionX, directionY, width, manualY } = this.state;
     let cleanChildren;
 
     const rowHeights = React.Children.map(children, (child) =>
@@ -221,6 +245,7 @@ class DropDown extends React.PureComponent {
         {...this.props}
         directionX={directionX}
         directionY={directionY}
+        manualY={manualY}
         {...dropDownMaxHeightProp}
       >
         {maxHeight ? (
@@ -320,6 +345,7 @@ DropDownContainer.propTypes = {
   isDefaultMode: PropTypes.bool,
   /** Needed to open correctly people and group selector when the section width is small */
   smallSectionWidth: PropTypes.bool,
+  fixedDirection: PropTypes.bool,
 };
 
 DropDownContainer.defaultProps = {
@@ -328,6 +354,7 @@ DropDownContainer.defaultProps = {
   withBackdrop: true,
   showDisabledItems: false,
   isDefaultMode: true,
+  fixedDirection: false,
 };
 
 export default DropDownContainer;

products/ASC.Files/Client/src/components/EditingWrapperComponent.js

@@ -89,6 +89,8 @@ const EditingWrapper = styled.div`
         display: flex;
         align-items: center;
       `}
+
+    ${(props) => props.viewAs === "table" && `padding-left: 12px`}
   }
 
   .edit-button {
@@ -141,6 +143,7 @@ const EditingWrapper = styled.div`
 
   .is-edit {
     /* margin-top: 4px; */
+    ${(props) => props.viewAs === "table" && `padding-left: 4px;`}
   }
 `;
 

products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js

@@ -16,6 +16,7 @@ const AccessComboBox = (props) => {
     t,
     arrowIconColor,
     disableLink,
+    fixedDirection,
   } = props;
   const {
     FullAccess,
@@ -119,6 +120,7 @@ const AccessComboBox = (props) => {
       disableIconClick={false}
       isDisabled={isDisabled}
       isDefaultMode={false}
+      fixedDirection={fixedDirection}
     >
       <ReactSVG src={accessIconUrl} className="sharing-access-combo-box-icon" />
     </ComboBox>

products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js

@@ -220,6 +220,7 @@ class SharingRow extends React.Component {
                       itemId={id}
                       accessOptions={accessOptions}
                       isDisabled={isLoading}
+                      fixedDirection={true}
                     />
                   )
                 }

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -73,7 +73,7 @@ const StyledSimpleFilesRow = styled(Row)`
   }
 
   .row_content {
-    max-width: fit-content;
+    ${(props) => props.sectionWidth > 500 && `max-width: fit-content;`}
     min-width: auto;
   }
 

products/ASC.People/Client/src/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js

@@ -68,7 +68,7 @@ const InfoItemValue = styled.div`
       margin-top: 6px;
     }
     @media (max-width: 1024px) {
-      padding: 6px 24px 8px 8px;
+      padding: 6px 8px 8px 8px;
       margin-left: -8px;
     }
   }

products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js

@@ -21,6 +21,7 @@ class DateField extends React.Component {
       inputOnChange,
       inputTabIndex,
       calendarMinDate,
+      calendarMaxDate,
       locale,
       maxLabelWidth,
     } = this.props;
@@ -43,8 +44,9 @@ class DateField extends React.Component {
           displayType="auto"
           calendarHeaderContent={calendarHeaderContent}
           minDate={calendarMinDate ? calendarMinDate : new Date("1900/01/01")}
-          maxDate={new Date()}
+          maxDate={calendarMaxDate ? calendarMaxDate : new Date()}
           locale={locale}
+          fixedDirection={true}
         />
       </FieldContainer>
     );