@griddo/ax 1.58.7 → 1.59.3

package/src/components/Gallery/GalleryPanel/DetailPanel/style.tsx

@@ -17,7 +17,8 @@ export const PanelActions = styled.div`
   display: flex;
   justify-content: flex-end;
   background-color: ${p => p.theme.color.uiBarBackground};
-  padding: ${p => p.theme.spacing.m};
+  padding: ${p => p.theme.spacing.s} ${p => p.theme.spacing.m};
+  border-top: 1px solid ${p => p.theme.color.uiLine};
   button:not(:first-child) {
     margin-left: ${p => p.theme.spacing.s};
   }
@@ -26,24 +27,36 @@ export const PanelActions = styled.div`
 export const PanelForm = styled.div`
   position: relative;
   width: 100%;
-  height: 100%;
+  height: calc(${p => p.theme.spacing.xl} * 8);
   overflow: auto;
-  padding: ${p => `${p.theme.spacing.m} ${p.theme.spacing.m} 80px ${p.theme.spacing.m}`};
 `;
 
-export const DateWrapper = styled.div`
-  ${p => p.theme.textStyle.uiXS};
+export const Date = styled.div`
+  ${p => p.theme.textStyle.uiM};
+  color: ${p => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${p => p.theme.spacing.xxs};
+`;
+
+export const Type = styled.div`
+  ${p => p.theme.textStyle.uiM};
   color: ${p => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xs};
+  margin-bottom: ${p => p.theme.spacing.xxs};
 `;
 
 export const ImageInfoWrapper = styled.div`
-  display: flex;
-  margin-bottom: ${p => p.theme.spacing.m};
+  padding: ${p => p.theme.spacing.m};
+  border-bottom: 1px solid ${p => p.theme.color.uiLine};
 `;
 
 export const ImageWrapper = styled.div`
-  max-width: 128px;
+  display: flex;
+  margin-bottom: ${p => p.theme.spacing.s};
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+export const Image = styled.div`
+  max-width: 120px;
   width: 100%;
   img {
     border: 1px solid ${p => p.theme.color.uiLine};
@@ -51,28 +64,27 @@ export const ImageWrapper = styled.div`
   }
 `;
 
-export const ImageData = styled.div`
-  margin-left: ${p => p.theme.spacing.s};
-`;
-
 export const ImageName = styled.div`
   ${p => p.theme.textStyle.uiL};
   color: ${p => p.theme.color.textHighEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xs};
+  margin-bottom: ${p => p.theme.spacing.xxs};
+  overflow-wrap: break-word;
 `;
 
 export const ImageSize = styled.div`
-  ${p => p.theme.textStyle.uiS};
+  ${p => p.theme.textStyle.uiM};
   color: ${p => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xs};
+  margin-bottom: ${p => p.theme.spacing.xxs};
 `;
 
 export const ImageDimensions = styled.div`
-  ${p => p.theme.textStyle.uiS};
+  ${p => p.theme.textStyle.uiM};
   color: ${p => p.theme.color.textMediumEmphasis};
 `;
 
-export const FormWrapper = styled.div``;
+export const FormWrapper = styled.div`
+  padding: ${p => p.theme.spacing.m};
+`;
 
 export const ImageUrl = styled.div`
   display: flex;
@@ -89,5 +101,6 @@ export const ImageUrl = styled.div`
 `;
 
 export const AddToGlobal = styled.div`
-  margin-bottom: ${p => p.theme.spacing.m};
+  padding: ${p => `${p.theme.spacing.s} ${p.theme.spacing.m} ${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+  border-bottom: 1px solid ${p => p.theme.color.uiLine};
 `;

package/src/components/Gallery/style.tsx

@@ -56,7 +56,7 @@ export const GalleryWrapper = styled.div`
   background-color: ${p => p.theme.color.uiBackground01};
   overflow: auto;
   padding-right: ${gutter};
-  min-height: calc(100% - ${p => p.theme.spacing.xl} * 2);
+  height: calc(${p => p.theme.spacing.xl} * 7 + ${gutter});
   position: relative;
 `;
 

package/src/components/Icon/components/Category.js

@@ -1,11 +1,10 @@
-import React from "react";
+import * as React from "react";
 
-const SvgCategory = props => (
-  <svg width={24} height={24} fill="none" {...props}>
+const SvgCategory = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M11 2L5.5 11H16.5L11 2ZM11 5.84L12.93 9H9.06L11 5.84ZM16.5 13C14.01 13 12 15.01 12 17.5C12 19.99 14.01 22 16.5 22C18.99 22 21 19.99 21 17.5C21 15.01 18.99 13 16.5 13ZM16.5 20C15.12 20 14 18.88 14 17.5C14 16.12 15.12 15 16.5 15C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20ZM2 21.5H10V13.5H2V21.5ZM4 15.5H8V19.5H4V15.5Z"
-      fill="white"
-      fillOpacity="0.7"
+      d="m11 2-5.5 9h11L11 2Zm0 3.84L12.93 9H9.06L11 5.84ZM16.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5Zm0 7a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5ZM2 21.5h8v-8H2v8Zm2-6h4v4H4v-4Z"
+      fill="#5057FF"
     />
   </svg>
 );

package/src/components/Icon/components/Refresh.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+const SvgRefresh = (props) => (
+  <svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35Z"
+      fill="#5057FF"
+    />
+  </svg>
+);
+
+export default SvgRefresh;

package/src/components/Icon/svgs/Category.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 2L5.5 11H16.5L11 2ZM11 5.84L12.93 9H9.06L11 5.84ZM16.5 13C14.01 13 12 15.01 12 17.5C12 19.99 14.01 22 16.5 22C18.99 22 21 19.99 21 17.5C21 15.01 18.99 13 16.5 13ZM16.5 20C15.12 20 14 18.88 14 17.5C14 16.12 15.12 15 16.5 15C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20ZM2 21.5H10V13.5H2V21.5ZM4 15.5H8V19.5H4V15.5Z" fill="white" fill-opacity="0.7"/>
+<path d="M11 2L5.5 11H16.5L11 2ZM11 5.84L12.93 9H9.06L11 5.84ZM16.5 13C14.01 13 12 15.01 12 17.5C12 19.99 14.01 22 16.5 22C18.99 22 21 19.99 21 17.5C21 15.01 18.99 13 16.5 13ZM16.5 20C15.12 20 14 18.88 14 17.5C14 16.12 15.12 15 16.5 15C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20ZM2 21.5H10V13.5H2V21.5ZM4 15.5H8V19.5H4V15.5Z" fill="#5057FF"/>
 </svg>

package/src/components/Icon/svgs/Refresh.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.65 6.35C16.2 4.9 14.21 4 12 4C7.57999 4 4.00999 7.58 4.00999 12C4.00999 16.42 7.57999 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.68999 18 5.99999 15.31 5.99999 12C5.99999 8.69 8.68999 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z" fill="#5057FF"/>
+</svg>

package/src/components/Lists/style.tsx

@@ -1,23 +1,24 @@
 import styled from "styled-components";
 
 const ListTitle = styled.h6`
-  ${p => p.theme.textStyle.headingXXS};
-  padding: ${p => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
+  ${(p) => p.theme.textStyle.headingXXS};
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
   cursor: initial;
+  white-space: nowrap;
 `;
 
-const StyledListItem = styled.span <{ isSelected?: boolean }>`
-  ${p => p.theme.textStyle.uiM};
-  color: ${p => p.isSelected ? p.theme.colors.interactive01 : p.theme.colors.textMediumEmphasis};
-  padding: ${p => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
+const StyledListItem = styled.span<{ isSelected?: boolean }>`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => (p.isSelected ? p.theme.colors.interactive01 : p.theme.colors.textMediumEmphasis)};
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
   cursor: pointer;
-  font-weight: ${p => p.isSelected ? "bold" : "normal"};
+  font-weight: ${(p) => (p.isSelected ? "bold" : "normal")};
   display: flex;
   justify-content: space-between;
 
   &:hover {
-    background-color: ${p => p.theme.colors.overlayHoverPrimary};
+    background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
   }
 `;
 
-export { ListTitle, StyledListItem }
+export { ListTitle, StyledListItem };

package/src/components/MainWrapper/AppBar/index.tsx

@@ -2,7 +2,18 @@ import React from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
 import { IErrorItem } from "@ax/types";
-import { Button, Icon, IconAction, Flag, FloatingMenu, LanguageMenu, Tabs, Tooltip, ErrorCenter, SearchField } from "@ax/components";
+import {
+  Button,
+  Icon,
+  IconAction,
+  Flag,
+  FloatingMenu,
+  LanguageMenu,
+  Tabs,
+  Tooltip,
+  ErrorCenter,
+  SearchField,
+} from "@ax/components";
 
 import { ActionMenu, ActionSimpleMenu, DownArrowButton } from "./atoms";
 
@@ -122,11 +133,11 @@ const AppBar = (props: IProps): JSX.Element => {
 
   const PageStatus = () =>
     statusMenu.options && statusMenu.options.length > 0 ? (
-      <FloatingMenu Button={StatusBtn} isInAppBar={true}>
+      <FloatingMenu Button={StatusBtn} isInAppBar={true} position="left" offset={-20}>
         <ActionSimpleMenu menu={statusMenu} />
       </FloatingMenu>
     ) : (
-      <Icon name={pageStatus!} size="24" />
+      <Icon name={pageStatus ?? "offline"} size="24" />
     );
 
   const languageTooltip = typeof currentPageID === "number" && "Add language";
@@ -158,7 +169,7 @@ const AppBar = (props: IProps): JSX.Element => {
           <>
             <S.LanguageWrapper>
               <Tooltip content={languageTooltip} hideOnClick bottom>
-                <FloatingMenu Button={LanguageBtn} isInAppBar={true}>
+                <FloatingMenu Button={LanguageBtn} isInAppBar={true} position="left">
                   {languageMenu}
                 </FloatingMenu>
               </Tooltip>
@@ -179,7 +190,7 @@ const AppBar = (props: IProps): JSX.Element => {
         {errors && errors.length > 0 && (
           <>
             <S.IconStatusWrapper>
-              <FloatingMenu Button={ErrorCenterBtn} isInAppBar={true}>
+              <FloatingMenu Button={ErrorCenterBtn} isInAppBar={true} position="left" offset={-20}>
                 <ErrorCenter errors={errors} actions={errorActions} />
               </FloatingMenu>
             </S.IconStatusWrapper>

package/src/components/MainWrapper/AppBar/style.tsx

@@ -89,6 +89,7 @@ const Separator = styled.div`
 `;
 
 const IconStatusWrapper = styled.div`
+  position: relative;
   height: ${(p) => p.theme.spacing.m};
 `;
 
@@ -153,7 +154,7 @@ const ErrorWrapper = styled.div`
 `;
 
 const SearchWrapper = styled.div`
-  width: ${p => `calc(${p.theme.spacing.xl} * 5)`};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
   display: flex;
   justify-content: flex-end;
 `;

package/src/components/SideModal/index.tsx

@@ -20,6 +20,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     handleClick,
     current,
     setDefault,
+    showSearch,
   } = props;
 
   const componentList: any = [];
@@ -49,10 +50,12 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         category: "all",
       };
       setOptions(filteredOptions);
+    } else {
+      setOptions(filteredValues);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [current]);
+  }, [current, whiteList]);
 
   const node = useRef<any>(null);
   const handleClickOutside = (e: any) => {
@@ -133,9 +136,11 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         <S.Wrapper ref={node} optionsType={optionsType}>
           <S.Header>
             <S.Title>{optionsType}</S.Title>
-          <S.SearchWrapper>
-            <SearchField onChange={setSearchQuery} closeOnInactive />
-          </S.SearchWrapper>
+          {showSearch && (
+            <S.SearchWrapper>
+              <SearchField onChange={setSearchQuery} closeOnInactive />
+            </S.SearchWrapper>
+          )}
           </S.Header>
           {setDefault && !setDefault.checked && (
             <S.CheckFieldWrapper>
@@ -173,6 +178,7 @@ interface ISideModalProps {
   componentOptions?: any;
   current?: any;
   setDefault?: any;
+  showSearch?: boolean;
 }
 
 export default SideModal;

package/src/components/TableCounter/style.tsx

@@ -3,12 +3,9 @@ import styled from "styled-components";
 const ResultsCount = styled.span`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textLowEmphasis};
-  width: 100px;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
 `;
 
-export {
-  ResultsCount
-}
+export { ResultsCount };

package/src/components/TableFilters/CategoryFilter/index.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+
+import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
+import { areEquals, isNumber, isReqOk } from "@ax/helpers";
+import { checkgroups } from "@ax/api";
+import { IFilterValue } from "@ax/types";
+
+import * as S from "./style";
+
+const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
+  const { filterItems, value, structuredData } = props;
+
+  const filters: IFilterValue[] = [
+    {
+      name: "all",
+      value: "all",
+      title: "All",
+    },
+  ];
+
+  const storedValue = value.split(",");
+  const parsedValue = storedValue.map((value) => (isNumber(value) ? parseInt(value) : value));
+  const [initialState] = useState(parsedValue);
+  const selectAllOption = "all";
+  const [selectedValue, setSelectedValue] = useState([...initialState]);
+  const [options, setOptions] = useState(filters);
+
+  const getSelectCategories = async () => {
+    try {
+      const items = await checkgroups.getCheckGroupItems("global", structuredData.source);
+      if (items && isReqOk(items.status)) {
+        return items.data;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    getSelectCategories().then((items) => {
+      items &&
+        items.forEach((item: { value: string; title: string }) => {
+          const newFilter = {
+            name: item.value,
+            value: item.value,
+            title: item.title,
+          };
+          filters.push(newFilter);
+        });
+      setOptions(filters);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = initialState;
+    }
+    setSelectedValue(selection);
+    const queryFilters = selection.join(",");
+    filterItems("categories", queryFilters);
+  };
+
+  const isActive = !areEquals(selectedValue, initialState);
+
+  const Header = () => (
+    <S.HeaderWrapper isActive={isActive}>
+      {structuredData.title}
+      <S.IconsWrapper>
+        <Icon name="Filter" size="16" />
+      </S.IconsWrapper>
+    </S.HeaderWrapper>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="left" closeOnSelect={false} isCheckGroup={true}>
+      <ListTitle>Filter by Category</ListTitle>
+      <S.ChecksWrapper>
+        <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
+      </S.ChecksWrapper>
+    </FloatingMenu>
+  );
+};
+
+interface ICategoryFilterProps {
+  filterItems(pointer: string, filter: string): void;
+  value: string;
+  structuredData: any;
+}
+
+export default CategoryFilter;

package/src/{modules/Content/HeaderMenus/Translations → components/TableFilters/CategoryFilter}/style.tsx

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
-const Translations = styled(Header)<{ isActive: boolean }>`
-  width: 90px;
+const HeaderWrapper = styled(Header)<{ isActive: boolean }>`
+  width: 150px;
   justify-content: center;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};
@@ -29,6 +29,7 @@ const InteractiveArrow = styled.div`
 
 const ChecksWrapper = styled.div`
   padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
+  overflow-y: auto;
 `;
 
-export { Translations, IconsWrapper, InteractiveArrow, ChecksWrapper };
+export { HeaderWrapper, IconsWrapper, InteractiveArrow, ChecksWrapper };

package/src/components/TableFilters/CustomizeFilters/index.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
+import { IColumn } from "@ax/types";
+
+import * as S from "./style";
+
+const CustomizeFilters = (props: ICustomizeFiltersProps): JSX.Element => {
+  const { columns, setColumns, value } = props;
+
+  const options = Object.keys(columns).map((col: string) => {
+    const disabled = value.length >= 5 && !value.includes(col);
+    return { name: col, title: columns[col].title, value: col, disabled };
+  });
+
+  const toggleColumn = (selection: any) => {
+    const updatedColumns = { ...columns };
+    Object.keys(columns).forEach((val: string, index: number) => {
+      if (selection.includes(val)) {
+        updatedColumns[val].show = true;
+      } else {
+        updatedColumns[val].show = false;
+      }
+    });
+    setColumns(updatedColumns);
+  };
+
+  const Button = () => (
+    <S.IconsWrapper>
+      <Icon name="settings" size="16" />
+    </S.IconsWrapper>
+  );
+
+  return (
+    <S.Wrapper>
+      <FloatingMenu Button={Button} position="right" closeOnSelect={false}>
+        <ListTitle>Customize filters</ListTitle>
+        <S.Note>You can select up to five options</S.Note>
+        <S.ChecksWrapper>
+          <CheckGroup options={options} value={value} onChange={toggleColumn} />
+        </S.ChecksWrapper>
+      </FloatingMenu>
+    </S.Wrapper>
+  );
+};
+
+interface ICustomizeFiltersProps {
+  setColumns(newValue: any): void;
+  columns: Record<string, IColumn>;
+  value: string[];
+}
+
+export default CustomizeFilters;

package/src/components/TableFilters/CustomizeFilters/style.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const ChecksWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
+`;
+
+const Note = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.xs};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin: ${(p) => `0 ${p.theme.spacing.s}`};
+`;
+
+export { Wrapper, IconsWrapper, ChecksWrapper, Note };

package/src/{modules/StructuredData/StructuredDataList/HeaderMenus/Live → components/TableFilters/LiveFilter}/index.tsx

@@ -7,8 +7,8 @@ import { IFilterValue, IPageLiveStatus } from "@ax/types";
 
 import * as S from "./style";
 
-const Live = (props: ILiveProps): JSX.Element => {
-  const { filterItems, value } = props;
+const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
+  const { filterItems, value, isStructuredData } = props;
 
   const filters: IFilterValue[] = [
     {
@@ -24,6 +24,7 @@ const Live = (props: ILiveProps): JSX.Element => {
   const selectAllOption = "all";
   const [selectedValue, setSelectedValue] = useState([...initialState]);
   const [options, setOptions] = useState(filters);
+  const structuredDataStatus = ["offline", "active"];
 
   const getLiveStatusValues = async () => {
     try {
@@ -47,7 +48,9 @@ const Live = (props: ILiveProps): JSX.Element => {
             title: item.title,
             icon: item.status,
           };
-          filters.push(newFilter);
+          if (!isStructuredData || (isStructuredData && structuredDataStatus.includes(newFilter.value))) {
+            filters.push(newFilter);
+          }
         });
         setOptions(filters);
       })
@@ -79,19 +82,28 @@ const Live = (props: ILiveProps): JSX.Element => {
     </S.MenuWrapper>
   );
 
+  const multipleSelection = options.length > 3;
+
   return (
     <FloatingMenu Button={Header} position="left" closeOnSelect={false}>
       <ListTitle>Filter by status</ListTitle>
       <S.ChecksWrapper>
-        <CheckGroup options={options} value={selectedValue} onChange={setQuery} selectAllOption={selectAllOption} />
+        <CheckGroup
+          options={options}
+          value={selectedValue}
+          onChange={setQuery}
+          selectAllOption={selectAllOption}
+          multipleSelection={multipleSelection}
+        />
       </S.ChecksWrapper>
     </FloatingMenu>
   );
 };
 
-interface ILiveProps {
+interface ILiveFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: string;
+  isStructuredData?: boolean;
 }
 
-export default Live;
+export default LiveFilter;

package/src/{modules/StructuredData/StructuredDataList/HeaderMenus/Name → components/TableFilters/NameFilter}/index.tsx

@@ -4,8 +4,10 @@ import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
 
 import * as S from "./style";
 
-const NameHeader = ({ sortItems, sortedState }: INameHeaderProps) => {
+const NameFilter = (props: INameFilterProps): JSX.Element => {
+  const { sortItems, sortedState, urlSorting } = props;
   const { isAscending, sortedByTitle, sortedByURL } = sortedState;
+
   const sortByName = (isAscending: boolean) => sortItems("title", isAscending);
   const sortAscendingURL = () => sortItems("slug", true);
   const sortAscendingName = () => sortByName(true);
@@ -15,9 +17,11 @@ const NameHeader = ({ sortItems, sortedState }: INameHeaderProps) => {
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
   const isActive = sortedByTitle || sortedByURL;
 
+  const title = urlSorting ? "Name & URL" : "Name";
+
   const Header = () => (
     <S.NameHeader isActive={isActive}>
-      Name & URL
+      {title}
       <S.IconsWrapper>
         {(sortedByTitle || sortedByURL) && <SortedStateArrow />}
         <S.InteractiveArrow>
@@ -36,17 +40,22 @@ const NameHeader = ({ sortItems, sortedState }: INameHeaderProps) => {
       <ListItem isSelected={sortedByTitle && !isAscending} onClick={sortDescendingName}>
         Descendent
       </ListItem>
-      <ListTitle>URL Sorting</ListTitle>
-      <ListItem isSelected={sortedByURL} onClick={sortAscendingURL}>
-        Ascendent
-      </ListItem>
+      {urlSorting && (
+        <>
+          <ListTitle>URL Sorting</ListTitle>
+          <ListItem isSelected={sortedByURL} onClick={sortAscendingURL}>
+            Ascendent
+          </ListItem>
+        </>
+      )}
     </FloatingMenu>
   );
 };
 
-interface INameHeaderProps {
+interface INameFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): any;
+  sortItems(orderPointer: string, isAscendent: boolean): void;
+  urlSorting?: boolean;
 }
 
-export default NameHeader;
+export default NameFilter;

package/src/{modules/StructuredData/StructuredDataList/HeaderMenus/Site → components/TableFilters/SiteFilter}/index.tsx

@@ -7,7 +7,7 @@ import { IFilterValue } from "@ax/types";
 
 import * as S from "./style";
 
-const Site = (props: ISiteProps): JSX.Element => {
+const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
   const { filterItems, value } = props;
 
   const filters: IFilterValue[] = [
@@ -83,9 +83,9 @@ const Site = (props: ISiteProps): JSX.Element => {
   );
 };
 
-interface ISiteProps {
+interface ISiteFilterProps {
   filterItems(pointer: string, filter: string): void;
   value: string;
 }
 
-export default Site;
+export default SiteFilter;

package/src/{modules/StructuredData/StructuredDataList/HeaderMenus/Site → components/TableFilters/SiteFilter}/style.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
 const Site = styled(Header)<{ isActive: boolean }>`
-  width: 230px;
+  width: 170px;
   justify-content: center;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};