@coorpacademy/components 11.4.5-alpha.41 → 11.4.5-alpha.42

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

@@ -51,8 +51,7 @@ declare namespace Select {
         modified: PropTypes.Requireable<boolean>;
         error: PropTypes.Requireable<boolean>;
         'aria-label': PropTypes.Requireable<string>;
-        selectId: PropTypes.Requireable<string>;
-        titleClassName: PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
     };
 }
 //# sourceMappingURL=index.d.ts.map

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,qEAsKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;AAwDA,qEA8KC"}

package/es/atom/select/index.js

@@ -1,6 +1,6 @@
 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 filter from 'lodash/fp/filter';
@@ -11,7 +11,7 @@ import includes from 'lodash/fp/includes';
 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,6 +28,30 @@ 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,
@@ -44,11 +68,13 @@ const Select = (props, legacyContext) => {
     error = false,
     title: propTitle,
     'aria-label': ariaLabel,
-    selectId,
-    titleClassName
+    'aria-labelledby': ariaLabelledBy
   } = props;
   const skin = GetSkinFromContext(legacyContext);
   const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
+  const [isArrowUp, setIsArrowUp] = useState(false);
+  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);
+  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);
   const optionList = options && options.map((option, index) => {
     return /*#__PURE__*/React.createElement("option", {
       key: index,
@@ -56,18 +82,9 @@ const Select = (props, legacyContext) => {
       className: style.selectOption
     }, option.name);
   });
-  let titleView = null;
-
-  if (selectId) {
-    titleView = /*#__PURE__*/React.createElement("div", {
-      className: titleClassName
-    }, title, " ");
-  } else if (title) {
-    titleView = /*#__PURE__*/React.createElement("span", {
-      className: style.title
-    }, title, " ");
-  }
-
+  const titleView = title ? /*#__PURE__*/React.createElement("span", {
+    className: style.title
+  }, title, " ") : null;
   const selected = useMemo(() => multiple ? map(get('value'), filter({
     selected: true
   }, options)) : get('value', find({
@@ -83,53 +100,62 @@ const Select = (props, legacyContext) => {
     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]);
   const isLongLabel = useMemo(() => labelSize >= 65, [labelSize]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", selectId ? {
-    htmlFor: selectId
-  } : {}, titleView), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classnames(composedClassName, theme === 'coorpmanager' ? style.coorpmanager : null)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("label", {
     "data-name": "select-wrapper",
     style: _extends({}, shouldUseSkinFontColor && {
       color
     }),
     className: style.selectWrapper
-  }, /*#__PURE__*/React.createElement("span", {
+  }, titleView, /*#__PURE__*/React.createElement("span", {
     "data-name": "select-span",
     className: classnames(style.selectSpan, includes(theme, ['player', 'invalid', 'question', 'thematiques', 'template']) ? style.noLabelCommon : null, borderClassName, isLongLabel ? style.longLabel : null),
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), arrowView, /*#__PURE__*/React.createElement("select", _extends({}, selectId ? {
-    id: selectId
+  }, 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", _extends({}, ariaLabelledBy ? {
+    'aria-labelledby': ariaLabelledBy
   } : {}, {
     "data-name": "native-select",
     className: style.selectBox,
+    title: selectedLabel,
     name: name,
     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)));
+  }, description));
 };
 
 export const SelectOptionPropTypes = {
@@ -156,8 +182,7 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
   modified: PropTypes.bool,
   error: PropTypes.bool,
   'aria-label': PropTypes.string,
-  selectId: PropTypes.string,
-  titleClassName: PropTypes.string
+  'aria-labelledby': PropTypes.string
 } : {};
 export default Select;
 //# sourceMappingURL=index.js.map

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","selectId","titleClassName","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","htmlFor","selectWrapper","selectSpan","noLabelCommon","longLabel","id","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    selectId,\n    titleClassName\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  let titleView = null;\n  if (selectId) {\n    titleView = <div className={titleClassName}>{title} </div>;\n  } else if (title) {\n    titleView = <span className={style.title}>{title} </span>;\n  }\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      <label {...(selectId ? {htmlFor: selectId} : {})}>{titleView}</label>\n      <div\n        className={classnames(\n          composedClassName,\n          theme === 'coorpmanager' ? style.coorpmanager : null\n        )}\n      >\n        <div\n          data-name=\"select-wrapper\"\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n          className={style.selectWrapper}\n        >\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            {...(selectId ? {id: selectId} : {})}\n            data-name=\"native-select\"\n            className={style.selectBox}\n            name={name}\n            onChange={handleChange}\n            value={selected}\n            multiple={multiple}\n            disabled={disabled}\n          >\n            {optionList}\n          </select>\n        </div>\n        <div className={style.description}>{description}</div>\n      </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  selectId: PropTypes.string,\n  titleClassName: 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","filter","find","get","getOr","includes","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","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","setIsArrowUp","handleSelectOnFocus","handleSelectOnBlur","optionList","option","index","value","selectOption","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","contextTypes","childContextTypes","propTypes","func","oneOf","arrayOf","shape"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} 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 {\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    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    'aria-labelledby': ariaLabelledBy\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 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            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          {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\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\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  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}

package/es/atom/select/style.css

@@ -24,11 +24,11 @@
   composes: default;
 }
 
-div.coorpmanager div.selectWrapper {
+div.coorpmanager label.selectWrapper {
   max-width: fit-content;
 }
 
-.coorpmanager div.selectWrapper select.selectBox {
+.coorpmanager label.selectWrapper select.selectBox {
   padding-left: 10px;
   position: relative;
   border-radius: 2px;
@@ -38,13 +38,13 @@ div.coorpmanager div.selectWrapper {
 }
 
 @media tablet {
-  .coorpmanager div.selectWrapper .description {
+  .coorpmanager label.selectWrapper .description {
     max-width: 120px;
   }
 }
 
 @media mobile {
-  .coorpmanager div.selectWrapper select.selectBox {
+  .coorpmanager label.selectWrapper select.selectBox {
     width: 100%;
     min-width: 180px;
   }
@@ -272,7 +272,7 @@ div.coorpmanager div.selectWrapper {
   box-sizing: border-box;
 }
 
-div.default div.selectWrapper span.longLabel {
+div.default label.selectWrapper span.longLabel {
     min-width: 230px;
     max-width: 280px;
     white-space: pre-wrap;
@@ -529,7 +529,7 @@ div.player:hover span.selectSpan {
 
 /* mozilla specific styling */
 @supports (-moz-appearance:none) {
-  .player div.selectWrapper select.selectBox {
+  .player label.selectWrapper select.selectBox {
     width: 100%;
   } 
 }

package/es/molecule/brand-form-group/index.d.ts

@@ -99,8 +99,7 @@ declare namespace BrandFormGroup {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
-            selectId: PropTypes.Requireable<string>;
-            titleClassName: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Validator<string>;
@@ -205,8 +204,7 @@ declare namespace BrandFormGroup {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
-                    selectId: PropTypes.Requireable<string>;
-                    titleClassName: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;

package/es/molecule/filters/index.d.ts

@@ -31,8 +31,7 @@ declare class Filters extends React.Component<any, any, any> {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
-            selectId: PropTypes.Requireable<string>;
-            titleClassName: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBAsFC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBAsFC;CACF"}

package/es/molecule/setup-slide/index.d.ts

@@ -57,8 +57,7 @@ declare namespace SetupSlide {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
-            selectId: PropTypes.Requireable<string>;
-            titleClassName: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Validator<string>;

package/es/molecule/setup-slider/index.d.ts

@@ -70,8 +70,7 @@ declare namespace SetupSlider {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
-                selectId: PropTypes.Requireable<string>;
-                titleClassName: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }> | PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
                 title: PropTypes.Validator<string>;

package/es/organism/brand-form/index.d.ts

@@ -129,8 +129,7 @@ declare namespace BrandForm {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
-                selectId: PropTypes.Requireable<string>;
-                titleClassName: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }> | PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
                 title: PropTypes.Validator<string>;
@@ -235,8 +234,7 @@ declare namespace BrandForm {
                         modified: PropTypes.Requireable<boolean>;
                         error: PropTypes.Requireable<boolean>;
                         'aria-label': PropTypes.Requireable<string>;
-                        selectId: PropTypes.Requireable<string>;
-                        titleClassName: PropTypes.Requireable<string>;
+                        'aria-labelledby': PropTypes.Requireable<string>;
                     }> | PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
                         title: PropTypes.Validator<string>;

package/es/organism/wizard-contents/index.d.ts

@@ -146,8 +146,7 @@ declare namespace WizardContents {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
-                    selectId: PropTypes.Requireable<string>;
-                    titleClassName: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;
@@ -252,8 +251,7 @@ declare namespace WizardContents {
                             modified: PropTypes.Requireable<boolean>;
                             error: PropTypes.Requireable<boolean>;
                             'aria-label': PropTypes.Requireable<string>;
-                            selectId: PropTypes.Requireable<string>;
-                            titleClassName: PropTypes.Requireable<string>;
+                            'aria-labelledby': PropTypes.Requireable<string>;
                         }> | PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
                             title: PropTypes.Validator<string>;

package/es/template/back-office/brand-update/index.d.ts

@@ -231,8 +231,7 @@ declare namespace BrandUpdate {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
-                    selectId: PropTypes.Requireable<string>;
-                    titleClassName: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;
@@ -337,8 +336,7 @@ declare namespace BrandUpdate {
                             modified: PropTypes.Requireable<boolean>;
                             error: PropTypes.Requireable<boolean>;
                             'aria-label': PropTypes.Requireable<string>;
-                            selectId: PropTypes.Requireable<string>;
-                            titleClassName: PropTypes.Requireable<string>;
+                            'aria-labelledby': PropTypes.Requireable<string>;
                         }> | PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
                             title: PropTypes.Validator<string>;
@@ -858,8 +856,7 @@ declare namespace BrandUpdate {
                         modified: PropTypes.Requireable<boolean>;
                         error: PropTypes.Requireable<boolean>;
                         'aria-label': PropTypes.Requireable<string>;
-                        selectId: PropTypes.Requireable<string>;
-                        titleClassName: PropTypes.Requireable<string>;
+                        'aria-labelledby': PropTypes.Requireable<string>;
                     }> | PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
                         title: PropTypes.Validator<string>;
@@ -964,8 +961,7 @@ declare namespace BrandUpdate {
                                 modified: PropTypes.Requireable<boolean>;
                                 error: PropTypes.Requireable<boolean>;
                                 'aria-label': PropTypes.Requireable<string>;
-                                selectId: PropTypes.Requireable<string>;
-                                titleClassName: PropTypes.Requireable<string>;
+                                'aria-labelledby': PropTypes.Requireable<string>;
                             }> | PropTypes.InferProps<{
                                 type: PropTypes.Requireable<string>;
                                 title: PropTypes.Validator<string>;

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

@@ -58,8 +58,7 @@ declare namespace SearchPage {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
-                selectId: PropTypes.Requireable<string>;
-                titleClassName: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }>>;
             onSearch: PropTypes.Requireable<(...args: any[]) => any>;
             onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -51,8 +51,7 @@ declare namespace Select {
         modified: PropTypes.Requireable<boolean>;
         error: PropTypes.Requireable<boolean>;
         'aria-label': PropTypes.Requireable<string>;
-        selectId: PropTypes.Requireable<string>;
-        titleClassName: PropTypes.Requireable<string>;
+        'aria-labelledby': PropTypes.Requireable<string>;
     };
 }
 //# sourceMappingURL=index.d.ts.map

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,qEAsKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;AAwDA,qEA8KC"}

package/lib/atom/select/index.js

@@ -54,6 +54,30 @@ 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,
@@ -70,11 +94,13 @@ const Select = (props, legacyContext) => {
     error = false,
     title: propTitle,
     'aria-label': ariaLabel,
-    selectId,
-    titleClassName
+    'aria-labelledby': ariaLabelledBy
   } = props;
   const skin = (0, _provider.GetSkinFromContext)(legacyContext);
   const title = (0, _react.useMemo)(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
+  const [isArrowUp, setIsArrowUp] = (0, _react.useState)(false);
+  const handleSelectOnFocus = (0, _react.useCallback)(() => setIsArrowUp(true), []);
+  const handleSelectOnBlur = (0, _react.useCallback)(() => setIsArrowUp(false), []);
   const optionList = options && options.map((option, index) => {
     return /*#__PURE__*/_react.default.createElement("option", {
       key: index,
@@ -82,18 +108,9 @@ const Select = (props, legacyContext) => {
       className: _style.default.selectOption
     }, option.name);
   });
-  let titleView = null;
-
-  if (selectId) {
-    titleView = /*#__PURE__*/_react.default.createElement("div", {
-      className: titleClassName
-    }, title, " ");
-  } else if (title) {
-    titleView = /*#__PURE__*/_react.default.createElement("span", {
-      className: _style.default.title
-    }, title, " ");
-  }
-
+  const titleView = title ? /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.title
+  }, title, " ") : null;
   const selected = (0, _react.useMemo)(() => multiple ? (0, _map.default)((0, _get.default)('value'), (0, _filter.default)({
     selected: true
   }, options)) : (0, _get.default)('value', (0, _find.default)({
@@ -109,53 +126,62 @@ const Select = (props, legacyContext) => {
     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]);
   const isLongLabel = (0, _react.useMemo)(() => labelSize >= 65, [labelSize]);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", selectId ? {
-    htmlFor: selectId
-  } : {}, titleView), /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(composedClassName, theme === 'coorpmanager' ? _style.default.coorpmanager : null)
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("label", {
     "data-name": "select-wrapper",
     style: _extends({}, shouldUseSkinFontColor && {
       color
     }),
     className: _style.default.selectWrapper
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, titleView, /*#__PURE__*/_react.default.createElement("span", {
     "data-name": "select-span",
     className: (0, _classnames.default)(_style.default.selectSpan, (0, _includes.default)(theme, ['player', 'invalid', 'question', 'thematiques', 'template']) ? _style.default.noLabelCommon : null, borderClassName, isLongLabel ? _style.default.longLabel : null),
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), arrowView, /*#__PURE__*/_react.default.createElement("select", _extends({}, selectId ? {
-    id: selectId
+  }, 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", _extends({}, ariaLabelledBy ? {
+    'aria-labelledby': ariaLabelledBy
   } : {}, {
     "data-name": "native-select",
     className: _style.default.selectBox,
+    title: selectedLabel,
     name: name,
     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)));
+  }, description));
 };
 
 const SelectOptionPropTypes = {
@@ -183,8 +209,7 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
   modified: _propTypes.default.bool,
   error: _propTypes.default.bool,
   'aria-label': _propTypes.default.string,
-  selectId: _propTypes.default.string,
-  titleClassName: _propTypes.default.string
+  'aria-labelledby': _propTypes.default.string
 } : {};
 var _default = Select;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["themeStyle","filter","style","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","selectId","titleClassName","skin","GetSkinFromContext","useMemo","optionList","map","option","index","value","selectOption","titleView","selected","get","find","selectedLabel","isSelectedInValidOption","getOr","validOption","handleChange","e","target","selectedOptions","black","color","shouldUseSkinFontColor","includes","arrowColor","undefined","arrowView","selectedArrow","arrow","behaviorClassName","getClassState","default","composedClassName","classnames","unselected","labelSize","size","isLongLabel","htmlFor","selectWrapper","selectSpan","noLabelCommon","longLabel","id","selectBox","SelectOptionPropTypes","PropTypes","string","isRequired","oneOfType","number","bool","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","keys","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    selectId,\n    titleClassName\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  let titleView = null;\n  if (selectId) {\n    titleView = <div className={titleClassName}>{title} </div>;\n  } else if (title) {\n    titleView = <span className={style.title}>{title} </span>;\n  }\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      <label {...(selectId ? {htmlFor: selectId} : {})}>{titleView}</label>\n      <div\n        className={classnames(\n          composedClassName,\n          theme === 'coorpmanager' ? style.coorpmanager : null\n        )}\n      >\n        <div\n          data-name=\"select-wrapper\"\n          style={{\n            ...(shouldUseSkinFontColor && {\n              color\n            })\n          }}\n          className={style.selectWrapper}\n        >\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            {...(selectId ? {id: selectId} : {})}\n            data-name=\"native-select\"\n            className={style.selectBox}\n            name={name}\n            onChange={handleChange}\n            value={selected}\n            multiple={multiple}\n            disabled={disabled}\n          >\n            {optionList}\n          </select>\n        </div>\n        <div className={style.description}>{description}</div>\n      </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  selectId: PropTypes.string,\n  titleClassName: PropTypes.string\n};\n\nexport default Select;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,UAAU,GAAG;EACjBC,MAAM,EAAEC,cAAA,CAAMD,MADG;EAEjBE,OAAO,EAAED,cAAA,CAAMC,OAFE;EAGjBC,MAAM,EAAEF,cAAA,CAAME,MAHG;EAIjBC,IAAI,EAAEH,cAAA,CAAMG,IAJK;EAKjBC,QAAQ,EAAEJ,cAAA,CAAMI,QALC;EAMjBC,IAAI,EAAEL,cAAA,CAAMK,IANK;EAOjBC,WAAW,EAAEN,cAAA,CAAMM,WAPF;EAQjBC,MAAM,EAAEP,cAAA,CAAMO,MARG;EASjBC,QAAQ,EAAER,cAAA,CAAMQ,QATC;EAUjBC,YAAY,EAAE;AAVG,CAAnB;;AAaA,MAAMC,MAAM,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACvC,MAAM;IACJC,IADI;IAEJC,OAAO,GAAG,EAFN;IAGJC,SAHI;IAIJC,eAJI;IAKJC,QALI;IAMJC,QAAQ,GAAG,KANP;IAOJC,QAPI;IAQJC,QARI;IASJC,WATI;IAUJC,KAVI;IAWJC,QAAQ,GAAG,KAXP;IAYJC,KAAK,GAAG,KAZJ;IAaJC,KAAK,EAAEC,SAbH;IAcJ,cAAcC,SAdV;IAeJC,QAfI;IAgBJC;EAhBI,IAiBFlB,KAjBJ;EAmBA,MAAMmB,IAAI,GAAG,IAAAC,4BAAA,EAAmBnB,aAAnB,CAAb;EACA,MAAMa,KAAK,GAAG,IAAAO,cAAA,EACZ,MAAON,SAAS,GAAI,GAAEA,SAAU,GAAEN,QAAQ,GAAG,GAAH,GAAS,EAAG,EAAtC,GAA0C,IAD9C,EAEZ,CAACM,SAAD,EAAYN,QAAZ,CAFY,CAAd;EAKA,MAAMa,UAAU,GACdnB,OAAO,IACPA,OAAO,CAACoB,GAAR,CAAY,CAACC,MAAD,EAASC,KAAT,KAAmB;IAC7B,oBACE;MAAQ,GAAG,EAAEA,KAAb;MAAoB,KAAK,EAAED,MAAM,CAACE,KAAlC;MAAyC,SAAS,EAAErC,cAAA,CAAMsC;IAA1D,GACGH,MAAM,CAACtB,IADV,CADF;EAKD,CAND,CAFF;EAUA,IAAI0B,SAAS,GAAG,IAAhB;;EACA,IAAIX,QAAJ,EAAc;IACZW,SAAS,gBAAG;MAAK,SAAS,EAAEV;IAAhB,GAAiCJ,KAAjC,MAAZ;EACD,CAFD,MAEO,IAAIA,KAAJ,EAAW;IAChBc,SAAS,gBAAG;MAAM,SAAS,EAAEvC,cAAA,CAAMyB;IAAvB,GAA+BA,KAA/B,MAAZ;EACD;;EAED,MAAMe,QAAQ,GAAG,IAAAR,cAAA,EACf,MACEd,QAAQ,GACJ,IAAAgB,YAAA,EAAI,IAAAO,YAAA,EAAI,OAAJ,CAAJ,EAAkB,IAAA1C,eAAA,EAAO;IAACyC,QAAQ,EAAE;EAAX,CAAP,EAAyB1B,OAAzB,CAAlB,CADI,GAEJ,IAAA2B,YAAA,EAAI,OAAJ,EAAa,IAAAC,aAAA,EAAK;IAACF,QAAQ,EAAE;EAAX,CAAL,EAAuB1B,OAAvB,CAAb,CAJS,EAKf,CAACI,QAAD,EAAWJ,OAAX,CALe,CAAjB;EAOA,MAAM6B,aAAa,GAAG,IAAAX,cAAA,EACpB,MACEd,QAAQ,GACJ,IAAAgB,YAAA,EAAI,IAAAO,YAAA,EAAI,MAAJ,CAAJ,EAAiB,IAAA1C,eAAA,EAAO;IAACyC,QAAQ,EAAE;EAAX,CAAP,EAAyB1B,OAAzB,CAAjB,CADI,GAEJ,IAAA2B,YAAA,EAAI,MAAJ,EAAY,IAAAC,aAAA,EAAK;IAACF,QAAQ,EAAE;EAAX,CAAL,EAAuB1B,OAAvB,CAAZ,CAJc,EAKpB,CAACI,QAAD,EAAWJ,OAAX,CALoB,CAAtB;EAQA,MAAM8B,uBAAuB,GAAG,IAAAZ,cAAA,EAC9B,MACEV,KAAK,KAAK,QAAV,IACA,IAAAuB,cAAA,EAAM,KAAN,EAAa,MAAb,EAAqB,IAAAH,aAAA,EAAK;IAACI,WAAW,EAAE,KAAd;IAAqBN,QAAQ,EAAE;EAA/B,CAAL,EAA2C1B,OAA3C,CAArB,CAH4B,EAI9B,CAACA,OAAD,EAAUQ,KAAV,CAJ8B,CAAhC;EAOA,MAAMyB,YAAY,GAAG,IAAAf,cAAA,EACnB,MACEd,QAAQ,GACJ8B,CAAC,IAAI;IACH/B,QAAQ,CAAC,IAAAiB,YAAA,EAAI,IAAAO,YAAA,EAAI,OAAJ,CAAJ,EAAkBO,CAAC,CAACC,MAAF,CAASC,eAA3B,CAAD,CAAR;EACD,CAHG,GAIJF,CAAC,IAAI;IACH/B,QAAQ,CAAC+B,CAAC,CAACC,MAAF,CAASZ,KAAV,CAAR;EACD,CARY,EASnB,CAACpB,QAAD,EAAWC,QAAX,CATmB,CAArB;EAYA,MAAMiC,KAAK,GAAG,IAAAnB,cAAA,EAAQ,MAAM,IAAAa,cAAA,EAAM,SAAN,EAAiB,cAAjB,EAAiCf,IAAjC,CAAd,EAAsD,CAACA,IAAD,CAAtD,CAAd;EACA,MAAMsB,KAAK,GAAG,IAAApB,cAAA,EAAQ,MAAM,IAAAa,cAAA,EAAM,SAAN,EAAiB,gBAAjB,EAAmCf,IAAnC,CAAd,EAAwD,CAACA,IAAD,CAAxD,CAAd;EACA,MAAMuB,sBAAsB,GAAG,IAAArB,cAAA,EAC7B,MACE,CAACY,uBAAD,IAA4BJ,QAA5B,IAAwC,IAAAc,iBAAA,EAAShC,KAAT,EAAgB,CAAC,UAAD,EAAa,UAAb,EAAyB,QAAzB,CAAhB,CAFb,EAG7B,CAACsB,uBAAD,EAA0BJ,QAA1B,EAAoClB,KAApC,CAH6B,CAA/B;EAKA,MAAMiC,UAAU,GAAGf,QAAQ,GAAGY,KAAH,GAAWI,SAAtC;EAEA,MAAMC,SAAS,GAAG,CAACvC,QAAD,gBAChB,6BAAC,6CAAD;IACE,KAAK,EAAE,IAAAoC,iBAAA,EAAShC,KAAT,EAAgB,CAAC,UAAD,EAAa,UAAb,EAAyB,QAAzB,CAAhB,IAAsDiC,UAAtD,GAAmEJ,KAD5E;IAEE,SAAS,EAAEE,sBAAsB,GAAGrD,cAAA,CAAM0D,aAAT,GAAyB1D,cAAA,CAAM2D,KAFlE;IAGE,cAAYhC,SAHd;IAIE,eAAY;EAJd,EADgB,GAOd,IAPJ;EAQA,MAAMiC,iBAAiB,GAAG,IAAA5B,cAAA,EACxB,MAAM,IAAA6B,sBAAA,EAAc7D,cAAA,CAAM8D,OAApB,EAA6B9D,cAAA,CAAMuB,QAAnC,EAA6CvB,cAAA,CAAMwB,KAAnD,EAA0DD,QAA1D,EAAoEC,KAApE,CADkB,EAExB,CAACA,KAAD,EAAQD,QAAR,CAFwB,CAA1B;EAIA,MAAMwC,iBAAiB,GAAG,IAAA/B,cAAA,EACxB,MACE,IAAAgC,mBAAA,EACE1C,KAAK,IAAIA,KAAK,KAAK,cAAnB,GAAoCxB,UAAU,CAACwB,KAAD,CAA9C,GAAwDsC,iBAD1D,EAEEpB,QAAQ,GAAGxC,cAAA,CAAMwC,QAAT,GAAoBxC,cAAA,CAAMiE,UAFpC,EAGElD,SAHF,CAFsB,EAOxB,CAAC6C,iBAAD,EAAoB7C,SAApB,EAA+ByB,QAA/B,EAAyClB,KAAzC,CAPwB,CAA1B;EAUA,MAAM4C,SAAS,GAAG,IAAAlC,cAAA,EAAQ,MAAM,IAAAmC,aAAA,EAAKxB,aAAL,CAAd,EAAmC,CAACA,aAAD,CAAnC,CAAlB;EAEA,MAAMyB,WAAW,GAAG,IAAApC,cAAA,EAAQ,MAAMkC,SAAS,IAAI,EAA3B,EAA+B,CAACA,SAAD,CAA/B,CAApB;EAEA,oBACE,uDACE,sCAAYtC,QAAQ,GAAG;IAACyC,OAAO,EAAEzC;EAAV,CAAH,GAAyB,EAA7C,EAAmDW,SAAnD,CADF,eAEE;IACE,SAAS,EAAE,IAAAyB,mBAAA,EACTD,iBADS,EAETzC,KAAK,KAAK,cAAV,GAA2BtB,cAAA,CAAMS,YAAjC,GAAgD,IAFvC;EADb,gBAME;IACE,aAAU,gBADZ;IAEE,KAAK,eACC4C,sBAAsB,IAAI;MAC5BD;IAD4B,CAD3B,CAFP;IAOE,SAAS,EAAEpD,cAAA,CAAMsE;EAPnB,gBASE;IACE,aAAU,aADZ;IAEE,SAAS,EAAE,IAAAN,mBAAA,EACThE,cAAA,CAAMuE,UADG,EAET,IAAAjB,iBAAA,EAAShC,KAAT,EAAgB,CAAC,QAAD,EAAW,SAAX,EAAsB,UAAtB,EAAkC,aAAlC,EAAiD,UAAjD,CAAhB,IACItB,cAAA,CAAMwE,aADV,GAEI,IAJK,EAKTxD,eALS,EAMToD,WAAW,GAAGpE,cAAA,CAAMyE,SAAT,GAAqB,IANvB,CAFb;IAUE,KAAK,eACCpB,sBAAsB,IAAI;MAC5BD;IAD4B,CAD3B;EAVP,GAgBGT,aAhBH,CATF,EA2BGc,SA3BH,eA4BE,oDACO7B,QAAQ,GAAG;IAAC8C,EAAE,EAAE9C;EAAL,CAAH,GAAoB,EADnC;IAEE,aAAU,eAFZ;IAGE,SAAS,EAAE5B,cAAA,CAAM2E,SAHnB;IAIE,IAAI,EAAE9D,IAJR;IAKE,QAAQ,EAAEkC,YALZ;IAME,KAAK,EAAEP,QANT;IAOE,QAAQ,EAAEtB,QAPZ;IAQE,QAAQ,EAAEC;EARZ,IAUGc,UAVH,CA5BF,CANF,eA+CE;IAAK,SAAS,EAAEjC,cAAA,CAAMqB;EAAtB,GAAoCA,WAApC,CA/CF,CAFF,CADF;AAsDD,CAtKD;;AAwKO,MAAMuD,qBAAqB,GAAG;EACnC/D,IAAI,EAAEgE,kBAAA,CAAUC,MAAV,CAAiBC,UADY;EAEnC1C,KAAK,EAAEwC,kBAAA,CAAUG,SAAV,CAAoB,CAACH,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUI,MAA7B,CAApB,CAF4B;EAGnCzC,QAAQ,EAAEqC,kBAAA,CAAUK,IAHe;EAInCpC,WAAW,EAAE+B,kBAAA,CAAUK;AAJY,CAA9B;;AAOPxE,MAAM,CAACyE,YAAP,GAAsB;EACpBrD,IAAI,EAAEsD,iBAAA,CAASC,iBAAT,CAA2BvD;AADb,CAAtB;AAIApB,MAAM,CAAC4E,SAAP,2CAAmB;EACjB7D,KAAK,EAAEoD,kBAAA,CAAUC,MADA;EAEjBjE,IAAI,EAAEgE,kBAAA,CAAUC,MAFC;EAGjB/D,SAAS,EAAE8D,kBAAA,CAAUC,MAHJ;EAIjB9D,eAAe,EAAE6D,kBAAA,CAAUC,MAJV;EAKjB3D,QAAQ,EAAE0D,kBAAA,CAAUK,IALH;EAMjBhE,QAAQ,EAAE2D,kBAAA,CAAUK,IANH;EAOjB7D,WAAW,EAAEwD,kBAAA,CAAUC,MAPN;EAQjB1D,QAAQ,EAAEyD,kBAAA,CAAUK,IARH;EASjBjE,QAAQ,EAAE4D,kBAAA,CAAUU,IATH;EAUjBjE,KAAK,EAAEuD,kBAAA,CAAUW,KAAV,CAAgB,IAAAC,aAAA,EAAK3F,UAAL,CAAhB,CAVU;EAWjBgB,OAAO,EAAE+D,kBAAA,CAAUa,OAAV,CAAkBb,kBAAA,CAAUc,KAAV,CAAgBf,qBAAhB,CAAlB,CAXQ;EAYjBrD,QAAQ,EAAEsD,kBAAA,CAAUK,IAZH;EAajB1D,KAAK,EAAEqD,kBAAA,CAAUK,IAbA;EAcjB,cAAcL,kBAAA,CAAUC,MAdP;EAejBlD,QAAQ,EAAEiD,kBAAA,CAAUC,MAfH;EAgBjBjD,cAAc,EAAEgD,kBAAA,CAAUC;AAhBT,CAAnB;eAmBepE,M"}
+{"version":3,"file":"index.js","names":["themeStyle","filter","style","invalid","header","mooc","question","sort","thematiques","player","template","coorpmanager","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","useMemo","color","className","Select","legacyContext","name","options","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","GetSkinFromContext","setIsArrowUp","useState","handleSelectOnFocus","useCallback","handleSelectOnBlur","optionList","map","option","index","value","selectOption","titleView","selected","get","find","selectedLabel","isSelectedInValidOption","getOr","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","includes","shouldUseSkinFontColor","undefined","behaviorClassName","getClassState","default","composedClassName","classnames","unselected","labelSize","size","isLongLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","PropTypes","string","isRequired","oneOfType","number","bool","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","keys","arrayOf","shape"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useMemo, useState} 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 {\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    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    'aria-labelledby': ariaLabelledBy\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 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            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          {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\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\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  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}

package/lib/atom/select/style.css

@@ -24,11 +24,11 @@
   composes: default;
 }
 
-div.coorpmanager div.selectWrapper {
+div.coorpmanager label.selectWrapper {
   max-width: fit-content;
 }
 
-.coorpmanager div.selectWrapper select.selectBox {
+.coorpmanager label.selectWrapper select.selectBox {
   padding-left: 10px;
   position: relative;
   border-radius: 2px;
@@ -38,13 +38,13 @@ div.coorpmanager div.selectWrapper {
 }
 
 @media tablet {
-  .coorpmanager div.selectWrapper .description {
+  .coorpmanager label.selectWrapper .description {
     max-width: 120px;
   }
 }
 
 @media mobile {
-  .coorpmanager div.selectWrapper select.selectBox {
+  .coorpmanager label.selectWrapper select.selectBox {
     width: 100%;
     min-width: 180px;
   }
@@ -272,7 +272,7 @@ div.coorpmanager div.selectWrapper {
   box-sizing: border-box;
 }
 
-div.default div.selectWrapper span.longLabel {
+div.default label.selectWrapper span.longLabel {
     min-width: 230px;
     max-width: 280px;
     white-space: pre-wrap;
@@ -529,7 +529,7 @@ div.player:hover span.selectSpan {
 
 /* mozilla specific styling */
 @supports (-moz-appearance:none) {
-  .player div.selectWrapper select.selectBox {
+  .player label.selectWrapper select.selectBox {
     width: 100%;
   } 
 }

package/lib/molecule/brand-form-group/index.d.ts

@@ -99,8 +99,7 @@ declare namespace BrandFormGroup {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
-            selectId: PropTypes.Requireable<string>;
-            titleClassName: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Validator<string>;
@@ -205,8 +204,7 @@ declare namespace BrandFormGroup {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
-                    selectId: PropTypes.Requireable<string>;
-                    titleClassName: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;

package/lib/molecule/filters/index.d.ts

@@ -31,8 +31,7 @@ declare class Filters extends React.Component<any, any, any> {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
-            selectId: PropTypes.Requireable<string>;
-            titleClassName: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }>>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/molecule/filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBAsFC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/filters/index.js"],"names":[],"mappings":";AASA;IACE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcE;IAEF;;;;;;;;;;;;;;;;;;;;;;MAEE;IAEF,wBASC;IAPC;;;MAGC;IAMH,yBAcC;IAED,uBAYC;IAED,qBAOC;IAED,sBAsFC;CACF"}

package/lib/molecule/setup-slide/index.d.ts

@@ -57,8 +57,7 @@ declare namespace SetupSlide {
             modified: PropTypes.Requireable<boolean>;
             error: PropTypes.Requireable<boolean>;
             'aria-label': PropTypes.Requireable<string>;
-            selectId: PropTypes.Requireable<string>;
-            titleClassName: PropTypes.Requireable<string>;
+            'aria-labelledby': PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             title: PropTypes.Validator<string>;

package/lib/molecule/setup-slider/index.d.ts

@@ -70,8 +70,7 @@ declare namespace SetupSlider {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
-                selectId: PropTypes.Requireable<string>;
-                titleClassName: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }> | PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
                 title: PropTypes.Validator<string>;

package/lib/organism/brand-form/index.d.ts

@@ -129,8 +129,7 @@ declare namespace BrandForm {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
-                selectId: PropTypes.Requireable<string>;
-                titleClassName: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }> | PropTypes.InferProps<{
                 type: PropTypes.Requireable<string>;
                 title: PropTypes.Validator<string>;
@@ -235,8 +234,7 @@ declare namespace BrandForm {
                         modified: PropTypes.Requireable<boolean>;
                         error: PropTypes.Requireable<boolean>;
                         'aria-label': PropTypes.Requireable<string>;
-                        selectId: PropTypes.Requireable<string>;
-                        titleClassName: PropTypes.Requireable<string>;
+                        'aria-labelledby': PropTypes.Requireable<string>;
                     }> | PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
                         title: PropTypes.Validator<string>;

package/lib/organism/wizard-contents/index.d.ts

@@ -146,8 +146,7 @@ declare namespace WizardContents {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
-                    selectId: PropTypes.Requireable<string>;
-                    titleClassName: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;
@@ -252,8 +251,7 @@ declare namespace WizardContents {
                             modified: PropTypes.Requireable<boolean>;
                             error: PropTypes.Requireable<boolean>;
                             'aria-label': PropTypes.Requireable<string>;
-                            selectId: PropTypes.Requireable<string>;
-                            titleClassName: PropTypes.Requireable<string>;
+                            'aria-labelledby': PropTypes.Requireable<string>;
                         }> | PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
                             title: PropTypes.Validator<string>;

package/lib/template/back-office/brand-update/index.d.ts

@@ -231,8 +231,7 @@ declare namespace BrandUpdate {
                     modified: PropTypes.Requireable<boolean>;
                     error: PropTypes.Requireable<boolean>;
                     'aria-label': PropTypes.Requireable<string>;
-                    selectId: PropTypes.Requireable<string>;
-                    titleClassName: PropTypes.Requireable<string>;
+                    'aria-labelledby': PropTypes.Requireable<string>;
                 }> | PropTypes.InferProps<{
                     type: PropTypes.Requireable<string>;
                     title: PropTypes.Validator<string>;
@@ -337,8 +336,7 @@ declare namespace BrandUpdate {
                             modified: PropTypes.Requireable<boolean>;
                             error: PropTypes.Requireable<boolean>;
                             'aria-label': PropTypes.Requireable<string>;
-                            selectId: PropTypes.Requireable<string>;
-                            titleClassName: PropTypes.Requireable<string>;
+                            'aria-labelledby': PropTypes.Requireable<string>;
                         }> | PropTypes.InferProps<{
                             type: PropTypes.Requireable<string>;
                             title: PropTypes.Validator<string>;
@@ -858,8 +856,7 @@ declare namespace BrandUpdate {
                         modified: PropTypes.Requireable<boolean>;
                         error: PropTypes.Requireable<boolean>;
                         'aria-label': PropTypes.Requireable<string>;
-                        selectId: PropTypes.Requireable<string>;
-                        titleClassName: PropTypes.Requireable<string>;
+                        'aria-labelledby': PropTypes.Requireable<string>;
                     }> | PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
                         title: PropTypes.Validator<string>;
@@ -964,8 +961,7 @@ declare namespace BrandUpdate {
                                 modified: PropTypes.Requireable<boolean>;
                                 error: PropTypes.Requireable<boolean>;
                                 'aria-label': PropTypes.Requireable<string>;
-                                selectId: PropTypes.Requireable<string>;
-                                titleClassName: PropTypes.Requireable<string>;
+                                'aria-labelledby': PropTypes.Requireable<string>;
                             }> | PropTypes.InferProps<{
                                 type: PropTypes.Requireable<string>;
                                 title: PropTypes.Validator<string>;

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

@@ -58,8 +58,7 @@ declare namespace SearchPage {
                 modified: PropTypes.Requireable<boolean>;
                 error: PropTypes.Requireable<boolean>;
                 'aria-label': PropTypes.Requireable<string>;
-                selectId: PropTypes.Requireable<string>;
-                titleClassName: PropTypes.Requireable<string>;
+                'aria-labelledby': PropTypes.Requireable<string>;
             }>>;
             onSearch: PropTypes.Requireable<(...args: any[]) => any>;
             onToggleFilters: PropTypes.Requireable<(...args: any[]) => any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.4.5-alpha.41+8a79dc32c",
+  "version": "11.4.5-alpha.42+4584d9183",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -160,5 +160,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "8a79dc32cbdd9f9c77afc5e873e32b44e888069a"
+  "gitHead": "4584d91832ae87a793774213383a7d2bbdc1650d"
 }