@griddo/ax 1.75.72 → 1.75.74

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.72",
+  "version": "1.75.74",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5546a54eb3e80dc498ef24e88e552e0c23c09e2a"
+  "gitHead": "4c2989da49d8b494544ca2457532353c154b0d03"
 }

package/src/__tests__/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`Avatar component rendering should render the component only with name 1`] = `
 <div
-  className="sc-gScZFl gCBoym"
+  className="sc-gSAPjG jRkXjC"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbVpMG hOAqbs"
+    className="sc-lbxAil fkodDH"
     data-testid="avatar"
   />
 </div>
@@ -14,11 +14,11 @@ exports[`Avatar component rendering should render the component only with name 1
 
 exports[`Avatar component rendering should render the component with a wrong image url 1`] = `
 <div
-  className="sc-gScZFl gCBoym"
+  className="sc-gSAPjG jRkXjC"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbVpMG kLnTvZ"
+    className="sc-lbxAil ejhcAS"
     data-testid="avatar"
   />
 </div>
@@ -26,11 +26,11 @@ exports[`Avatar component rendering should render the component with a wrong ima
 
 exports[`Avatar component rendering should render the component with an empty string as name 1`] = `
 <div
-  className="sc-gScZFl gCBoym"
+  className="sc-gSAPjG jRkXjC"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbVpMG dbQJiT"
+    className="sc-lbxAil hilXDA"
     data-testid="avatar"
   />
 </div>
@@ -38,11 +38,11 @@ exports[`Avatar component rendering should render the component with an empty st
 
 exports[`Avatar component rendering should render the component with image null 1`] = `
 <div
-  className="sc-gScZFl gCBoym"
+  className="sc-gSAPjG jRkXjC"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbVpMG jpmXvZ"
+    className="sc-lbxAil jDWEnq"
     data-testid="avatar"
   />
 </div>
@@ -50,11 +50,11 @@ exports[`Avatar component rendering should render the component with image null
 
 exports[`Avatar component rendering should render the component without name or image 1`] = `
 <div
-  className="sc-gScZFl gCBoym"
+  className="sc-gSAPjG jRkXjC"
   data-testid="avatar-wrapper"
 >
   <div
-    className="sc-lbVpMG dbQJiT"
+    className="sc-lbxAil hilXDA"
     data-testid="avatar"
   />
 </div>

package/src/__tests__/components/Fields/ColorPicker/ColorPicker.test.tsx

@@ -39,39 +39,6 @@ describe("ColorPicker component rendering", () => {
     expect(screen.findByTestId("picker-wrapper")).toBeTruthy();
   });
 
-  test("should not render the text input field if onlyFixedColors is true", () => {
-    defaultProps.theme = "griddo-default";
-    defaultProps.error = true;
-    defaultProps.onlyFixedColors = true;
-    defaultProps.colors = [
-      {
-        theme: "griddo-default",
-        options: [
-          { name: "chart1", hex: "#d9e3f0" },
-          { name: "chart2", hex: "#697689" },
-          { name: "chart2", hex: "#37d67a" },
-        ],
-      },
-      {
-        theme: "griddo-alternative",
-        options: [
-          { name: "chart1", hex: "#fffff" },
-          { name: "chart2", hex: "#ddddd" },
-          { name: "chart2", hex: "#00000" },
-        ],
-      },
-    ];
-
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <ColorPicker {...defaultProps} />
-      </ThemeProvider>
-    );
-    const inputActionComponent = screen.getByTestId("icon-action-component");
-    expect(inputActionComponent).toBeTruthy();
-    fireEvent.click(inputActionComponent);
-    expect(screen.queryByTestId("input-picker")).not.toBeTruthy();
-  });
 });
 
 describe("ColorPicker events", () => {
@@ -79,7 +46,7 @@ describe("ColorPicker events", () => {
     defaultProps.value = "#000000";
     defaultProps.theme = parseTheme(globalTheme);
     defaultProps.colors = ["#000000", "#d9e3f0", "#f47373", "#697689"];
-    defaultProps.onlyFixedColors = false;
+    defaultProps.isThemePalette = false;
     const onChangeMock = defaultProps.onChange as jest.MockedFunction<(newColor: string) => void>;
 
     render(

package/src/api/structuredData.tsx

@@ -119,6 +119,7 @@ const getDataContents = (params: IGetStructuredDataParams, siteID?: number | nul
     query,
     filterQuery,
     relatedFields = false,
+    order,
   } = params;
 
   const url = siteID ? `${host}/site/${siteID}${endpoint}` : `${host}${endpoint}`;
@@ -126,6 +127,7 @@ const getDataContents = (params: IGetStructuredDataParams, siteID?: number | nul
   SERVICES.GET_DATA_CONTENTS.dynamicUrl = `${url}${dataID}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}&deleted=${deleted}&includeDraft=${include_draft}`;
   if (relatedFields) SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&relatedFields=true`;
   if (query && query.trim() !== "") SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&query=${query}`;
+  if (order) SERVICES.GET_DATA_CONTENTS.dynamicUrl += `&order=${order}`;
   if (filterQuery) SERVICES.GET_DATA_CONTENTS.dynamicUrl += filterQuery;
 
   return sendRequest(SERVICES.GET_DATA_CONTENTS);

package/src/components/Fields/ColorPicker/Picker/index.tsx

@@ -4,7 +4,7 @@ import { hex3to6, defaultColors } from "./../helpers";
 import * as S from "./style";
 
 const Picker = (props: IProps): JSX.Element => {
-  const { value, onChange, colors, onlyFixedColors } = props;
+  const { value, onChange, colors } = props;
   const [color, setColor] = useState(value);
   const [inputValue, setInputValue] = useState(value);
 
@@ -25,7 +25,7 @@ const Picker = (props: IProps): JSX.Element => {
     }
   };
 
-  const handleClick = (newColor: string | any ) => () => {
+  const handleClick = (newColor: string | any) => () => {
     const gridColor = typeof newColor !== "object" ? newColor : newColor.hex;
     setInputValue(gridColor);
     setColor(gridColor);
@@ -63,11 +63,9 @@ const Picker = (props: IProps): JSX.Element => {
           );
         })}
       </S.Grid>
-      {!onlyFixedColors ? (
-        <S.InputWrapper>
-          <S.Input data-testid="input-picker" type="text" value={inputValue} onChange={handleChange} />
-        </S.InputWrapper>
-      ) : null}
+      <S.InputWrapper>
+        <S.Input data-testid="input-picker" type="text" value={inputValue} onChange={handleChange} />
+      </S.InputWrapper>
     </S.Wrapper>
   );
 };
@@ -76,7 +74,6 @@ export interface IProps {
   value: string;
   colors?: string[];
   onChange: (newColor: string) => void;
-  onlyFixedColors?: boolean;
 }
 
 export default Picker;

package/src/components/Fields/ColorPicker/helpers.tsx

@@ -19,9 +19,9 @@ const defaultColors = [
   "#ba68c8",
 ];
 
-const getOptions = (theme: string, onlyFixedColors: boolean | undefined, colorOptions: any[] | undefined) => {
+const getOptions = (theme: string, isThemePalette: boolean | undefined, colorOptions: any[] | undefined) => {
   if (!colorOptions) return defaultColors;
-  if (onlyFixedColors) return colorOptions;
+  if (isThemePalette) return colorOptions;
 
   const themes = colorOptions.filter((entry) => entry.theme).map((entry) => entry.theme);
   const themeExists = themes.includes(theme);

package/src/components/Fields/ColorPicker/index.tsx

@@ -8,10 +8,10 @@ import Picker from "./Picker";
 import * as S from "./style";
 
 const ColorPicker = (props: IProps): JSX.Element => {
-  const { value, onChange, error, colors = [], handleValidation, theme, onlyFixedColors } = props;
+  const { value, onChange, error, colors = [], handleValidation, theme, isThemePalette } = props;
 
   const getCurrentColors = () => {
-    if (onlyFixedColors) {
+    if (isThemePalette) {
       const currentOption = colors?.find((options: any) => options.theme === theme);
       return currentOption ? currentOption?.options : defaultColors;
     } else {
@@ -22,9 +22,12 @@ const ColorPicker = (props: IProps): JSX.Element => {
   const currentColors = getCurrentColors();
 
   const getInitialState = () => {
+    const hexRegEx = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    const isHexValue = hexRegEx.test(value);
+
     const defaultColor = currentColors[0];
-    if (onlyFixedColors) {
-      const currentValue = currentColors.find((color: any) => color.name === value);
+    if (isThemePalette) {
+      const currentValue = isHexValue ? { hex: value } : currentColors.find((color: any) => color.name === value);
       const isObject = typeof defaultColor === "object";
 
       let color;
@@ -102,7 +105,6 @@ const ColorPicker = (props: IProps): JSX.Element => {
           error={error}
           placeholder="#FFFFFF"
           onBlur={handleOnBlur}
-          readOnly={onlyFixedColors}
         />
         <S.IconWrapper>
           <IconAction icon={icon} size="s" onClick={togglePicker} />
@@ -112,8 +114,7 @@ const ColorPicker = (props: IProps): JSX.Element => {
         <Picker
           value={state.color}
           onChange={handlePickerChange}
-          colors={getOptions(theme, onlyFixedColors, currentColors)}
-          onlyFixedColors={onlyFixedColors}
+          colors={getOptions(theme, isThemePalette, currentColors)}
         />
       )}
     </S.Wrapper>
@@ -127,7 +128,7 @@ export interface IProps {
   onChange: (newColor: string) => void;
   handleValidation?: (value: string, validators: Record<string, unknown>) => void;
   theme: string;
-  onlyFixedColors?: boolean;
+  isThemePalette?: boolean;
 }
 
 export default memo(ColorPicker);

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/index.tsx

@@ -68,9 +68,10 @@ const AutoItem = (props: IProps) => {
       dataID: newValue,
       page: 1,
       itemsPerPage: 50,
-      pagination: true,
+      pagination: false,
       deleted: false,
       include_draft: false,
+      order: "alpha-asc",
     };
 
     const siteID = getIsGlobal(newValue) ? null : site.id;

package/src/components/ResizePanel/ResizeHandle/style.tsx

@@ -8,7 +8,8 @@ const Handler = styled.div`
   background-color: ${(p) => p.theme.color.interactiveDisabled};
   cursor: ew-resize;
   z-index: 1;
-  transform: translateX(${(p) => `-${p.theme.spacing.s}`});
+  transform: translateX(${(p) => p.theme.spacing.xs});
+  flex-shrink: 0;
   &:hover {
     background-color: ${(p) => p.theme.color.interactive01};
   }

package/src/components/ResizePanel/index.tsx

@@ -33,8 +33,8 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
           leftPanel
         )}
       </S.LeftPanel>
+      <ResizeHandle onMouseMove={resize} />
       <S.RightPanel width={rwidth} ref={rightPanelRef} data-testid="right-panel">
-        <ResizeHandle onMouseMove={resize} />
         {rightPanel}
       </S.RightPanel>
     </>

package/src/components/ResizePanel/style.tsx

@@ -19,6 +19,7 @@ export const RightPanel = styled.section<{ width: number }>`
   width: ${(p) => p.width}px;
   min-width: 344px;
   max-width: ${(p) => `calc(100% - 500px - ${p.theme.spacing.m})`};
+  flex-direction: column;
 `;
 
 export const FixedPanel = styled.div<{ width: number }>`

package/src/containers/PageEditor/actions.tsx

@@ -974,8 +974,10 @@ function updateEditorContent(
       pageEditor: { editorContent, selectedContent },
     } = getState();
 
+    const clonedContent = deepClone(editorContent);
+
     const updatedSelectedContent = updateByEditorID(selectedContent, selectedEditorID, key, value);
-    const updatedEditorContent = updateByEditorID(editorContent, selectedEditorID, key, value);
+    const updatedEditorContent = updateByEditorID(clonedContent, selectedEditorID, key, value);
 
     setSelectedContent(updatedSelectedContent);
     dispatch(setEditorContent(updatedEditorContent));

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/style.tsx

@@ -12,16 +12,17 @@ const Title = styled.p`
 `;
 
 const Tab = styled.div`
-  border-bottom: ${p => `1px solid ${p.theme.color.uiLine}`};
-  margin: ${p => p.theme.spacing.s} 0;
-  padding-bottom: ${p => p.theme.spacing.s};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  margin: ${(p) => p.theme.spacing.s} 0;
+  padding-bottom: ${(p) => p.theme.spacing.s};
   ${(p) => p.theme.textStyle.headingXS};
-  color: ${p => p.theme.color.textHighEmphasis};
+  color: ${(p) => p.theme.color.textHighEmphasis};
   text-align: center;
 `;
 
 const FieldsWrapper = styled.div`
   margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};
+  height: 100%;
 `;
 
 const FieldsTitle = styled.div`
@@ -33,10 +34,4 @@ const FieldsTitle = styled.div`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
-export {
-  HeaderWrapper,
-  Title,
-  Tab,
-  FieldsWrapper,
-  FieldsTitle,
-};
+export { HeaderWrapper, Title, Tab, FieldsWrapper, FieldsTitle };

package/src/types/index.tsx

@@ -320,6 +320,7 @@ export interface IGetStructuredDataParams {
   query?: string;
   filterQuery?: string;
   relatedFields?: boolean;
+  order?: string;
 }
 
 export interface IMenu {