@coorpacademy/components 11.6.1 → 11.7.3-alpha.29

package/README.md

@@ -28,7 +28,6 @@ npm run start:ie # for Internet Explorer
 
 Then open `http://localhost:3004`.
 
-
 ### Analyse your component
 
 The `props` is the contract your app should fill in order to use the component.
@@ -78,6 +77,7 @@ which is also launched automatically whenever you run `npm start`
 - Be sure to have `translate: Provider.childContextTypes.translate` in the contextTypes object of your component
 
 example:
+
 ```
   ....
 
@@ -143,7 +143,7 @@ const props = {
 }
 ```
 
-#### Additional information:
+#### Additional information
 
 The props include classNames && size control to handle additional styling.
 
@@ -180,4 +180,4 @@ You may need to install these optional libs depending on which native components
 
 Error when trying to launch the storybook:
 
-Try to delete your ```node_modules```, go to the project's root and launch: ```yarn && yarn bootstrap```
+Try to delete your ```node_modules```, go to the project's root and launch: ```yarn```

package/es/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/es/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/es/atom/loader/index.native.js

@@ -0,0 +1,192 @@
+import { useAnimateProp } from '@coorpacademy/react-native-animation';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, StyleSheet, Easing } from 'react-native';
+import { useTemplateContext } from '../../template/app-review/template-context';
+
+const createStyleSheet = theme => 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 = useTemplateContext();
+  const {
+    theme
+  } = templateContext;
+  const [styleSheet, setStylesheet] = useState(null);
+  const [visible, setVisible] = useState(true);
+  const [minTimeIsSpent, setMinTimeSpent] = useState(false);
+  const rotation = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0)).current;
+  const hideAnimation = useAnimateProp({
+    property: 'opacity',
+    fromValue: 1,
+    toValue: 0
+  });
+  const {
+    height = 60,
+    color,
+    readyToHide
+  } = props;
+  useEffect(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+  useEffect(() => {
+    if (readyToHide && minTimeIsSpent) {
+      setVisible(false);
+    }
+  }, [readyToHide, minTimeIsSpent]);
+  useEffect(() => {
+    if (!visible) {
+      hideAnimation.start();
+    }
+  }, [visible, hideAnimation]);
+  useEffect(() => {
+    setTimeout(() => {
+      setMinTimeSpent(true);
+    }, MIN_TIME);
+
+    const _animation = Animated.parallel([Animated.loop(Animated.sequence([Animated.timing(scale, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: false
+    }), Animated.timing(scale, {
+      toValue: 1,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: Easing.inOut(Easing.sin)
+    }), Animated.timing(scale, {
+      toValue: 2,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: Easing.inOut(Easing.sin)
+    }), Animated.timing(scale, {
+      toValue: 3,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: Easing.inOut(Easing.sin)
+    })])), Animated.loop(Animated.sequence([Animated.timing(rotation, {
+      toValue: 0,
+      duration: 0,
+      useNativeDriver: false
+    }), Animated.timing(rotation, {
+      toValue: 1,
+      duration: CYCLE_DURATION,
+      useNativeDriver: false,
+      easing: Easing.inOut(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.createElement(Animated.View, {
+    style: hideAnimation.animatedStyle
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.container, {
+      height,
+      width: height,
+      transform: [{
+        scaleX: interpolatedScale
+      }, {
+        scaleY: interpolatedScale
+      }, {
+        rotateZ: interpolatedRotation
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.red, dotStyle, {
+      transform: [{
+        rotateZ: '45deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.green, dotStyle, {
+      transform: [{
+        rotateZ: '135deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.yellow, dotStyle, {
+      transform: [{
+        rotateZ: '225deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.dot, color ? {
+      backgroundColor: color
+    } : styleSheet.blue, dotStyle, {
+      transform: [{
+        rotateZ: '315deg'
+      }, {
+        translateX: dotTranslate
+      }]
+    }]
+  })));
+};
+
+export default Loader;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["useAnimateProp","React","useEffect","useRef","useState","Animated","StyleSheet","Easing","useTemplateContext","createStyleSheet","theme","create","container","alignItems","justifyContent","dot","position","blue","backgroundColor","colors","cta","red","negative","green","positive","yellow","battle","CYCLE_DURATION","MIN_TIME","Loader","props","templateContext","styleSheet","setStylesheet","visible","setVisible","minTimeIsSpent","setMinTimeSpent","rotation","Value","current","scale","hideAnimation","property","fromValue","toValue","height","color","readyToHide","_stylesheet","start","setTimeout","_animation","parallel","loop","sequence","timing","duration","useNativeDriver","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":"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"}

package/es/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/es/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/es/atom/select/index.js

@@ -1,17 +1,20 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import concat from 'lodash/fp/concat';
 import filter from 'lodash/fp/filter';
 import find from 'lodash/fp/find';
+import flatMapDeep from 'lodash/fp/flatMapDeep';
 import get from 'lodash/fp/get';
 import getOr from 'lodash/fp/getOr';
 import includes from 'lodash/fp/includes';
+import isEmpty from 'lodash/fp/isEmpty';
 import keys from 'lodash/fp/keys';
 import map from 'lodash/fp/map';
 import size from 'lodash/fp/size';
-import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
+import { NovaCompositionNavigationArrowDown as ArrowDown, NovaCompositionNavigationArrowTop as ArrowUp } from '@coorpacademy/nova-icons';
 import Provider, { GetSkinFromContext } from '../provider';
 import getClassState from '../../util/get-class-state';
 import style from './style.css';
@@ -28,10 +31,35 @@ const themeStyle = {
   coorpmanager: null
 };
 
+const ArrowView = ({
+  shouldRender,
+  isArrowUp,
+  ariaLabel,
+  arrowClass,
+  arrowColor
+}) => {
+  const props = useMemo(() => _extends({}, ariaLabel & {
+    'aria-label': ariaLabel
+  }, arrowColor & {
+    color: arrowColor
+  }, {
+    className: arrowClass
+  }), [ariaLabel, arrowClass, arrowColor]);
+
+  if (shouldRender) {
+    return isArrowUp ? /*#__PURE__*/React.createElement(ArrowUp, _extends({}, props, {
+      "data-testid": "select-arrow-up-icon"
+    })) : /*#__PURE__*/React.createElement(ArrowDown, _extends({}, props, {
+      "data-testid": "select-arrow-down-icon"
+    }));
+  } else return null;
+};
+
 const Select = (props, legacyContext) => {
   const {
     name,
     options = [],
+    optgroups = [],
     className,
     borderClassName,
     onChange,
@@ -47,12 +75,23 @@ const Select = (props, legacyContext) => {
   } = props;
   const skin = GetSkinFromContext(legacyContext);
   const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
-  const optionList = options && options.map((option, index) => {
+  const [isArrowUp, setIsArrowUp] = useState(false);
+  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);
+  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);
+
+  const selectOption = (option, index) => {
     return /*#__PURE__*/React.createElement("option", {
       key: index,
       value: option.value,
       className: style.selectOption
     }, option.name);
+  };
+
+  const optionList = !isEmpty(options) ? options.map((option, index) => selectOption(option, index)) : optgroups.map((optgroup, index) => {
+    return /*#__PURE__*/React.createElement("optgroup", {
+      key: index,
+      label: optgroup.label
+    }, optgroup.options && optgroup.options.map((option, i) => selectOption(option, i)));
   });
   const titleView = title ? /*#__PURE__*/React.createElement("span", {
     className: style.title
@@ -61,31 +100,28 @@ const Select = (props, legacyContext) => {
     selected: true
   }, options)) : get('value', find({
     selected: true
-  }, options)), [multiple, options]);
+  }, concat(options, flatMapDeep('options', optgroups)))), [multiple, options, optgroups]);
   const selectedLabel = useMemo(() => multiple ? map(get('name'), filter({
     selected: true
-  }, options)) : get('name', find({
+  }, options)) : get('value', find({
     selected: true
-  }, options)), [multiple, options]);
+  }, concat(options, flatMapDeep('options', optgroups)))), [multiple, options, optgroups]);
   const isSelectedInValidOption = useMemo(() => theme === 'player' && getOr(false, 'name', find({
     validOption: false,
     selected: true
   }, options)), [options, theme]);
   const handleChange = useMemo(() => multiple ? e => {
+    setIsArrowUp(false);
     onChange(map(get('value'), e.target.selectedOptions));
   } : e => {
+    setIsArrowUp(false);
     onChange(e.target.value);
   }, [onChange, multiple]);
   const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);
   const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);
-  const shouldUseSkinFontColor = useMemo(() => !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']), [isSelectedInValidOption, selected, theme]);
+  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(() => includes(theme, ['question', 'template', 'player']), [theme]);
+  const shouldUseSkinFontColor = useMemo(() => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer, [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]);
   const arrowColor = selected ? color : undefined;
-  const arrowView = !multiple ? /*#__PURE__*/React.createElement(ArrowDown, {
-    color: includes(theme, ['question', 'template', 'player']) ? arrowColor : black,
-    className: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
-    "aria-label": ariaLabel,
-    "data-testid": "select-arrow-down-icon"
-  }) : null;
   const behaviorClassName = useMemo(() => getClassState(style.default, style.modified, style.error, modified, error), [error, modified]);
   const composedClassName = useMemo(() => classnames(theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName, selected ? style.selected : style.unselected, className), [behaviorClassName, className, selected, theme]);
   const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);
@@ -104,7 +140,13 @@ const Select = (props, legacyContext) => {
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), arrowView, /*#__PURE__*/React.createElement("select", {
+  }, selectedLabel), /*#__PURE__*/React.createElement(ArrowView, {
+    shouldRender: !multiple,
+    isArrowUp: isArrowUp,
+    ariaLabel: ariaLabel,
+    arrowClass: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
+    arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
+  }), /*#__PURE__*/React.createElement("select", {
     "data-name": "native-select",
     className: style.selectBox,
     title: selectedLabel,
@@ -112,7 +154,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.createElement("div", {
     className: style.description
   }, description));
@@ -124,6 +173,10 @@ export const SelectOptionPropTypes = {
   selected: PropTypes.bool,
   validOption: PropTypes.bool
 };
+export const SelectOptionGroupPropTypes = {
+  label: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
+};
 Select.contextTypes = {
   skin: Provider.childContextTypes.skin
 };
@@ -139,6 +192,7 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: PropTypes.func,
   theme: PropTypes.oneOf(keys(themeStyle)),
   options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),
+  optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),
   modified: PropTypes.bool,
   error: PropTypes.bool,
   'aria-label': PropTypes.string

package/es/atom/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","filter","find","get","getOr","includes","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","Select","props","legacyContext","name","options","className","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabel","skin","optionList","option","index","value","selectOption","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","contextTypes","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  coorpmanager: null\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const optionList =\n    options &&\n    options.map((option, index) => {\n      return (\n        <option key={index} value={option.value} className={style.selectOption}>\n          {option.name}\n        </option>\n      );\n    });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, options)),\n    [multiple, options]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('name', find({selected: true}, options)),\n    [multiple, options]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const shouldUseSkinFontColor = useMemo(\n    () =>\n      !isSelectedInValidOption && selected && includes(theme, ['question', 'template', 'player']),\n    [isSelectedInValidOption, selected, theme]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const arrowView = !multiple ? (\n    <ArrowDown\n      color={includes(theme, ['question', 'template', 'player']) ? arrowColor : black}\n      className={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n      aria-label={ariaLabel}\n      data-testid=\"select-arrow-down-icon\"\n    />\n  ) : null;\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        {arrowView}\n        <select\n          data-name=\"native-select\"\n          className={style.selectBox}\n          title={selectedLabel}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","PropTypes","classnames","concat","filter","find","flatMapDeep","get","getOr","includes","isEmpty","keys","map","size","NovaCompositionNavigationArrowDown","ArrowDown","NovaCompositionNavigationArrowTop","ArrowUp","Provider","GetSkinFromContext","getClassState","style","themeStyle","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","color","className","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","selectOption","option","index","value","optionList","optgroup","label","i","titleView","selected","selectedLabel","isSelectedInValidOption","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","shouldUseSkinFontColor","undefined","behaviorClassName","default","composedClassName","unselected","labelSize","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","childContextTypes","propTypes","func","oneOf"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport concat from 'lodash/fp/concat';\nimport filter from 'lodash/fp/filter';\nimport find from 'lodash/fp/find';\nimport flatMapDeep from 'lodash/fp/flatMapDeep';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport includes from 'lodash/fp/includes';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport keys from 'lodash/fp/keys';\nimport map from 'lodash/fp/map';\nimport size from 'lodash/fp/size';\nimport {\n  NovaCompositionNavigationArrowDown as ArrowDown,\n  NovaCompositionNavigationArrowTop as ArrowUp\n} from '@coorpacademy/nova-icons';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n  filter: style.filter,\n  invalid: style.invalid,\n  header: style.header,\n  mooc: style.mooc,\n  question: style.question,\n  sort: style.sort,\n  thematiques: style.thematiques,\n  player: style.player,\n  template: style.template,\n  coorpmanager: null\n};\n\nconst ArrowView = ({shouldRender, isArrowUp, ariaLabel, arrowClass, arrowColor}) => {\n  const props = useMemo(\n    () => ({\n      ...(ariaLabel &\n        {\n          'aria-label': ariaLabel\n        }),\n      ...(arrowColor &\n        {\n          color: arrowColor\n        }),\n      className: arrowClass\n    }),\n    [ariaLabel, arrowClass, arrowColor]\n  );\n  if (shouldRender) {\n    return isArrowUp ? (\n      <ArrowUp {...props} data-testid=\"select-arrow-up-icon\" />\n    ) : (\n      <ArrowDown {...props} data-testid=\"select-arrow-down-icon\" />\n    );\n  } else return null;\n};\n\nconst Select = (props, legacyContext) => {\n  const {\n    name,\n    options = [],\n    optgroups = [],\n    className,\n    borderClassName,\n    onChange,\n    multiple = false,\n    disabled,\n    required,\n    description,\n    theme,\n    modified = false,\n    error = false,\n    title: propTitle,\n    'aria-label': ariaLabel\n  } = props;\n\n  const skin = GetSkinFromContext(legacyContext);\n  const title = useMemo(\n    () => (propTitle ? `${propTitle}${required ? '*' : ''}` : null),\n    [propTitle, required]\n  );\n\n  const [isArrowUp, setIsArrowUp] = useState(false);\n\n  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);\n  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);\n\n  const selectOption = (option, index) => {\n    return (\n      <option key={index} value={option.value} className={style.selectOption}>\n        {option.name}\n      </option>\n    );\n  };\n\n  const optionList = !isEmpty(options)\n    ? options.map((option, index) => selectOption(option, index))\n    : optgroups.map((optgroup, index) => {\n        return (\n          <optgroup key={index} label={optgroup.label}>\n            {optgroup.options && optgroup.options.map((option, i) => selectOption(option, i))}\n          </optgroup>\n        );\n      });\n\n  const titleView = title ? <span className={style.title}>{title} </span> : null;\n\n  const selected = useMemo(\n    () =>\n      multiple\n        ? map(get('value'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n  const selectedLabel = useMemo(\n    () =>\n      multiple\n        ? map(get('name'), filter({selected: true}, options))\n        : get('value', find({selected: true}, concat(options, flatMapDeep('options', optgroups)))),\n    [multiple, options, optgroups]\n  );\n\n  const isSelectedInValidOption = useMemo(\n    () =>\n      theme === 'player' &&\n      getOr(false, 'name', find({validOption: false, selected: true}, options)),\n    [options, theme]\n  );\n\n  const handleChange = useMemo(\n    () =>\n      multiple\n        ? e => {\n            setIsArrowUp(false);\n            onChange(map(get('value'), e.target.selectedOptions));\n          }\n        : e => {\n            setIsArrowUp(false);\n            onChange(e.target.value);\n          },\n    [onChange, multiple]\n  );\n\n  const black = useMemo(() => getOr('#14171A', 'common.black', skin), [skin]);\n  const color = useMemo(() => getOr('#00B0FF', 'common.primary', skin), [skin]);\n  const isThemeOneOfQuestionTemplateOrPlayer = useMemo(\n    () => includes(theme, ['question', 'template', 'player']),\n    [theme]\n  );\n  const shouldUseSkinFontColor = useMemo(\n    () => !isSelectedInValidOption && selected && isThemeOneOfQuestionTemplateOrPlayer,\n    [isSelectedInValidOption, selected, isThemeOneOfQuestionTemplateOrPlayer]\n  );\n  const arrowColor = selected ? color : undefined;\n\n  const behaviorClassName = useMemo(\n    () => getClassState(style.default, style.modified, style.error, modified, error),\n    [error, modified]\n  );\n  const composedClassName = useMemo(\n    () =>\n      classnames(\n        theme && theme !== 'coorpmanager' ? themeStyle[theme] : behaviorClassName,\n        selected ? style.selected : style.unselected,\n        className\n      ),\n    [behaviorClassName, className, selected, theme]\n  );\n\n  const labelSize = useMemo(() => size(selectedLabel), [selectedLabel]);\n\n  const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        data-name=\"select-wrapper\"\n        style={{\n          ...(shouldUseSkinFontColor && {\n            color\n          })\n        }}\n        className={style.selectWrapper}\n      >\n        {titleView}\n        <span\n          data-name=\"select-span\"\n          className={classnames(\n            style.selectSpan,\n            includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template'])\n              ? style.noLabelCommon\n              : null,\n            borderClassName,\n            isLongLabel ? style.longLabel : null\n          )}\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n        >\n          {selectedLabel}\n        </span>\n        <ArrowView\n          shouldRender={!multiple}\n          isArrowUp={isArrowUp}\n          ariaLabel={ariaLabel}\n          arrowClass={shouldUseSkinFontColor ? style.selectedArrow : style.arrow}\n          arrowColor={isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black}\n        />\n        <select\n          data-name=\"native-select\"\n          className={style.selectBox}\n          title={selectedLabel}\n          name={name}\n          onChange={handleChange}\n          value={selected}\n          multiple={multiple}\n          disabled={disabled}\n          onClick={handleSelectOnFocus}\n          onBlur={handleSelectOnBlur}\n          // onBlur does not handle completely an out of bounds click\n          // ex: select is Opened and a click is done outside, cancelling the select\n          // that doesn't count as a Blur, so an onMouseLeave is needed\n          onMouseLeave={handleSelectOnBlur}\n          data-testid=\"native-select\"\n        >\n          {optionList}\n        </select>\n      </label>\n      <div className={style.description}>{description}</div>\n    </div>\n  );\n};\n\nexport const SelectOptionPropTypes = {\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  selected: PropTypes.bool,\n  validOption: PropTypes.bool\n};\n\nexport const SelectOptionGroupPropTypes = {\n  label: PropTypes.string.isRequired,\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))\n};\n\nSelect.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nSelect.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  className: PropTypes.string,\n  borderClassName: PropTypes.string,\n  disabled: PropTypes.bool,\n  multiple: PropTypes.bool,\n  description: PropTypes.string,\n  required: PropTypes.bool,\n  onChange: PropTypes.func,\n  theme: PropTypes.oneOf(keys(themeStyle)),\n  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),\n  optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),\n  modified: PropTypes.bool,\n  error: PropTypes.bool,\n  'aria-label': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}

package/es/molecule/answer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AA4EA,iDASC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/answer/index.js"],"names":[],"mappings":";AAwEA,iDASC"}

package/es/molecule/answer/index.js

@@ -14,8 +14,8 @@ import Qcm from '../questions/qcm';
 import QcmGraphic from '../questions/qcm-graphic';
 import QuestionRange from '../questions/question-range';
 import Template from '../questions/template';
-import Provider from '../../atom/provider';
 import Audio from '../audio';
+import { GetTranslateFromContext } from '../../atom/provider';
 import style from './style.css';
 import propTypes, { MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO } from './prop-types';
 
@@ -64,38 +64,46 @@ MediaView.propTypes = process.env.NODE_ENV !== "production" ? MediaViewPropTypes
 const Switch = ({
   model,
   help
-}, {
-  translate
 }) => {
   const {
     type
   } = model;
+  const translate = GetTranslateFromContext();
 
   switch (type) {
     case 'qcmDrag':
       return /*#__PURE__*/React.createElement(QcmDrag, _extends({}, model, {
-        help: help
+        help: help,
+        groupAriaLabel: translate('answer_the_question')
       }));
 
     case 'qcm':
-      return /*#__PURE__*/React.createElement(Qcm, model);
+      return /*#__PURE__*/React.createElement(Qcm, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'qcmGraphic':
-      return /*#__PURE__*/React.createElement(QcmGraphic, model);
+      return /*#__PURE__*/React.createElement(QcmGraphic, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'freeText':
       return /*#__PURE__*/React.createElement(FreeText, model);
 
     case 'dropDown':
       return /*#__PURE__*/React.createElement(DropDown, _extends({}, model, {
-        "aria-label": translate('drop_down_icon')
+        groupAriaLabel: translate('answer_the_question')
       }));
 
     case 'slider':
-      return /*#__PURE__*/React.createElement(QuestionRange, model);
+      return /*#__PURE__*/React.createElement(QuestionRange, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
 
     case 'template':
-      return /*#__PURE__*/React.createElement(Template, model);
+      return /*#__PURE__*/React.createElement(Template, _extends({}, model, {
+        groupAriaLabel: translate('answer_the_question')
+      }));
   }
 };
 
@@ -103,9 +111,6 @@ Switch.propTypes = process.env.NODE_ENV !== "production" ? {
   model: propTypes.model,
   help: propTypes.help
 } : {};
-Switch.contextTypes = {
-  translate: Provider.childContextTypes.translate
-};
 
 const Answer = props => {
   const {