@griddo/ax 11.4.7-rc.0 → 11.4.7-rc.2

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.4.7-rc.0",
+  "version": "11.4.7-rc.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
+    "Carlos Torres <carlos.torres@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
     "Francis Vega <francis.vega@secuoyas.com>",
     "Gonzalo Hernández <gonzalo.hernandez@secuoyas.com>",
@@ -40,144 +41,153 @@
   },
   "dependencies": {
     "@atlaskit/tree": "8.12.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.16",
+    "@babel/plugin-transform-optional-chaining": "7.24.5",
+    "@babel/preset-react": "^7.14.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.0",
     "@styled-system/prop-types": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
     "@svgr/webpack": "5.5.0",
-    "@types/compress.js": "1.1.3",
-    "@types/draft-js": "0.11.18",
-    "@types/lodash.isequal": "4.5.8",
-    "@types/markdown-draft-js": "2.2.7",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.4",
+    "@types/compress.js": "^1.1.0",
+    "@types/draft-js": "^0.10.44",
+    "@types/lodash.isequal": "^4.5.5",
+    "@types/markdown-draft-js": "^2.2.2",
     "@types/node": "20.17.10",
-    "@types/react": "18.2.79",
-    "@types/react-beautiful-dnd": "13.1.3",
-    "@types/react-datepicker": "4.19.6",
-    "@types/react-dom": "18.2.25",
-    "@types/react-draft-wysiwyg": "1.13.8",
-    "@types/react-redux": "7.1.34",
+    "@types/react": "18.2.11",
+    "@types/react-beautiful-dnd": "^13.1.2",
+    "@types/react-datepicker": "^3.1.1",
+    "@types/react-dom": "18.0.11",
+    "@types/react-draft-wysiwyg": "^1.13.1",
+    "@types/react-redux": "^7.1.23",
     "@types/react-router-dom": "5.3.3",
-    "@types/react-slick": "0.23.13",
+    "@types/react-select": "4.0.18",
+    "@types/react-slick": "^0.23.10",
     "@types/react-test-renderer": "17.0.1",
-    "@types/styled-components": "5.1.34",
-    "@types/webpack-env": "1.18.0",
-    "add": "2.0.6",
-    "axios": "0.30.0",
+    "@types/react-textarea-autosize": "^4.3.5",
+    "@types/styled-components": "^5.1.25",
+    "@types/uuid": "8.3.4",
+    "@types/webpack-env": "^1.14.1",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "add": "^2.0.6",
+    "axios": "0.19.0",
+    "babel-eslint": "10.0.3",
+    "babel-loader": "8.2.2",
+    "babel-plugin-named-asset-import": "^0.3.7",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "babel-plugin-root-import": "^6.4.1",
+    "babel-plugin-styled-components": "^1.13.2",
+    "babel-preset-react-app": "^10.0.0",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
-    "compress.js": "1.2.2",
-    "connected-react-router": "6.9.3",
-    "css-loader": "5.2.7",
+    "compress.js": "^1.1.2",
+    "connected-react-router": "^6.9.2",
+    "css-loader": "^4.3.0",
     "css-minimizer-webpack-plugin": "3.0.2",
-    "date-fns": "2.30.0",
-    "dotenv": "16.4.7",
-    "dotenv-expand": "11.0.7",
-    "draft-js": "0.11.7",
-    "draft-js-import-html": "1.4.1",
-    "draftjs-to-html": "0.9.1",
-    "enhanced-resolve": "5.18.1",
-    "env-cmd": "10.1.0",
-    "file-loader": "6.2.0",
-    "find-up": "5.0.0",
-    "fs-extra": "11.3.0",
-    "html-to-draftjs": "1.5.0",
-    "html-to-image": "1.11.7",
+    "date-fns": "^2.21.3",
+    "dotenv": "6.2.0",
+    "dotenv-expand": "5.1.0",
+    "draft-js": "^0.11.7",
+    "draft-js-import-html": "^1.4.1",
+    "draftjs-to-html": "^0.9.1",
+    "enhanced-resolve": "^5.8.2",
+    "env-cmd": "^10.1.0",
+    "file-loader": "^6.2.0",
+    "find-up": "^5.0.0",
+    "fs-extra": "7.0.1",
+    "html-to-draftjs": "^1.5.0",
+    "html-to-image": "^1.9.0",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
-    "ignore-loader": "0.1.2",
-    "is-wsl": "3.1.0",
-    "jsdom": "20.0.3",
-    "jsdom-global": "3.0.2",
+    "ignore-loader": "^0.1.2",
+    "is-wsl": "^1.1.0",
+    "jest-environment-jsdom": "^27.5.1",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-resolve": "24.9.0",
+    "jest-watch-typeahead": "0.4.0",
+    "jsdom": "^19.0.0",
+    "jsdom-global": "^3.0.2",
     "lodash.isequal": "4.5.0",
-    "markdown-draft-js": "2.4.0",
-    "masonic": "4.1.0",
+    "markdown-draft-js": "^2.2.1",
+    "masonic": "^4.0.1",
     "mini-css-extract-plugin": "0.11.3",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
-    "pkg-dir": "5.0.0",
-    "pnp-webpack-plugin": "1.7.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "pkg-dir": "^5.0.0",
+    "pnp-webpack-plugin": "^1.7.0",
     "polished": "3.4.1",
-    "postcss": "8.5.3",
+    "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "7.0.1",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "6.0.0",
-    "react": "18.2.0",
-    "react-beautiful-dnd": "13.1.1",
-    "react-datepicker": "4.25.0",
-    "react-dev-utils": "11.0.4",
-    "react-dom": "18.2.0",
-    "react-draft-wysiwyg": "1.15.0",
+    "postcss-safe-parser": "^6.0.0",
+    "react": "18.1.0",
+    "react-app-polyfill": "^1.0.4",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-datepicker": "^3.2.2",
+    "react-dev-utils": "^11.0.4",
+    "react-dom": "18.1.0",
+    "react-draft-wysiwyg": "^1.14.5",
     "react-error-boundary": "4.0.13",
-    "react-froala-wysiwyg": "3.2.7",
-    "react-redux": "7.2.9",
-    "react-refresh": "0.14.2",
+    "react-frame-component": "^5.2.1",
+    "react-froala-wysiwyg": "^3.2.7",
+    "react-redux": "^7.2.8",
+    "react-refresh": "^0.10.0",
     "react-router-dom": "5.1.2",
-    "react-select": "5.10.1",
-    "react-slick": "0.30.3",
-    "react-textarea-autosize": "8.5.9",
-    "redux": "4.2.1",
-    "redux-devtools-extension": "2.13.9",
+    "react-select": "4.3.1",
+    "react-slick": "^0.29.0",
+    "react-textarea-autosize": "^7.1.2",
+    "redux": "4.0.4",
+    "redux-devtools-extension": "2.13.8",
     "redux-persist": "6.0.0",
-    "reflect-metadata": "0.2.2",
-    "resolve": "1.22.10",
-    "resolve-url-loader": "5.0.0",
-    "sass-loader": "10.4.1",
-    "semver": "7.7.1",
+    "redux-thunk": "^2.4.1",
+    "reflect-metadata": "0.1.13",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass-alias": "^1.0.5",
+    "sass-loader": "^10.0.0",
+    "semver": "7.6.3",
     "slick-carousel": "1.8.1",
-    "style-loader": "2.0.0",
-    "styled-components": "5.3.11",
-    "styled-reset": "4.5.2",
+    "source-map-loader": "^1.1.2",
+    "string-replace-loader": "^3.0.1",
+    "style-loader": "^1.2.1",
+    "styled-components": "^5.3.5",
+    "styled-reset": "4.0.1",
     "styled-system": "5.1.5",
-    "terser-webpack-plugin": "1.4.6",
-    "ts-pnp": "1.2.0",
+    "terser-webpack-plugin": "1.4.1",
+    "ts-pnp": "1.1.4",
+    "typescript": "^4.6.3",
     "url-loader": "4.1.1",
-    "webpack": "4.47.0",
+    "uuid": "8.3.2",
+    "webpack": "4.44.2",
     "webpack-dev-server": "3.11.1",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
   },
   "devDependencies": {
-    "@babel/core": "7.26.10",
-    "@babel/plugin-transform-optional-chaining": "7.25.9",
-    "@babel/preset-env": "7.26.9",
-    "@babel/preset-react": "7.26.3",
-    "@babel/preset-typescript": "7.26.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
-    "@testing-library/user-event": "14.6.1",
-    "@types/jest": "27.5.2",
-    "@types/redux-mock-store": "1.0.3",
-    "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
-    "axios-mock-adapter": "1.22.0",
-    "babel-eslint": "10.0.3",
-    "babel-jest": "27.5.1",
-    "babel-loader": "8.2.2",
-    "babel-plugin-named-asset-import": "0.3.8",
-    "babel-plugin-require-context-hook": "1.0.0",
-    "babel-plugin-root-import": "6.6.0",
-    "babel-plugin-styled-components": "2.1.4",
-    "babel-preset-react-app": "10.1.0",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-typescript": "^7.16.7",
+    "@types/jest": "^27.4.1",
+    "@types/redux-mock-store": "^1.0.3",
+    "axios-mock-adapter": "^1.21.2",
+    "babel-jest": "^27.5.1",
     "eslint": "8.57.1",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "jest": "27.5.1",
-    "jest-environment-jsdom": "27.5.1",
-    "jest-environment-jsdom-fourteen": "0.1.0",
-    "jest-mock-extended": "2.0.9",
-    "jest-resolve": "24.9.0",
-    "jest-styled-components": "7.1.1",
-    "jest-watch-typeahead": "0.4.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.14.3",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^27.5.1",
+    "jest-mock-extended": "^2.0.5",
+    "jest-styled-components": "^7.0.8",
     "prettier": "3.4.2",
-    "react-test-renderer": "18.2.0",
-    "redux-mock-store": "1.5.5",
-    "redux-thunk": "2.4.2",
-    "ts-jest": "27.1.5",
-    "ts-node": "10.9.2",
-    "typescript": "4.9.5",
-    "uuid": "8.3.2"
+    "react-test-render": "1.1.2",
+    "react-test-renderer": "^18.2.0",
+    "redux-mock-store": "^1.5.4",
+    "ts-jest": "^27.1.4",
+    "ts-node": "^10.9.1"
   },
   "babel": {
     "presets": [
@@ -216,5 +226,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ea91b510202417b9d414a9df067104771a54e45e"
+  "gitHead": "ad958b5ae9970910fcf0a26b6858b71dd8c7116f"
 }

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

@@ -65,7 +65,6 @@ describe("Wysiwyg component rendering", () => {
       defaultLanguage: 4,
       path: "",
       domain: 1,
-      navigationModules: [],
     };
 
     const initialState = { ...initialStore, ...defaultProps };

package/src/api/utils.tsx

@@ -1,4 +1,4 @@
-import axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, Method, ResponseType } from "axios";
+import axios, { AxiosRequestConfig, AxiosResponse, Method, ResponseType } from "axios";
 import { SET_ERROR } from "./../containers/App/constants";
 
 export interface IServiceConfig {
@@ -31,7 +31,7 @@ const getLang = (): Record<string, unknown> => {
   return { lang };
 };
 
-const getHeaders = (headers: Record<string, unknown>, hasToken: boolean) => {
+const getHeaders = (headers: Record<string, unknown>, hasToken: boolean): Record<string, unknown> => {
   return hasToken
     ? {
         ...headers,
@@ -47,7 +47,7 @@ const getHeaders = (headers: Record<string, unknown>, hasToken: boolean) => {
 const wrapConfig = (serviceConfig: IServiceConfig): AxiosRequestConfig => {
   const { host, endpoint, method, headers: configHeaders, hasToken, dynamicUrl, responseType } = serviceConfig;
 
-  const headers = getHeaders(configHeaders, hasToken) as AxiosRequestHeaders;
+  const headers = getHeaders(configHeaders, hasToken);
 
   return {
     url: dynamicUrl ? dynamicUrl : `${host}${endpoint}`,
@@ -57,7 +57,7 @@ const wrapConfig = (serviceConfig: IServiceConfig): AxiosRequestConfig => {
   };
 };
 
-/*class RequestCache {
+class RequestCache {
   private _cacheTime = 1; // SECONDS
   private _cache: { [key: string]: { timestamp: number; value: string } } = {};
 
@@ -80,7 +80,7 @@ const wrapConfig = (serviceConfig: IServiceConfig): AxiosRequestConfig => {
   }
 }
 
-const requestCache = new RequestCache();*/
+const requestCache = new RequestCache();
 
 export const sendInitialRequest = async (
   serviceConfig: IServiceConfig,
@@ -89,13 +89,13 @@ export const sendInitialRequest = async (
 ): Promise<AxiosResponse> => {
   const { headers: configHeaders, method, host, endpoint, dynamicUrl } = serviceConfig;
 
-  const config: AxiosRequestConfig<Record<string, unknown>> = {
+  const config = {
     url: dynamicUrl ? dynamicUrl : `${host}${endpoint}`,
     method,
     headers: {
       ...configHeaders,
       Authorization: "bearer " + token,
-    } as AxiosRequestHeaders,
+    },
   };
 
   try {
@@ -118,10 +118,9 @@ export const sendRequest = async (
   dataHeader?: Record<string, unknown>
 ): Promise<AxiosResponse> => {
   let config = wrapConfig(serviceConfig);
-  const headers = { ...config.headers, ...dataHeader } as AxiosRequestHeaders;
 
   if (dataHeader) {
-    config = { ...config, headers };
+    config = { ...config, headers: { ...config.headers, ...dataHeader } };
   }
 
   try {

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

@@ -94,8 +94,8 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entity, site, lang, selectedContent, entityId, mandatory, placeholder, filter, isCategories, isPage, options]);
 
-  const handleChange = (selectedValue: unknown | null) => {
-    const newValue = selectedValue ? (selectedValue as ICheck | IOption).value : null;
+  const handleChange = (selectedValue: ICheck | IOption | null) => {
+    const newValue = selectedValue ? selectedValue.value : selectedValue;
     onChange(newValue);
   };
 
@@ -141,8 +141,8 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
         error={error}
         isDisabled={disabled}
         className={className}
-        required={mandatory}
-        isClearable={state.hasEmptyOption}
+        mandatory={mandatory}
+        hasEmptyOption={state.hasEmptyOption}
         isSearchable={searchable}
         maxWidth={maxWidth}
         inputValue={state.inputText}

package/src/components/Fields/AsyncSelect/style.tsx

@@ -68,8 +68,8 @@ export const StyledSelect = styled(AsyncSelect)<{
         padding: ${(p) => `13px ${p.theme.spacing.s} 12px ${p.theme.spacing.s}`};
         &:first-child {
           ${(p) =>
-            !p.required &&
-            p.isClearable &&
+            !p.mandatory &&
+            p.hasEmptyOption &&
             css`
               font-style: italic;
               color: ${(p) => p.theme.color.textLowEmphasis};
@@ -103,6 +103,7 @@ export const StyledSelect = styled(AsyncSelect)<{
       background: transparent;
       border: none;
       height: auto;
+      justify-content: ${(p) => (p.alignRight ? "flex-end" : "flex-start")};
       min-width: auto;
 
       .react-select__value-container {

package/src/components/Fields/DateField/style.tsx

@@ -49,20 +49,14 @@ export const DatePickerWrapper = styled.div`
       border: none;
     }
 
-    .react-datepicker__navigation-icon {
-      display: none;
-    }
-
     &.react-datepicker__navigation--next {
       background-image: url(/img/icons/Right-arrow.svg);
       margin-right: ${(p) => p.theme.spacing.s};
-      margin-top: ${(p) => p.theme.spacing.xs};
     }
 
     &.react-datepicker__navigation--previous {
       background-image: url(/img/icons/Left-arrow.svg);
       margin-left: ${(p) => p.theme.spacing.s};
-      margin-top: ${(p) => p.theme.spacing.xs};
     }
   }
 

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

@@ -27,7 +27,7 @@ const Select = (props: ISelectProps): JSX.Element => {
 
   const optionValues: IOptionProps[] = hasEmptyOption ? [emptyOption, ...options] : options;
 
-  const handleChange = (selectedValue: unknown) => onChange((selectedValue as IOptionProps).value);
+  const handleChange = (selectedValue: IOptionProps) => onChange(selectedValue.value);
 
   const handleInputChange = (inputText: string, meta: InputActionMeta) => {
     if (meta.action !== "input-blur" && meta.action !== "menu-close") {
@@ -57,7 +57,7 @@ const Select = (props: ISelectProps): JSX.Element => {
         error={error}
         onChange={handleChange}
         isSearchable={searchable}
-        isClearable={hasEmptyOption}
+        hasEmptyOption={hasEmptyOption}
         onInputChange={handleInputChange}
         alignRight={alignRight}
         aria-label={name}

package/src/components/Fields/Select/style.tsx

@@ -68,7 +68,7 @@ export const StyledSelect = styled(Select)<{
         padding: ${(p) => `13px ${p.theme.spacing.s} 12px ${p.theme.spacing.s}`};
         &:first-child {
           ${(p) =>
-            p.isClearable &&
+            p.hasEmptyOption &&
             css`
               font-style: italic;
               color: ${(p) => p.theme.color.textLowEmphasis};