Merge branch 'fix/components-fixes-2' into 'master'

Components fixes

See merge request Frontend/synerise-design!2223

packages/components/avatar-group/package.json

@@ -36,6 +36,7 @@
     "@synerise/ds-badge": "^0.5.5",
     "@synerise/ds-button": "^0.16.3",
     "@synerise/ds-dropdown": "^0.17.5",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-modal": "^0.15.3",
     "@synerise/ds-table": "^0.42.7",
     "@synerise/ds-tooltip": "^0.11.3"

packages/components/block/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@synerise/ds-button": "^0.16.3",
     "@synerise/ds-card": "^0.10.2",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-typography": "^0.12.2"
   },
   "peerDependencies": {

packages/components/card-tabs/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@synerise/ds-button": "^0.16.3",
     "@synerise/ds-cruds": "^0.3.3",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-inline-edit": "^0.5.7",
     "@synerise/ds-typography": "^0.12.2",
     "react-sortablejs-typescript": "2.0.3",

packages/components/collector/package.json

@@ -33,6 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.16.3",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-input": "^0.18.3",
     "@synerise/ds-search": "^0.6.8",
     "classnames": "^2.2.6"

packages/components/icon-picker/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@synerise/ds-button": "^0.16.3",
     "@synerise/ds-dropdown": "^0.17.5",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-search-bar": "^0.5.3",
     "@synerise/ds-typography": "^0.12.2"
   },

packages/components/item-picker/package.json

@@ -33,6 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-dropdown": "^0.17.5",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-menu": "^0.11.4",
     "@synerise/ds-search": "^0.6.8",
     "@synerise/ds-search-bar": "^0.5.3",

packages/components/layout/package.json

@@ -32,6 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-scrollbar": "^0.4.2",
     "@synerise/ds-utils": "^0.19.0"
   },

packages/components/layout/src/Layout.styles.ts

@@ -58,6 +58,7 @@ export const LayoutBody = styled.div`
 export const LayoutMain = styled.div`
   flex: 1;
   position: relative;
+  max-width: 100%;
   ${mediaQuery.to.small`min-width: 704px;`};
 `;
 

packages/components/logic/package.json

@@ -33,6 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-dropdown": "^0.17.5",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-menu": "^0.11.4",
     "@synerise/ds-utils": "^0.19.0"
   },

packages/components/menu/src/Elements/Item/Text/Text.styles.ts

@@ -97,7 +97,6 @@ export const Wrapper = styled(MenuItem)<WrapperProps>`
     display: flex;
     align-items: center;
     margin: 0;
-    height: auto;
     transition: background-color ${TRANSITION_FN};
     padding-left: ${(props): string => (props.prefixel ? '8' : '12')}px;
     ${Inner} {
@@ -160,7 +159,7 @@ export const Wrapper = styled(MenuItem)<WrapperProps>`
     & .ds-tag {
       margin: 0;
     }
-    
+
     &:focus:not(:active) {
       box-shadow: ${(props): string | false =>
         !props.disabled && `inset 0 0 0 2px ${props.theme.palette['blue-600']} `};
@@ -171,7 +170,7 @@ export const Wrapper = styled(MenuItem)<WrapperProps>`
         fill: ${(props): string => props.theme.palette['grey-700']};
       }
     }
-    
+
     ${(props): FlattenSimpleInterpolation | false =>
       !props.disabled &&
       css`
@@ -189,7 +188,7 @@ export const Wrapper = styled(MenuItem)<WrapperProps>`
           }
         }
       `}
-    
+
     &:active {
       && {
         background: ${(props): string => props.theme.palette['blue-050']};

packages/components/popconfirm/package.json

@@ -33,6 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.16.3",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-typography": "^0.12.2",
     "@synerise/ds-utils": "^0.19.0"
   },

packages/components/search-bar/package.json

@@ -33,6 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.16.3",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-input": "^0.18.3",
     "@synerise/ds-typography": "^0.12.2"
   },

packages/components/search/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@synerise/ds-button": "^0.16.3",
     "@synerise/ds-dropdown": "^0.17.5",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-menu": "^0.11.4",
     "@synerise/ds-scrollbar": "^0.4.2",
     "@synerise/ds-typography": "^0.12.2",

packages/components/select/package.json

@@ -32,6 +32,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-input": "^0.18.3",
     "@synerise/ds-typography": "^0.12.2",
     "classnames": "^2.2.6"

packages/components/sidebar-object/package.json

@@ -35,6 +35,7 @@
     "@synerise/ds-button": "^0.16.3",
     "@synerise/ds-description": "^0.3.5",
     "@synerise/ds-dropdown": "^0.17.5",
+    "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-inline-edit": "^0.5.7",
     "@synerise/ds-subtle-form": "^0.8.5",
     "@synerise/ds-tabs": "^0.12.6"

packages/components/table/package.json

@@ -41,11 +41,13 @@
     "@synerise/ds-flag": "^0.3.2",
     "@synerise/ds-icon": "^0.46.2",
     "@synerise/ds-input": "^0.18.3",
+    "@synerise/ds-loader": "^0.2.4",
     "@synerise/ds-menu": "^0.11.4",
     "@synerise/ds-pagination": "^0.7.3",
     "@synerise/ds-search": "^0.6.8",
     "@synerise/ds-search-bar": "^0.5.3",
     "@synerise/ds-select": "^0.14.3",
+    "@synerise/ds-skeleton": "^0.2.4",
     "@synerise/ds-status": "^0.5.5",
     "@synerise/ds-tags": "^0.6.5",
     "@synerise/ds-tooltip": "^0.11.3",

packages/components/table/src/ColumnSortMenu/__spec__/groupedColumnsSort.spec.ts

@@ -56,6 +56,7 @@ const setupStateApi = (sortState: SortStateAPI['columnsSortState']): SortStateAP
   columnsSortState: sortState,
   getColumnSortOrder: jest.fn().mockImplementation((key: string) => sortState[key].sortOrder),
   setColumnSortOrder: jest.fn(),
+  updateColumnsData: jest.fn(),
 });
 
 describe('getColumnsWithActiveSorting', () => {

packages/components/table/src/ColumnSortMenu/useSortState.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { groupBy } from 'lodash';
-import { DSColumnType } from '../Table.types';
+import { groupBy, merge } from 'lodash';
+import { DSColumnType, OnSortFn } from '../Table.types';
 
 export type ColumnSortOrder = 'descend' | 'ascend' | null;
 
-interface ColumnsSortState {
+export interface ColumnsSortState {
   [key: string]: {
     sortOrder: ColumnSortOrder;
     multiple: number | false;
@@ -15,6 +15,7 @@ export interface SortStateAPI {
   columnsSortState: ColumnsSortState;
   getColumnSortOrder: (key: string) => ColumnSortOrder;
   setColumnSortOrder: (key: string, sort: ColumnSortOrder) => void;
+  updateColumnsData: (columns: ColumnsSortState) => void;
 }
 
 export const toSortOrder = (value: string | null | undefined): ColumnSortOrder => {
@@ -71,16 +72,27 @@ export const columnsToSortState = <T extends unknown>(columns: DSColumnType<T>[]
   );
 };
 
-type ColumnSortAction = {
+type SetOrderAction = {
   type: 'setSingleOrder' | 'setMultipleOrder';
   payload: {
     key: string;
     sortOrder: ColumnSortOrder;
+    onSort: OnSortFn | undefined;
   };
 };
 
-const setSingleOrder: React.Reducer<ColumnsSortState, ColumnSortAction> = (state, action) => {
+type UpdateColumnsAction = {
+  type: 'updateColumns';
+  payload: {
+    columns: ColumnsSortState;
+  };
+};
+
+type ColumnSortAction = SetOrderAction | UpdateColumnsAction;
+
+const setSingleOrder: React.Reducer<ColumnsSortState, SetOrderAction> = (state, action) => {
   const { payload } = action;
+  const { onSort } = payload;
   const clearedSortState = Object.entries(state).reduce<ColumnsSortState>(
     (newState, [currKey, currValue]) => ({
       ...newState,
@@ -92,17 +104,22 @@ const setSingleOrder: React.Reducer<ColumnsSortState, ColumnSortAction> = (state
     {}
   );
 
-  return {
+  const newState = {
     ...clearedSortState,
     [payload.key]: {
       ...state[payload.key],
       sortOrder: payload.sortOrder,
     },
   };
+
+  onSort && onSort({ columnKey: payload.key, order: payload.sortOrder }, newState);
+
+  return newState;
 };
 
-const setMultipleOrder: React.Reducer<ColumnsSortState, ColumnSortAction> = (state, action) => {
+const setMultipleOrder: React.Reducer<ColumnsSortState, SetOrderAction> = (state, action) => {
   const { payload } = action;
+  const { onSort } = payload;
   const clearedSortState = Object.entries(state).reduce<ColumnsSortState>(
     (newState, [currKey, currValue]) =>
       currValue.multiple === false
@@ -120,40 +137,67 @@ const setMultipleOrder: React.Reducer<ColumnsSortState, ColumnSortAction> = (sta
     {}
   );
 
-  return {
+  const newState = {
     ...clearedSortState,
     [payload.key]: {
       ...state[payload.key],
       sortOrder: payload.sortOrder,
     },
   };
+
+  onSort && onSort({ columnKey: payload.key, order: payload.sortOrder }, newState);
+
+  return newState;
+};
+
+const updateColumns: React.Reducer<ColumnsSortState, UpdateColumnsAction> = (state, action) => {
+  const { payload } = action;
+  return merge(payload.columns, state);
 };
 
 const sortReducer: React.Reducer<ColumnsSortState, ColumnSortAction> = (state, action) => {
   const { type } = action;
 
   switch (type) {
     case 'setSingleOrder':
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
       return setSingleOrder(state, action);
     case 'setMultipleOrder':
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
       return setMultipleOrder(state, action);
+    case 'updateColumns':
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      return updateColumns(state, action);
     default:
       return state;
   }
 };
 
-export const useSortState = (initialState: ColumnsSortState = {}): SortStateAPI => {
+export const useSortState = (initialState: ColumnsSortState = {}, onSort: OnSortFn | undefined): SortStateAPI => {
   const [columnsSortState, dispatch] = React.useReducer(sortReducer, initialState);
 
   const getColumnSortOrder: SortStateAPI['getColumnSortOrder'] = key => columnsSortState[key]?.sortOrder;
 
+  const updateColumnsData: SortStateAPI['updateColumnsData'] = (columns: ColumnsSortState) => {
+    dispatch({
+      type: 'updateColumns',
+      payload: {
+        columns,
+      },
+    });
+  };
+
   const setColumnSortOrder: SortStateAPI['setColumnSortOrder'] = (key, sortOrder) => {
     if (columnsSortState[key]?.sortOrder !== sortOrder && columnsSortState[key]?.multiple === false) {
       dispatch({
         type: 'setSingleOrder',
         payload: {
           key,
           sortOrder,
+          onSort,
         },
       });
     }
@@ -164,13 +208,15 @@ export const useSortState = (initialState: ColumnsSortState = {}): SortStateAPI
         payload: {
           key,
           sortOrder,
+          onSort,
         },
       });
     }
   };
 
   return {
     columnsSortState,
+    updateColumnsData,
     getColumnSortOrder,
     setColumnSortOrder,
   };

packages/components/table/src/DefaultTable/DefaultTable.tsx

@@ -1,22 +1,30 @@
 import * as React from 'react';
-import { compact } from 'lodash';
+import { compact, isEqual } from 'lodash';
 import Table from 'antd/lib/table';
 import { FormattedMessage } from 'react-intl';
 import Result from '@synerise/ds-result';
 import Button from '@synerise/ds-button';
 import Tooltip from '@synerise/ds-tooltip';
+import usePrevious from '@synerise/ds-utils/dist/usePrevious/usePrevious';
 import { columnsToSortState, useSortState } from '../ColumnSortMenu/useSortState';
 import { columnWithSortButtons } from '../ColumnSortMenu/columnWithSortButtons';
 import useRowStar from '../hooks/useRowStar';
 import { DSColumnType, DSTableProps, RowType } from '../Table.types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function DefaultTable<T extends any & RowType<T>>(props: DSTableProps<T>): React.ReactElement {
-  const { title, selection, rowStar, dataSource, rowKey, locale, expandable, components, columns } = props;
-  const sortStateApi = useSortState(columnsToSortState(columns));
+  const { title, selection, rowStar, dataSource, rowKey, locale, expandable, components, columns, onSort } = props;
+  const previousColumns = usePrevious(columns);
+  const sortStateApi = useSortState(columnsToSortState(columns), onSort);
   const { getRowStarColumn } = useRowStar(rowStar?.starredRowKeys || []);
   const starColumn = getRowStarColumn(props);
 
+  React.useEffect(() => {
+    if (!isEqual(previousColumns, columns)) {
+      sortStateApi.updateColumnsData(columnsToSortState(columns));
+    }
+  }, [columns, previousColumns, sortStateApi]);
+
   const getRowKey = React.useCallback(
     (row: T): React.ReactText | undefined => {
       if (typeof rowKey === 'function') return rowKey(row);
@@ -131,6 +139,7 @@ function DefaultTable<T extends any & RowType<T>>(props: DSTableProps<T>): React
         ),
       }}
       title={title}
+      showSorterTooltip={false}
       components={{
         body: {
           row: RenderRow,