@coorpacademy/components 11.6.1 → 11.7.3-alpha.29

package/es/template/common/search-page/index.d.ts

@@ -55,6 +55,15 @@ declare namespace SearchPage {
                     selected: PropTypes.Requireable<boolean>;
                     validOption: PropTypes.Requireable<boolean>;
                 }> | null | undefined)[]>;
+                optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+                    label: PropTypes.Validator<string>;
+                    options: PropTypes.Requireable<(PropTypes.InferProps<{
+                        name: PropTypes.Validator<string>;
+                        value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                        selected: PropTypes.Requireable<boolean>;
+                        validOption: PropTypes.Requireable<boolean>;
+                    }> | null | undefined)[]>;
+                }> | null | undefined)[]>;
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
@@ -64,6 +73,7 @@ declare namespace SearchPage {
             onToggleSorts: PropTypes.Requireable<(...args: any[]) => any>;
             moreSortAriaLabel: PropTypes.Requireable<string>;
             moreFilterAriaLabel: PropTypes.Requireable<string>;
+            filterGroupAriaLabel: PropTypes.Requireable<string>;
         }>>;
         const cards: PropTypes.Requireable<PropTypes.InferProps<{
             list: PropTypes.Requireable<(PropTypes.InferProps<any> | null | undefined)[]>;
@@ -100,6 +110,7 @@ declare namespace SearchPage {
         }>>;
         const moreSortAriaLabel: PropTypes.Requireable<string>;
         const moreFilterAriaLabel: PropTypes.Requireable<string>;
+        const filterGroupAriaLabel: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/es/template/common/search-page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAUA,mEAkDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/search-page/index.js"],"names":[],"mappings":";AAUA,mEAoDC"}

package/es/template/common/search-page/index.js

@@ -21,7 +21,8 @@ const SearchPage = (props, context) => {
     clearFilters,
     recommendations,
     moreSortAriaLabel,
-    moreFilterAriaLabel
+    moreFilterAriaLabel,
+    filterGroupAriaLabel
   } = props;
   const {
     skin
@@ -44,7 +45,8 @@ const SearchPage = (props, context) => {
   }))), recommendationsView) : /*#__PURE__*/React.createElement(CardsGrid, cards);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Filters, _extends({}, searchFilters, {
     moreSortAriaLabel: moreSortAriaLabel,
-    moreFilterAriaLabel: moreFilterAriaLabel
+    moreFilterAriaLabel: moreFilterAriaLabel,
+    filterGroupAriaLabel: filterGroupAriaLabel
   })), /*#__PURE__*/React.createElement("div", {
     "data-name": "searchResult",
     className: style.cardsWrapper
@@ -65,7 +67,8 @@ SearchPage.propTypes = process.env.NODE_ENV !== "production" ? {
   clearFilters: PropTypes.shape(Button.propTypes),
   recommendations: PropTypes.shape(CardsList.propTypes),
   moreSortAriaLabel: PropTypes.string,
-  moreFilterAriaLabel: PropTypes.string
+  moreFilterAriaLabel: PropTypes.string,
+  filterGroupAriaLabel: PropTypes.string
 } : {};
 export default SearchPage;
 //# sourceMappingURL=index.js.map

package/es/template/common/search-page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Provider","Button","Filters","CardsGrid","CardsList","style","SearchPage","props","context","title","searchFilters","cards","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","skin","defaultColor","recommendationsView","cardsView","list","noresults","noresultstxt","clear","background","cardsWrapper","contextTypes","childContextTypes","propTypes","string","shape"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {\n    title,\n    searchFilters,\n    cards,\n    noresultsfound,\n    clearFilters,\n    recommendations,\n    moreSortAriaLabel,\n    moreFilterAriaLabel\n  } = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  const cardsView = isEmpty(cards.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  return (\n    <div>\n      <Filters\n        {...searchFilters}\n        moreSortAriaLabel={moreSortAriaLabel}\n        moreFilterAriaLabel={moreFilterAriaLabel}\n      />\n      <div data-name=\"searchResult\" className={style.cardsWrapper}>\n        <div className={style.title} role=\"status\">\n          {title}\n        </div>\n        {cardsView}\n      </div>\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes),\n  moreSortAriaLabel: PropTypes.string,\n  moreFilterAriaLabel: PropTypes.string\n};\n\nexport default SearchPage;\n"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,MAAP,MAAmB,sBAAnB;AACA,OAAOC,OAAP,MAAoB,2BAApB;AACA,OAAOC,SAAP,MAAsB,8BAAtB;AACA,OAAOC,SAAP,MAAsB,wCAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,UAAU,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IACJC,KADI;IAEJC,aAFI;IAGJC,KAHI;IAIJC,cAJI;IAKJC,YALI;IAMJC,eANI;IAOJC,iBAPI;IAQJC;EARI,IASFT,KATJ;EAWA,MAAM;IAACU;EAAD,IAAST,OAAf;;EACA,MAAMU,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;EAEA,MAAME,mBAAmB,GAAG,SAAQL,eAAR,IAA2B,IAA3B,gBAAkC,oBAAC,SAAD,EAAeA,eAAf,CAA9D;EAEA,MAAMM,SAAS,GAAG,SAAQT,KAAK,CAACU,IAAd,iBAChB,8CACE;IAAK,SAAS,EAAEhB,KAAK,CAACiB;EAAtB,gBACE;IAAK,SAAS,EAAEjB,KAAK,CAACkB;EAAtB,GAAqCX,cAArC,CADF,eAEE,oBAAC,MAAD,eACMC,YADN;IAEE,aAAU,iBAFZ;IAGE,SAAS,EAAER,KAAK,CAACmB,KAHnB;IAIE,KAAK,EAAE;MAACC,UAAU,EAAEP;IAAb,CAJT;IAKE,IAAI,EAAC;EALP,GAFF,CADF,EAWGC,mBAXH,CADgB,gBAehB,oBAAC,SAAD,EAAeR,KAAf,CAfF;EAkBA,oBACE,8CACE,oBAAC,OAAD,eACMD,aADN;IAEE,iBAAiB,EAAEK,iBAFrB;IAGE,mBAAmB,EAAEC;EAHvB,GADF,eAME;IAAK,aAAU,cAAf;IAA8B,SAAS,EAAEX,KAAK,CAACqB;EAA/C,gBACE;IAAK,SAAS,EAAErB,KAAK,CAACI,KAAtB;IAA6B,IAAI,EAAC;EAAlC,GACGA,KADH,CADF,EAIGW,SAJH,CANF,CADF;AAeD,CAlDD;;AAoDAd,UAAU,CAACqB,YAAX,GAA0B;EACxBV,IAAI,EAAEjB,QAAQ,CAAC4B,iBAAT,CAA2BX;AADT,CAA1B;AAIAX,UAAU,CAACuB,SAAX,2CAAuB;EACrBjB,cAAc,EAAEb,SAAS,CAAC+B,MADL;EAErBrB,KAAK,EAAEV,SAAS,CAAC+B,MAFI;EAGrBpB,aAAa,EAAEX,SAAS,CAACgC,KAAV,CAAgB7B,OAAO,CAAC2B,SAAxB,CAHM;EAIrBlB,KAAK,EAAEZ,SAAS,CAACgC,KAAV,CAAgB5B,SAAS,CAAC0B,SAA1B,CAJc;EAKrBhB,YAAY,EAAEd,SAAS,CAACgC,KAAV,CAAgB9B,MAAM,CAAC4B,SAAvB,CALO;EAMrBf,eAAe,EAAEf,SAAS,CAACgC,KAAV,CAAgB3B,SAAS,CAACyB,SAA1B,CANI;EAOrBd,iBAAiB,EAAEhB,SAAS,CAAC+B,MAPR;EAQrBd,mBAAmB,EAAEjB,SAAS,CAAC+B;AARV,CAAvB;AAWA,eAAexB,UAAf"}
+{"version":3,"file":"index.js","names":["React","PropTypes","Provider","Button","Filters","CardsGrid","CardsList","style","SearchPage","props","context","title","searchFilters","cards","noresultsfound","clearFilters","recommendations","moreSortAriaLabel","moreFilterAriaLabel","filterGroupAriaLabel","skin","defaultColor","recommendationsView","cardsView","list","noresults","noresultstxt","clear","background","cardsWrapper","contextTypes","childContextTypes","propTypes","string","shape"],"sources":["../../../../src/template/common/search-page/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, isEmpty} from 'lodash/fp';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport Filters from '../../../molecule/filters';\nimport CardsGrid from '../../../organism/cards-grid';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport style from './style.css';\n\nconst SearchPage = (props, context) => {\n  const {\n    title,\n    searchFilters,\n    cards,\n    noresultsfound,\n    clearFilters,\n    recommendations,\n    moreSortAriaLabel,\n    moreFilterAriaLabel,\n    filterGroupAriaLabel\n  } = props;\n\n  const {skin} = context;\n  const defaultColor = getOr('#00B0FF', 'common.primary', skin);\n\n  const recommendationsView = isEmpty(recommendations) ? null : <CardsList {...recommendations} />;\n\n  const cardsView = isEmpty(cards.list) ? (\n    <div>\n      <div className={style.noresults}>\n        <div className={style.noresultstxt}>{noresultsfound}</div>\n        <Button\n          {...clearFilters}\n          data-name=\"searchPageClear\"\n          className={style.clear}\n          style={{background: defaultColor}}\n          type=\"link\"\n        />\n      </div>\n      {recommendationsView}\n    </div>\n  ) : (\n    <CardsGrid {...cards} />\n  );\n\n  return (\n    <div>\n      <Filters\n        {...searchFilters}\n        moreSortAriaLabel={moreSortAriaLabel}\n        moreFilterAriaLabel={moreFilterAriaLabel}\n        filterGroupAriaLabel={filterGroupAriaLabel}\n      />\n      <div data-name=\"searchResult\" className={style.cardsWrapper}>\n        <div className={style.title} role=\"status\">\n          {title}\n        </div>\n        {cardsView}\n      </div>\n    </div>\n  );\n};\n\nSearchPage.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSearchPage.propTypes = {\n  noresultsfound: PropTypes.string,\n  title: PropTypes.string,\n  searchFilters: PropTypes.shape(Filters.propTypes),\n  cards: PropTypes.shape(CardsGrid.propTypes),\n  clearFilters: PropTypes.shape(Button.propTypes),\n  recommendations: PropTypes.shape(CardsList.propTypes),\n  moreSortAriaLabel: PropTypes.string,\n  moreFilterAriaLabel: PropTypes.string,\n  filterGroupAriaLabel: PropTypes.string\n};\n\nexport default SearchPage;\n"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,OAAOC,QAAP,MAAqB,wBAArB;AACA,OAAOC,MAAP,MAAmB,sBAAnB;AACA,OAAOC,OAAP,MAAoB,2BAApB;AACA,OAAOC,SAAP,MAAsB,8BAAtB;AACA,OAAOC,SAAP,MAAsB,wCAAtB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,UAAU,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACrC,MAAM;IACJC,KADI;IAEJC,aAFI;IAGJC,KAHI;IAIJC,cAJI;IAKJC,YALI;IAMJC,eANI;IAOJC,iBAPI;IAQJC,mBARI;IASJC;EATI,IAUFV,KAVJ;EAYA,MAAM;IAACW;EAAD,IAASV,OAAf;;EACA,MAAMW,YAAY,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCD,IAAnC,CAArB;;EAEA,MAAME,mBAAmB,GAAG,SAAQN,eAAR,IAA2B,IAA3B,gBAAkC,oBAAC,SAAD,EAAeA,eAAf,CAA9D;EAEA,MAAMO,SAAS,GAAG,SAAQV,KAAK,CAACW,IAAd,iBAChB,8CACE;IAAK,SAAS,EAAEjB,KAAK,CAACkB;EAAtB,gBACE;IAAK,SAAS,EAAElB,KAAK,CAACmB;EAAtB,GAAqCZ,cAArC,CADF,eAEE,oBAAC,MAAD,eACMC,YADN;IAEE,aAAU,iBAFZ;IAGE,SAAS,EAAER,KAAK,CAACoB,KAHnB;IAIE,KAAK,EAAE;MAACC,UAAU,EAAEP;IAAb,CAJT;IAKE,IAAI,EAAC;EALP,GAFF,CADF,EAWGC,mBAXH,CADgB,gBAehB,oBAAC,SAAD,EAAeT,KAAf,CAfF;EAkBA,oBACE,8CACE,oBAAC,OAAD,eACMD,aADN;IAEE,iBAAiB,EAAEK,iBAFrB;IAGE,mBAAmB,EAAEC,mBAHvB;IAIE,oBAAoB,EAAEC;EAJxB,GADF,eAOE;IAAK,aAAU,cAAf;IAA8B,SAAS,EAAEZ,KAAK,CAACsB;EAA/C,gBACE;IAAK,SAAS,EAAEtB,KAAK,CAACI,KAAtB;IAA6B,IAAI,EAAC;EAAlC,GACGA,KADH,CADF,EAIGY,SAJH,CAPF,CADF;AAgBD,CApDD;;AAsDAf,UAAU,CAACsB,YAAX,GAA0B;EACxBV,IAAI,EAAElB,QAAQ,CAAC6B,iBAAT,CAA2BX;AADT,CAA1B;AAIAZ,UAAU,CAACwB,SAAX,2CAAuB;EACrBlB,cAAc,EAAEb,SAAS,CAACgC,MADL;EAErBtB,KAAK,EAAEV,SAAS,CAACgC,MAFI;EAGrBrB,aAAa,EAAEX,SAAS,CAACiC,KAAV,CAAgB9B,OAAO,CAAC4B,SAAxB,CAHM;EAIrBnB,KAAK,EAAEZ,SAAS,CAACiC,KAAV,CAAgB7B,SAAS,CAAC2B,SAA1B,CAJc;EAKrBjB,YAAY,EAAEd,SAAS,CAACiC,KAAV,CAAgB/B,MAAM,CAAC6B,SAAvB,CALO;EAMrBhB,eAAe,EAAEf,SAAS,CAACiC,KAAV,CAAgB5B,SAAS,CAAC0B,SAA1B,CANI;EAOrBf,iBAAiB,EAAEhB,SAAS,CAACgC,MAPR;EAQrBf,mBAAmB,EAAEjB,SAAS,CAACgC,MARV;EASrBd,oBAAoB,EAAElB,SAAS,CAACgC;AATX,CAAvB;AAYA,eAAezB,UAAf"}

package/es/util/button-icons.d.ts

@@ -14,5 +14,6 @@ export const ICONS: {
     save: any;
     see: any;
     folders: any;
+    upload: any;
 };
 //# sourceMappingURL=button-icons.d.ts.map

package/es/util/button-icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-icons.d.ts","sourceRoot":"","sources":["../../src/util/button-icons.js"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;;;EAgBE"}
+{"version":3,"file":"button-icons.d.ts","sourceRoot":"","sources":["../../src/util/button-icons.js"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;;;;;EAiBE"}

package/es/util/button-icons.js

@@ -1,4 +1,4 @@
-import { NovaSolidRemoveAddAddCircle1 as AddIcon, NovaCompositionCoorpacademyAnalytics as AnalyticsIcon, NovaSolidContentEditionBin as BinIcon, NovaCompositionCoorpacademyBulletPoint as BulletPointIcon, NovaCompositionNavigationArrowLeft as ChevronLeftIcon, NovaCompositionNavigationArrowRight as ChevronRightIcon, NovaSolidStatusClose as CloseIcon, NovaSolidContentEditionPencilWrite as EditIcon, NovaCompositionCoorpacademyEye as EyeIcon, NovaSolidContentContentViewModule1 as ListIcon, NovaSolidLoginLogout1 as LogoutIcon, NovaSolidApplicationsWindowUpload3 as PublishIcon, NovaSolidComputersSdCard as SaveIcon, NovaLineLoginKey1 as KlfIcon, NovaSolidFilesFoldersFolders as FoldersIcon } from '@coorpacademy/nova-icons';
+import { NovaSolidRemoveAddAddCircle1 as AddIcon, NovaCompositionCoorpacademyAnalytics as AnalyticsIcon, NovaSolidContentEditionBin as BinIcon, NovaCompositionCoorpacademyBulletPoint as BulletPointIcon, NovaCompositionNavigationArrowLeft as ChevronLeftIcon, NovaCompositionNavigationArrowRight as ChevronRightIcon, NovaSolidStatusClose as CloseIcon, NovaSolidContentEditionPencilWrite as EditIcon, NovaCompositionCoorpacademyEye as EyeIcon, NovaSolidContentContentViewModule1 as ListIcon, NovaSolidLoginLogout1 as LogoutIcon, NovaSolidApplicationsWindowUpload3 as PublishIcon, NovaSolidComputersSdCard as SaveIcon, NovaLineLoginKey1 as KlfIcon, NovaSolidFilesFoldersFolders as FoldersIcon, NovaSolidFilesBasicFileUpload2 as UploadIcon } from '@coorpacademy/nova-icons';
 export const ICONS = {
   add: AddIcon,
   analytics: AnalyticsIcon,
@@ -14,6 +14,7 @@ export const ICONS = {
   publish: PublishIcon,
   save: SaveIcon,
   see: EyeIcon,
-  folders: FoldersIcon
+  folders: FoldersIcon,
+  upload: UploadIcon
 };
 //# sourceMappingURL=button-icons.js.map

package/es/util/button-icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-icons.js","names":["NovaSolidRemoveAddAddCircle1","AddIcon","NovaCompositionCoorpacademyAnalytics","AnalyticsIcon","NovaSolidContentEditionBin","BinIcon","NovaCompositionCoorpacademyBulletPoint","BulletPointIcon","NovaCompositionNavigationArrowLeft","ChevronLeftIcon","NovaCompositionNavigationArrowRight","ChevronRightIcon","NovaSolidStatusClose","CloseIcon","NovaSolidContentEditionPencilWrite","EditIcon","NovaCompositionCoorpacademyEye","EyeIcon","NovaSolidContentContentViewModule1","ListIcon","NovaSolidLoginLogout1","LogoutIcon","NovaSolidApplicationsWindowUpload3","PublishIcon","NovaSolidComputersSdCard","SaveIcon","NovaLineLoginKey1","KlfIcon","NovaSolidFilesFoldersFolders","FoldersIcon","ICONS","add","analytics","bin","close","edit","key","list","logout","publish","save","see","folders"],"sources":["../../src/util/button-icons.js"],"sourcesContent":["import {\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaCompositionCoorpacademyAnalytics as AnalyticsIcon,\n  NovaSolidContentEditionBin as BinIcon,\n  NovaCompositionCoorpacademyBulletPoint as BulletPointIcon,\n  NovaCompositionNavigationArrowLeft as ChevronLeftIcon,\n  NovaCompositionNavigationArrowRight as ChevronRightIcon,\n  NovaSolidStatusClose as CloseIcon,\n  NovaSolidContentEditionPencilWrite as EditIcon,\n  NovaCompositionCoorpacademyEye as EyeIcon,\n  NovaSolidContentContentViewModule1 as ListIcon,\n  NovaSolidLoginLogout1 as LogoutIcon,\n  NovaSolidApplicationsWindowUpload3 as PublishIcon,\n  NovaSolidComputersSdCard as SaveIcon,\n  NovaLineLoginKey1 as KlfIcon,\n  NovaSolidFilesFoldersFolders as FoldersIcon\n} from '@coorpacademy/nova-icons';\n\nexport const ICONS = {\n  add: AddIcon,\n  analytics: AnalyticsIcon,\n  bin: BinIcon,\n  'bullet-point': BulletPointIcon,\n  'chevron-left': ChevronLeftIcon,\n  'chevron-right': ChevronRightIcon,\n  close: CloseIcon,\n  edit: EditIcon,\n  key: KlfIcon,\n  list: ListIcon,\n  logout: LogoutIcon,\n  publish: PublishIcon,\n  save: SaveIcon,\n  see: EyeIcon,\n  folders: FoldersIcon\n};\n"],"mappings":"AAAA,SACEA,4BAA4B,IAAIC,OADlC,EAEEC,oCAAoC,IAAIC,aAF1C,EAGEC,0BAA0B,IAAIC,OAHhC,EAIEC,sCAAsC,IAAIC,eAJ5C,EAKEC,kCAAkC,IAAIC,eALxC,EAMEC,mCAAmC,IAAIC,gBANzC,EAOEC,oBAAoB,IAAIC,SAP1B,EAQEC,kCAAkC,IAAIC,QARxC,EASEC,8BAA8B,IAAIC,OATpC,EAUEC,kCAAkC,IAAIC,QAVxC,EAWEC,qBAAqB,IAAIC,UAX3B,EAYEC,kCAAkC,IAAIC,WAZxC,EAaEC,wBAAwB,IAAIC,QAb9B,EAcEC,iBAAiB,IAAIC,OAdvB,EAeEC,4BAA4B,IAAIC,WAflC,QAgBO,0BAhBP;AAkBA,OAAO,MAAMC,KAAK,GAAG;EACnBC,GAAG,EAAE9B,OADc;EAEnB+B,SAAS,EAAE7B,aAFQ;EAGnB8B,GAAG,EAAE5B,OAHc;EAInB,gBAAgBE,eAJG;EAKnB,gBAAgBE,eALG;EAMnB,iBAAiBE,gBANE;EAOnBuB,KAAK,EAAErB,SAPY;EAQnBsB,IAAI,EAAEpB,QARa;EASnBqB,GAAG,EAAET,OATc;EAUnBU,IAAI,EAAElB,QAVa;EAWnBmB,MAAM,EAAEjB,UAXW;EAYnBkB,OAAO,EAAEhB,WAZU;EAanBiB,IAAI,EAAEf,QAba;EAcnBgB,GAAG,EAAExB,OAdc;EAenByB,OAAO,EAAEb;AAfU,CAAd"}
+{"version":3,"file":"button-icons.js","names":["NovaSolidRemoveAddAddCircle1","AddIcon","NovaCompositionCoorpacademyAnalytics","AnalyticsIcon","NovaSolidContentEditionBin","BinIcon","NovaCompositionCoorpacademyBulletPoint","BulletPointIcon","NovaCompositionNavigationArrowLeft","ChevronLeftIcon","NovaCompositionNavigationArrowRight","ChevronRightIcon","NovaSolidStatusClose","CloseIcon","NovaSolidContentEditionPencilWrite","EditIcon","NovaCompositionCoorpacademyEye","EyeIcon","NovaSolidContentContentViewModule1","ListIcon","NovaSolidLoginLogout1","LogoutIcon","NovaSolidApplicationsWindowUpload3","PublishIcon","NovaSolidComputersSdCard","SaveIcon","NovaLineLoginKey1","KlfIcon","NovaSolidFilesFoldersFolders","FoldersIcon","NovaSolidFilesBasicFileUpload2","UploadIcon","ICONS","add","analytics","bin","close","edit","key","list","logout","publish","save","see","folders","upload"],"sources":["../../src/util/button-icons.js"],"sourcesContent":["import {\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaCompositionCoorpacademyAnalytics as AnalyticsIcon,\n  NovaSolidContentEditionBin as BinIcon,\n  NovaCompositionCoorpacademyBulletPoint as BulletPointIcon,\n  NovaCompositionNavigationArrowLeft as ChevronLeftIcon,\n  NovaCompositionNavigationArrowRight as ChevronRightIcon,\n  NovaSolidStatusClose as CloseIcon,\n  NovaSolidContentEditionPencilWrite as EditIcon,\n  NovaCompositionCoorpacademyEye as EyeIcon,\n  NovaSolidContentContentViewModule1 as ListIcon,\n  NovaSolidLoginLogout1 as LogoutIcon,\n  NovaSolidApplicationsWindowUpload3 as PublishIcon,\n  NovaSolidComputersSdCard as SaveIcon,\n  NovaLineLoginKey1 as KlfIcon,\n  NovaSolidFilesFoldersFolders as FoldersIcon,\n  NovaSolidFilesBasicFileUpload2 as UploadIcon\n} from '@coorpacademy/nova-icons';\n\nexport const ICONS = {\n  add: AddIcon,\n  analytics: AnalyticsIcon,\n  bin: BinIcon,\n  'bullet-point': BulletPointIcon,\n  'chevron-left': ChevronLeftIcon,\n  'chevron-right': ChevronRightIcon,\n  close: CloseIcon,\n  edit: EditIcon,\n  key: KlfIcon,\n  list: ListIcon,\n  logout: LogoutIcon,\n  publish: PublishIcon,\n  save: SaveIcon,\n  see: EyeIcon,\n  folders: FoldersIcon,\n  upload: UploadIcon\n};\n"],"mappings":"AAAA,SACEA,4BAA4B,IAAIC,OADlC,EAEEC,oCAAoC,IAAIC,aAF1C,EAGEC,0BAA0B,IAAIC,OAHhC,EAIEC,sCAAsC,IAAIC,eAJ5C,EAKEC,kCAAkC,IAAIC,eALxC,EAMEC,mCAAmC,IAAIC,gBANzC,EAOEC,oBAAoB,IAAIC,SAP1B,EAQEC,kCAAkC,IAAIC,QARxC,EASEC,8BAA8B,IAAIC,OATpC,EAUEC,kCAAkC,IAAIC,QAVxC,EAWEC,qBAAqB,IAAIC,UAX3B,EAYEC,kCAAkC,IAAIC,WAZxC,EAaEC,wBAAwB,IAAIC,QAb9B,EAcEC,iBAAiB,IAAIC,OAdvB,EAeEC,4BAA4B,IAAIC,WAflC,EAgBEC,8BAA8B,IAAIC,UAhBpC,QAiBO,0BAjBP;AAmBA,OAAO,MAAMC,KAAK,GAAG;EACnBC,GAAG,EAAEhC,OADc;EAEnBiC,SAAS,EAAE/B,aAFQ;EAGnBgC,GAAG,EAAE9B,OAHc;EAInB,gBAAgBE,eAJG;EAKnB,gBAAgBE,eALG;EAMnB,iBAAiBE,gBANE;EAOnByB,KAAK,EAAEvB,SAPY;EAQnBwB,IAAI,EAAEtB,QARa;EASnBuB,GAAG,EAAEX,OATc;EAUnBY,IAAI,EAAEpB,QAVa;EAWnBqB,MAAM,EAAEnB,UAXW;EAYnBoB,OAAO,EAAElB,WAZU;EAanBmB,IAAI,EAAEjB,QAba;EAcnBkB,GAAG,EAAE1B,OAdc;EAenB2B,OAAO,EAAEf,WAfU;EAgBnBgB,MAAM,EAAEd;AAhBW,CAAd"}

package/lib/atom/loader/index.native.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ColorValue } from 'react-native';
+export declare type Props = {
+    color?: ColorValue;
+    height?: number;
+    readyToHide: boolean;
+};
+declare const Loader: (props: Props) => JSX.Element | null;
+export default Loader;
+//# sourceMappingURL=index.native.d.ts.map

package/lib/atom/loader/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/loader/index.native.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA0C,UAAU,EAAC,MAAM,cAAc,CAAC;AAoCjF,oBAAY,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAKF,QAAA,MAAM,MAAM,UAAW,KAAK,uBAqK3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/atom/loader/index.native.js

@@ -0,0 +1,205 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _reactNativeAnimation = require("@coorpacademy/react-native-animation");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _templateContext = require("../../template/app-review/template-context");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const createStyleSheet = theme => _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  dot: {
+    position: 'absolute'
+  },
+  blue: {
+    backgroundColor: theme.colors.cta
+  },
+  red: {
+    backgroundColor: theme.colors.negative
+  },
+  green: {
+    backgroundColor: theme.colors.positive
+  },
+  yellow: {
+    backgroundColor: theme.colors.battle
+  }
+});
+
+const CYCLE_DURATION = 3000;
+const MIN_TIME = 1000;
+
+const Loader = props => {
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const {
+    theme
+  } = templateContext;
+  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
+  const [visible, setVisible] = (0, _react.useState)(true);
+  const [minTimeIsSpent, setMinTimeSpent] = (0, _react.useState)(false);
+  const rotation = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const hideAnimation = (0, _reactNativeAnimation.useAnimateProp)({
+    property: 'opacity',
+    fromValue: 1,
+    toValue: 0
+  });
+  const {
+    height = 60,
+    color,
+    readyToHide
+  } = props;
+  (0, _react.useEffect)(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+  (0, _react.useEffect)(() => {
+    if (readyToHide && minTimeIsSpent) {
+      setVisible(false);
+    }
+  }, [readyToHide, minTimeIsSpent]);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      hideAnimation.start();
+    }
+  }, [visible, hideAnimation]);
+  (0, _react.useEffect)(() => {
+    setTimeout(() => {
+      setMinTimeSpent(true);
+    }, MIN_TIME);
+
+    const _animation = _reactNative.Animated.parallel([_reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(scale, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(scale, {
+      toValue: 1,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    }), _reactNative.Animated.timing(scale, {
+      toValue: 2,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    }), _reactNative.Animated.timing(scale, {
+      toValue: 3,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    })])), _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.timing(rotation, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(rotation, {
+      toValue: 1,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.sin)
+    })]))]);
+
+    _animation.start();
+
+    return () => {
+      _animation.stop();
+    }; // eslint bad warning --> effect only onmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const interpolatedScale = scale.interpolate({
+    inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],
+    outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]
+  });
+  const interpolatedRotation = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  const dotWidth = rotation.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [height / 2, height / 6, height / 2]
+  });
+  const dotTranslate = rotation.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]
+  });
+  const dotStyle = {
+    width: dotWidth,
+    height: height / 6,
+    borderRadius: height / 12
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: hideAnimation.animatedStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.container, {
+      height,
+      width: height,
+      transform: [{
+        scaleX: interpolatedScale
+      }, {
+        scaleY: interpolatedScale
+      }, {
+        rotateZ: interpolatedRotation
+      }]
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.red, dotStyle, {
+      transform: [{
+        rotateZ: '45deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.green, dotStyle, {
+      transform: [{
+        rotateZ: '135deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.yellow, dotStyle, {
+      transform: [{
+        rotateZ: '225deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.blue, dotStyle, {
+      transform: [{
+        rotateZ: '315deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  })));
+};
+
+var _default = Loader;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/lib/atom/loader/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","container","alignItems","justifyContent","dot","position","blue","backgroundColor","colors","cta","red","negative","green","positive","yellow","battle","CYCLE_DURATION","MIN_TIME","Loader","props","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","visible","setVisible","minTimeIsSpent","setMinTimeSpent","rotation","useRef","Animated","Value","current","scale","hideAnimation","useAnimateProp","property","fromValue","toValue","height","color","readyToHide","useEffect","_stylesheet","start","setTimeout","_animation","parallel","loop","sequence","timing","duration","useNativeDriver","easing","Easing","inOut","sin","stop","interpolatedScale","interpolate","inputRange","outputRange","interpolatedRotation","dotWidth","dotTranslate","dotStyle","width","borderRadius","animatedStyle","transform","scaleX","scaleY","rotateZ","translateX"],"sources":["../../../src/atom/loader/index.native.tsx"],"sourcesContent":["import {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport React, {useEffect, useRef, useState} from 'react';\nimport {Animated, StyleSheet, Easing, ViewStyle, ColorValue} from 'react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  dot: ViewStyle;\n  blue: ViewStyle;\n  red: ViewStyle;\n  green: ViewStyle;\n  yellow: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    container: {\n      alignItems: 'center',\n      justifyContent: 'center'\n    },\n    dot: {\n      position: 'absolute'\n    },\n    blue: {\n      backgroundColor: theme.colors.cta\n    },\n    red: {\n      backgroundColor: theme.colors.negative\n    },\n    green: {\n      backgroundColor: theme.colors.positive\n    },\n    yellow: {\n      backgroundColor: theme.colors.battle\n    }\n  });\n\nexport type Props = {\n  color?: ColorValue;\n  height?: number;\n  readyToHide: boolean;\n};\n\nconst CYCLE_DURATION = 3000;\nconst MIN_TIME = 1000;\n\nconst Loader = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const [visible, setVisible] = useState<boolean>(true);\n  const [minTimeIsSpent, setMinTimeSpent] = useState<boolean>(false);\n\n  const rotation = useRef<Animated.Value>(new Animated.Value(0)).current;\n  const scale = useRef<Animated.Value>(new Animated.Value(0)).current;\n\n  const hideAnimation = useAnimateProp({\n    property: 'opacity',\n    fromValue: 1,\n    toValue: 0\n  });\n\n  const {height = 60, color, readyToHide} = props;\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  useEffect(() => {\n    if (readyToHide && minTimeIsSpent) {\n      setVisible(false);\n    }\n  }, [readyToHide, minTimeIsSpent]);\n\n  useEffect(() => {\n    if (!visible) {\n      hideAnimation.start();\n    }\n  }, [visible, hideAnimation]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setMinTimeSpent(true);\n    }, MIN_TIME);\n\n    const _animation = Animated.parallel([\n      Animated.loop(\n        Animated.sequence([\n          Animated.timing(scale, {toValue: 0, duration: 0, useNativeDriver: false}),\n          Animated.timing(scale, {\n            toValue: 1,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          }),\n          Animated.timing(scale, {\n            toValue: 2,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          }),\n          Animated.timing(scale, {\n            toValue: 3,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          })\n        ])\n      ),\n      Animated.loop(\n        Animated.sequence([\n          Animated.timing(rotation, {toValue: 0, duration: 0, useNativeDriver: false}),\n          Animated.timing(rotation, {\n            toValue: 1,\n            duration: CYCLE_DURATION,\n            useNativeDriver: false,\n            easing: Easing.inOut(Easing.sin)\n          })\n        ])\n      )\n    ]);\n\n    _animation.start();\n\n    return () => {\n      _animation.stop();\n    };\n    // eslint bad warning --> effect only onmount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const interpolatedScale = scale.interpolate({\n    inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],\n    outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]\n  });\n\n  const interpolatedRotation = rotation.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0deg', '360deg']\n  });\n  const dotWidth = rotation.interpolate({\n    inputRange: [0, 0.5, 1],\n    outputRange: [height / 2, height / 6, height / 2]\n  });\n  const dotTranslate = rotation.interpolate({\n    inputRange: [0, 0.5, 1],\n    outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]\n  });\n  const dotStyle = {\n    width: dotWidth,\n    height: height / 6,\n    borderRadius: height / 12\n  };\n\n  return (\n    <Animated.View style={hideAnimation.animatedStyle}>\n      <Animated.View\n        style={[\n          styleSheet.container,\n          {\n            height,\n            width: height,\n            transform: [\n              {scaleX: interpolatedScale},\n              {scaleY: interpolatedScale},\n              {rotateZ: interpolatedRotation}\n            ]\n          }\n        ]}\n      >\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.red,\n            dotStyle,\n            {transform: [{rotateZ: '45deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.green,\n            dotStyle,\n            {transform: [{rotateZ: '135deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.yellow,\n            dotStyle,\n            {transform: [{rotateZ: '225deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n        <Animated.View\n          style={[\n            styleSheet.dot,\n            color ? {backgroundColor: color} : styleSheet.blue,\n            dotStyle,\n            {transform: [{rotateZ: '315deg'}, {translateX: dotTranslate}]}\n          ]}\n        />\n      </Animated.View>\n    </Animated.View>\n  );\n};\n\nexport default Loader;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAYA,MAAMA,gBAAgB,GAAIC,KAAD,IACvBC,uBAAA,CAAWC,MAAX,CAAkB;EAChBC,SAAS,EAAE;IACTC,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADK;EAKhBC,GAAG,EAAE;IACHC,QAAQ,EAAE;EADP,CALW;EAQhBC,IAAI,EAAE;IACJC,eAAe,EAAET,KAAK,CAACU,MAAN,CAAaC;EAD1B,CARU;EAWhBC,GAAG,EAAE;IACHH,eAAe,EAAET,KAAK,CAACU,MAAN,CAAaG;EAD3B,CAXW;EAchBC,KAAK,EAAE;IACLL,eAAe,EAAET,KAAK,CAACU,MAAN,CAAaK;EADzB,CAdS;EAiBhBC,MAAM,EAAE;IACNP,eAAe,EAAET,KAAK,CAACU,MAAN,CAAaO;EADxB;AAjBQ,CAAlB,CADF;;AA6BA,MAAMC,cAAc,GAAG,IAAvB;AACA,MAAMC,QAAQ,GAAG,IAAjB;;AAEA,MAAMC,MAAM,GAAIC,KAAD,IAAkB;EAC/B,MAAMC,eAAe,GAAG,IAAAC,mCAAA,GAAxB;EACA,MAAM;IAACvB;EAAD,IAAUsB,eAAhB;EAEA,MAAM,CAACE,UAAD,EAAaC,aAAb,IAA8B,IAAAC,eAAA,EAAgC,IAAhC,CAApC;EACA,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAF,eAAA,EAAkB,IAAlB,CAA9B;EACA,MAAM,CAACG,cAAD,EAAiBC,eAAjB,IAAoC,IAAAJ,eAAA,EAAkB,KAAlB,CAA1C;EAEA,MAAMK,QAAQ,GAAG,IAAAC,aAAA,EAAuB,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAvB,EAA8CC,OAA/D;EACA,MAAMC,KAAK,GAAG,IAAAJ,aAAA,EAAuB,IAAIC,qBAAA,CAASC,KAAb,CAAmB,CAAnB,CAAvB,EAA8CC,OAA5D;EAEA,MAAME,aAAa,GAAG,IAAAC,oCAAA,EAAe;IACnCC,QAAQ,EAAE,SADyB;IAEnCC,SAAS,EAAE,CAFwB;IAGnCC,OAAO,EAAE;EAH0B,CAAf,CAAtB;EAMA,MAAM;IAACC,MAAM,GAAG,EAAV;IAAcC,KAAd;IAAqBC;EAArB,IAAoCvB,KAA1C;EAEA,IAAAwB,gBAAA,EAAU,MAAM;IACd,MAAMC,WAAW,GAAG/C,gBAAgB,CAACC,KAAD,CAApC;;IACAyB,aAAa,CAACqB,WAAD,CAAb;EACD,CAHD,EAGG,CAAC9C,KAAD,CAHH;EAKA,IAAA6C,gBAAA,EAAU,MAAM;IACd,IAAID,WAAW,IAAIf,cAAnB,EAAmC;MACjCD,UAAU,CAAC,KAAD,CAAV;IACD;EACF,CAJD,EAIG,CAACgB,WAAD,EAAcf,cAAd,CAJH;EAMA,IAAAgB,gBAAA,EAAU,MAAM;IACd,IAAI,CAAClB,OAAL,EAAc;MACZU,aAAa,CAACU,KAAd;IACD;EACF,CAJD,EAIG,CAACpB,OAAD,EAAUU,aAAV,CAJH;EAMA,IAAAQ,gBAAA,EAAU,MAAM;IACdG,UAAU,CAAC,MAAM;MACflB,eAAe,CAAC,IAAD,CAAf;IACD,CAFS,EAEPX,QAFO,CAAV;;IAIA,MAAM8B,UAAU,GAAGhB,qBAAA,CAASiB,QAAT,CAAkB,CACnCjB,qBAAA,CAASkB,IAAT,CACElB,qBAAA,CAASmB,QAAT,CAAkB,CAChBnB,qBAAA,CAASoB,MAAT,CAAgBjB,KAAhB,EAAuB;MAACK,OAAO,EAAE,CAAV;MAAaa,QAAQ,EAAE,CAAvB;MAA0BC,eAAe,EAAE;IAA3C,CAAvB,CADgB,EAEhBtB,qBAAA,CAASoB,MAAT,CAAgBjB,KAAhB,EAAuB;MACrBK,OAAO,EAAE,CADY;MAErBa,QAAQ,EAAEpC,cAFW;MAGrBqC,eAAe,EAAE,KAHI;MAIrBC,MAAM,EAAEC,mBAAA,CAAOC,KAAP,CAAaD,mBAAA,CAAOE,GAApB;IAJa,CAAvB,CAFgB,EAQhB1B,qBAAA,CAASoB,MAAT,CAAgBjB,KAAhB,EAAuB;MACrBK,OAAO,EAAE,CADY;MAErBa,QAAQ,EAAEpC,cAFW;MAGrBqC,eAAe,EAAE,KAHI;MAIrBC,MAAM,EAAEC,mBAAA,CAAOC,KAAP,CAAaD,mBAAA,CAAOE,GAApB;IAJa,CAAvB,CARgB,EAchB1B,qBAAA,CAASoB,MAAT,CAAgBjB,KAAhB,EAAuB;MACrBK,OAAO,EAAE,CADY;MAErBa,QAAQ,EAAEpC,cAFW;MAGrBqC,eAAe,EAAE,KAHI;MAIrBC,MAAM,EAAEC,mBAAA,CAAOC,KAAP,CAAaD,mBAAA,CAAOE,GAApB;IAJa,CAAvB,CAdgB,CAAlB,CADF,CADmC,EAwBnC1B,qBAAA,CAASkB,IAAT,CACElB,qBAAA,CAASmB,QAAT,CAAkB,CAChBnB,qBAAA,CAASoB,MAAT,CAAgBtB,QAAhB,EAA0B;MAACU,OAAO,EAAE,CAAV;MAAaa,QAAQ,EAAE,CAAvB;MAA0BC,eAAe,EAAE;IAA3C,CAA1B,CADgB,EAEhBtB,qBAAA,CAASoB,MAAT,CAAgBtB,QAAhB,EAA0B;MACxBU,OAAO,EAAE,CADe;MAExBa,QAAQ,EAAEpC,cAFc;MAGxBqC,eAAe,EAAE,KAHO;MAIxBC,MAAM,EAAEC,mBAAA,CAAOC,KAAP,CAAaD,mBAAA,CAAOE,GAApB;IAJgB,CAA1B,CAFgB,CAAlB,CADF,CAxBmC,CAAlB,CAAnB;;IAqCAV,UAAU,CAACF,KAAX;;IAEA,OAAO,MAAM;MACXE,UAAU,CAACW,IAAX;IACD,CAFD,CA5Cc,CA+Cd;IACA;EACD,CAjDD,EAiDG,EAjDH;;EAmDA,IAAI,CAACpC,UAAL,EAAiB;IACf,OAAO,IAAP;EACD;;EAED,MAAMqC,iBAAiB,GAAGzB,KAAK,CAAC0B,WAAN,CAAkB;IAC1CC,UAAU,EAAE,CAAC,CAAD,EAAI,IAAJ,EAAU,CAAV,EAAa,IAAb,EAAmB,GAAnB,EAAwB,CAAxB,EAA2B,GAA3B,EAAgC,IAAhC,EAAsC,CAAtC,CAD8B;IAE1CC,WAAW,EAAE,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,EAAgB,GAAhB,EAAqB,GAArB,EAA0B,GAA1B,EAA+B,GAA/B,EAAoC,GAApC,EAAyC,GAAzC;EAF6B,CAAlB,CAA1B;EAKA,MAAMC,oBAAoB,GAAGlC,QAAQ,CAAC+B,WAAT,CAAqB;IAChDC,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADoC;IAEhDC,WAAW,EAAE,CAAC,MAAD,EAAS,QAAT;EAFmC,CAArB,CAA7B;EAIA,MAAME,QAAQ,GAAGnC,QAAQ,CAAC+B,WAAT,CAAqB;IACpCC,UAAU,EAAE,CAAC,CAAD,EAAI,GAAJ,EAAS,CAAT,CADwB;IAEpCC,WAAW,EAAE,CAACtB,MAAM,GAAG,CAAV,EAAaA,MAAM,GAAG,CAAtB,EAAyBA,MAAM,GAAG,CAAlC;EAFuB,CAArB,CAAjB;EAIA,MAAMyB,YAAY,GAAGpC,QAAQ,CAAC+B,WAAT,CAAqB;IACxCC,UAAU,EAAE,CAAC,CAAD,EAAI,GAAJ,EAAS,CAAT,CAD4B;IAExCC,WAAW,EAAE,CAAC,CAAC,EAAD,IAAOtB,MAAM,GAAG,EAAhB,CAAD,EAAsB,CAAC,EAAD,IAAOA,MAAM,GAAG,EAAhB,CAAtB,EAA2C,CAAC,EAAD,IAAOA,MAAM,GAAG,EAAhB,CAA3C;EAF2B,CAArB,CAArB;EAIA,MAAM0B,QAAQ,GAAG;IACfC,KAAK,EAAEH,QADQ;IAEfxB,MAAM,EAAEA,MAAM,GAAG,CAFF;IAGf4B,YAAY,EAAE5B,MAAM,GAAG;EAHR,CAAjB;EAMA,oBACE,6BAAC,qBAAD,CAAU,IAAV;IAAe,KAAK,EAAEL,aAAa,CAACkC;EAApC,gBACE,6BAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACL/C,UAAU,CAACrB,SADN,EAEL;MACEuC,MADF;MAEE2B,KAAK,EAAE3B,MAFT;MAGE8B,SAAS,EAAE,CACT;QAACC,MAAM,EAAEZ;MAAT,CADS,EAET;QAACa,MAAM,EAAEb;MAAT,CAFS,EAGT;QAACc,OAAO,EAAEV;MAAV,CAHS;IAHb,CAFK;EADT,gBAcE,6BAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACLzC,UAAU,CAAClB,GADN,EAELqC,KAAK,GAAG;MAAClC,eAAe,EAAEkC;IAAlB,CAAH,GAA8BnB,UAAU,CAACZ,GAFzC,EAGLwD,QAHK,EAIL;MAACI,SAAS,EAAE,CAAC;QAACG,OAAO,EAAE;MAAV,CAAD,EAAqB;QAACC,UAAU,EAAET;MAAb,CAArB;IAAZ,CAJK;EADT,EAdF,eAsBE,6BAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACL3C,UAAU,CAAClB,GADN,EAELqC,KAAK,GAAG;MAAClC,eAAe,EAAEkC;IAAlB,CAAH,GAA8BnB,UAAU,CAACV,KAFzC,EAGLsD,QAHK,EAIL;MAACI,SAAS,EAAE,CAAC;QAACG,OAAO,EAAE;MAAV,CAAD,EAAsB;QAACC,UAAU,EAAET;MAAb,CAAtB;IAAZ,CAJK;EADT,EAtBF,eA8BE,6BAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACL3C,UAAU,CAAClB,GADN,EAELqC,KAAK,GAAG;MAAClC,eAAe,EAAEkC;IAAlB,CAAH,GAA8BnB,UAAU,CAACR,MAFzC,EAGLoD,QAHK,EAIL;MAACI,SAAS,EAAE,CAAC;QAACG,OAAO,EAAE;MAAV,CAAD,EAAsB;QAACC,UAAU,EAAET;MAAb,CAAtB;IAAZ,CAJK;EADT,EA9BF,eAsCE,6BAAC,qBAAD,CAAU,IAAV;IACE,KAAK,EAAE,CACL3C,UAAU,CAAClB,GADN,EAELqC,KAAK,GAAG;MAAClC,eAAe,EAAEkC;IAAlB,CAAH,GAA8BnB,UAAU,CAAChB,IAFzC,EAGL4D,QAHK,EAIL;MAACI,SAAS,EAAE,CAAC;QAACG,OAAO,EAAE;MAAV,CAAD,EAAsB;QAACC,UAAU,EAAET;MAAb,CAAtB;IAAZ,CAJK;EADT,EAtCF,CADF,CADF;AAmDD,CArKD;;eAuKe/C,M"}

package/lib/atom/select/index.d.ts

@@ -4,6 +4,15 @@ export namespace SelectOptionPropTypes {
     const selected: PropTypes.Requireable<boolean>;
     const validOption: PropTypes.Requireable<boolean>;
 }
+export namespace SelectOptionGroupPropTypes {
+    const label: PropTypes.Validator<string>;
+    const options: PropTypes.Requireable<(PropTypes.InferProps<{
+        name: PropTypes.Validator<string>;
+        value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        selected: PropTypes.Requireable<boolean>;
+        validOption: PropTypes.Requireable<boolean>;
+    }> | null | undefined)[]>;
+}
 export default Select;
 import PropTypes from "prop-types";
 declare function Select(props: any, legacyContext: any): JSX.Element;
@@ -48,6 +57,15 @@ declare namespace Select {
             selected: PropTypes.Requireable<boolean>;
             validOption: PropTypes.Requireable<boolean>;
         }> | null | undefined)[]>;
+        optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Validator<string>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+                selected: PropTypes.Requireable<boolean>;
+                validOption: PropTypes.Requireable<boolean>;
+            }> | null | undefined)[]>;
+        }> | null | undefined)[]>;
         modified: PropTypes.Requireable<boolean>;
         error: PropTypes.Requireable<boolean>;
         'aria-label': PropTypes.Requireable<string>;

package/lib/atom/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;AA6BA,qEA6JC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2DA,qEAqLC"}

package/lib/atom/select/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.SelectOptionPropTypes = void 0;
+exports.default = exports.SelectOptionPropTypes = exports.SelectOptionGroupPropTypes = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -9,16 +9,22 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _concat = _interopRequireDefault(require("lodash/fp/concat"));
+
 var _filter = _interopRequireDefault(require("lodash/fp/filter"));
 
 var _find = _interopRequireDefault(require("lodash/fp/find"));
 
+var _flatMapDeep = _interopRequireDefault(require("lodash/fp/flatMapDeep"));
+
 var _get = _interopRequireDefault(require("lodash/fp/get"));
 
 var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
 
 var _includes = _interopRequireDefault(require("lodash/fp/includes"));
 
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
 var _keys = _interopRequireDefault(require("lodash/fp/keys"));
 
 var _map = _interopRequireDefault(require("lodash/fp/map"));
@@ -54,10 +60,35 @@ const themeStyle = {
   coorpmanager: null
 };
 
+const ArrowView = ({
+  shouldRender,
+  isArrowUp,
+  ariaLabel,
+  arrowClass,
+  arrowColor
+}) => {
+  const props = (0, _react.useMemo)(() => _extends({}, ariaLabel & {
+    'aria-label': ariaLabel
+  }, arrowColor & {
+    color: arrowColor
+  }, {
+    className: arrowClass
+  }), [ariaLabel, arrowClass, arrowColor]);
+
+  if (shouldRender) {
+    return isArrowUp ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowTop, _extends({}, props, {
+      "data-testid": "select-arrow-up-icon"
+    })) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, _extends({}, props, {
+      "data-testid": "select-arrow-down-icon"
+    }));
+  } else return null;
+};
+
 const Select = (props, legacyContext) => {
   const {
     name,
     options = [],
+    optgroups = [],
     className,
     borderClassName,
     onChange,
@@ -73,12 +104,23 @@ const Select = (props, legacyContext) => {
   } = props;
   const skin = (0, _provider.GetSkinFromContext)(legacyContext);
   const title = (0, _react.useMemo)(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
-  const optionList = options && options.map((option, index) => {
+  const [isArrowUp, setIsArrowUp] = (0, _react.useState)(false);
+  const handleSelectOnFocus = (0, _react.useCallback)(() => setIsArrowUp(true), []);
+  const handleSelectOnBlur = (0, _react.useCallback)(() => setIsArrowUp(false), []);
+
+  const selectOption = (option, index) => {
     return /*#__PURE__*/_react.default.createElement("option", {
       key: index,
       value: option.value,
       className: _style.default.selectOption
     }, option.name);
+  };
+
+  const optionList = !(0, _isEmpty.default)(options) ? options.map((option, index) => selectOption(option, index)) : optgroups.map((optgroup, index) => {
+    return /*#__PURE__*/_react.default.createElement("optgroup", {
+      key: index,
+      label: optgroup.label
+    }, optgroup.options && optgroup.options.map((option, i) => selectOption(option, i)));
   });
   const titleView = title ? /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.title
@@ -87,31 +129,28 @@ const Select = (props, legacyContext) => {
     selected: true
   }, options)) : (0, _get.default)('value', (0, _find.default)({
     selected: true
-  }, options)), [multiple, options]);
+  }, (0, _concat.default)(options, (0, _flatMapDeep.default)('options', optgroups)))), [multiple, options, optgroups]);
   const selectedLabel = (0, _react.useMemo)(() => multiple ? (0, _map.default)((0, _get.default)('name'), (0, _filter.default)({
     selected: true
-  }, options)) : (0, _get.default)('name', (0, _find.default)({
+  }, options)) : (0, _get.default)('value', (0, _find.default)({
     selected: true
-  }, options)), [multiple, options]);
+  }, (0, _concat.default)(options, (0, _flatMapDeep.default)('options', optgroups)))), [multiple, options, optgroups]);
   const isSelectedInValidOption = (0, _react.useMemo)(() => theme === 'player' && (0, _getOr.default)(false, 'name', (0, _find.default)({
     validOption: false,
     selected: true
   }, options)), [options, theme]);
   const handleChange = (0, _react.useMemo)(() => multiple ? e => {
+    setIsArrowUp(false);
     onChange((0, _map.default)((0, _get.default)('value'), e.target.selectedOptions));
   } : e => {
+    setIsArrowUp(false);
     onChange(e.target.value);
   }, [onChange, multiple]);
   const black = (0, _react.useMemo)(() => (0, _getOr.default)('#14171A', 'common.black', skin), [skin]);
   const color = (0, _react.useMemo)(() => (0, _getOr.default)('#00B0FF', 'common.primary', skin), [skin]);
-  const shouldUseSkinFontColor = (0, _react.useMemo)(() => !isSelectedInValidOption && selected && (0, _includes.default)(theme, ['question', 'template', 'player']), [isSelectedInValidOption, selected, theme]);
+  const isThemeOneOfQuestionTemplateOrPlayer = (0, _react.useMemo)(() => (0, _includes.default)(theme, ['question', 'template', 'player']), [theme]);
+  const shouldUseSkinFontColor = (0, _react.useMemo)(() => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer, [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]);
   const arrowColor = selected ? color : undefined;
-  const arrowView = !multiple ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
-    color: (0, _includes.default)(theme, ['question', 'template', 'player']) ? arrowColor : black,
-    className: shouldUseSkinFontColor ? _style.default.selectedArrow : _style.default.arrow,
-    "aria-label": ariaLabel,
-    "data-testid": "select-arrow-down-icon"
-  }) : null;
   const behaviorClassName = (0, _react.useMemo)(() => (0, _getClassState.default)(_style.default.default, _style.default.modified, _style.default.error, modified, error), [error, modified]);
   const composedClassName = (0, _react.useMemo)(() => (0, _classnames.default)(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? _style.default.selected : _style.default.unselected, className), [behaviorClassName, className, selected, theme]);
   const labelSize = (0, _react.useMemo)(() => (0, _size.default)(selectedLabel), [selectedLabel]);
@@ -130,7 +169,13 @@ const Select = (props, legacyContext) => {
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), arrowView, /*#__PURE__*/_react.default.createElement("select", {
+  }, selectedLabel), /*#__PURE__*/_react.default.createElement(ArrowView, {
+    shouldRender: !multiple,
+    isArrowUp: isArrowUp,
+    ariaLabel: ariaLabel,
+    arrowClass: shouldUseSkinFontColor ? _style.default.selectedArrow : _style.default.arrow,
+    arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
+  }), /*#__PURE__*/_react.default.createElement("select", {
     "data-name": "native-select",
     className: _style.default.selectBox,
     title: selectedLabel,
@@ -138,7 +183,14 @@ const Select = (props, legacyContext) => {
     onChange: handleChange,
     value: selected,
     multiple: multiple,
-    disabled: disabled
+    disabled: disabled,
+    onClick: handleSelectOnFocus,
+    onBlur: handleSelectOnBlur // onBlur does not handle completely an out of bounds click
+    // ex: select is Opened and a click is done outside, cancelling the select
+    // that doesn't count as a Blur, so an onMouseLeave is needed
+    ,
+    onMouseLeave: handleSelectOnBlur,
+    "data-testid": "native-select"
   }, optionList)), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.description
   }, description));
@@ -151,6 +203,11 @@ const SelectOptionPropTypes = {
   validOption: _propTypes.default.bool
 };
 exports.SelectOptionPropTypes = SelectOptionPropTypes;
+const SelectOptionGroupPropTypes = {
+  label: _propTypes.default.string.isRequired,
+  options: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionPropTypes))
+};
+exports.SelectOptionGroupPropTypes = SelectOptionGroupPropTypes;
 Select.contextTypes = {
   skin: _provider.default.childContextTypes.skin
 };
@@ -166,6 +223,7 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: _propTypes.default.func,
   theme: _propTypes.default.oneOf((0, _keys.default)(themeStyle)),
   options: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionPropTypes)),
+  optgroups: _propTypes.default.arrayOf(_propTypes.default.shape(SelectOptionGroupPropTypes)),
   modified: _propTypes.default.bool,
   error: _propTypes.default.bool,
   'aria-label': _propTypes.default.string