@coorpacademy/components 11.11.11 → 11.11.12-alpha.11

package/lib/atom/range/handle.js

@@ -55,13 +55,11 @@ const Handle = (props, legacyContext) => {
   const {
     onPanStart = _noop2.default,
     onPanEnd = _noop2.default,
-    onPan = _noop2.default
+    onPan = _noop2.default,
+    HammerForTesting
   } = props;
   const handle = (0, _react.useRef)();
-  const [hammer, setHammer] = (0, _react.useState)();
-  (0, _react.useEffect)(() => {
-    setHammer(new Hammer(handle.current));
-  }, [handle]);
+  const hammer = (0, _react.useMemo)(() => HammerForTesting || new Hammer(handle.current), [handle, HammerForTesting]);
   (0, _react.useEffect)(() => {
     if (!hammer) return;
     hammer.on('panstart', onPanStart);
@@ -70,11 +68,11 @@ const Handle = (props, legacyContext) => {
     return () => {
       hammer.stop();
       hammer.destroy();
-      setHammer(null);
     };
   }, [hammer, onPanStart, onPanEnd, onPan]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _handle.default.wrapper
+    className: _handle.default.wrapper,
+    "data-testid": "handle-wrapper"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       backgroundColor,
@@ -89,7 +87,12 @@ const Handle = (props, legacyContext) => {
 Handle.propTypes = process.env.NODE_ENV !== "production" ? {
   onPan: _propTypes.default.func,
   onPanStart: _propTypes.default.func,
-  onPanEnd: _propTypes.default.func
+  onPanEnd: _propTypes.default.func,
+  HammerForTesting: _propTypes.default.shape({
+    on: _propTypes.default.func,
+    destroy: _propTypes.default.func,
+    stop: _propTypes.default.func
+  })
 } : {};
 Handle.contextTypes = {
   skin: _provider.default.childContextTypes.skin

package/lib/atom/range/handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"handle.js","names":["NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","GetSkinFromContext","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","handle","useRef","hammer","setHammer","useState","useEffect","current","style","wrapper","boxShadow","getShadowBoxColorFromPrimary","default","propTypes","PropTypes","func","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/range/handle.js"],"sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React, {useEffect, useRef, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nclass NoopHammer {\n  constructor() {}\n\n  // eslint-disable-next-line class-methods-use-this\n  on() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  stop() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  destroy() {\n    return;\n  }\n}\n\nconst Hammer = // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? /* istanbul ignore next */ require('hammerjs') : NoopHammer;\n\nconst Handle = (props, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n  const backgroundColor = primaryColor;\n  const {onPanStart = noop, onPanEnd = noop, onPan = noop} = props;\n\n  const handle = useRef();\n  const [hammer, setHammer] = useState();\n\n  useEffect(() => {\n    setHammer(new Hammer(handle.current));\n  }, [handle]);\n\n  useEffect(() => {\n    if (!hammer) return;\n    hammer.on('panstart', onPanStart);\n    hammer.on('panend', onPanEnd);\n\n    hammer.on('panleft panright', onPan);\n\n    return () => {\n      hammer.stop();\n      hammer.destroy();\n      setHammer(null);\n    };\n  }, [hammer, onPanStart, onPanEnd, onPan]);\n\n  return (\n    <div className={style.wrapper}>\n      <div\n        style={{\n          backgroundColor,\n          boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n        }}\n        className={style.default}\n        ref={handle}\n        data-name={'handle'}\n      />\n    </div>\n  );\n};\n\nHandle.propTypes = {\n  onPan: PropTypes.func,\n  onPanStart: PropTypes.func,\n  onPanEnd: PropTypes.func\n};\n\nHandle.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Handle;\n"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,UAAN,CAAiB;EACfC,WAAW,GAAG,CAAE,CADD,CAGf;;;EACAC,EAAE,GAAG;IACH;EACD,CANc,CAQf;;;EACAC,IAAI,GAAG;IACL;EACD,CAXc,CAaf;;;EACAC,OAAO,GAAG;IACR;EACD;;AAhBc;;AAmBjB,MAAMC,MAAM,GAAG;AACb,OAAOC,MAAP,KAAkB,WAAlB;AAAgC;AAA2BC,OAAO,CAAC,UAAD,CAAlE,GAAiFP,UADnF;;AAGA,MAAMQ,MAAM,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACvC,MAAMC,IAAI,GAAG,IAAAC,4BAAA,EAAmBF,aAAnB,CAAb;EACA,MAAMG,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAArB;EACA,MAAMG,eAAe,GAAGD,YAAxB;EACA,MAAM;IAACE,UAAU,iBAAX;IAAoBC,QAAQ,iBAA5B;IAAqCC,KAAK;EAA1C,IAAqDR,KAA3D;EAEA,MAAMS,MAAM,GAAG,IAAAC,aAAA,GAAf;EACA,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,GAA5B;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACdF,SAAS,CAAC,IAAIhB,MAAJ,CAAWa,MAAM,CAACM,OAAlB,CAAD,CAAT;EACD,CAFD,EAEG,CAACN,MAAD,CAFH;EAIA,IAAAK,gBAAA,EAAU,MAAM;IACd,IAAI,CAACH,MAAL,EAAa;IACbA,MAAM,CAAClB,EAAP,CAAU,UAAV,EAAsBa,UAAtB;IACAK,MAAM,CAAClB,EAAP,CAAU,QAAV,EAAoBc,QAApB;IAEAI,MAAM,CAAClB,EAAP,CAAU,kBAAV,EAA8Be,KAA9B;IAEA,OAAO,MAAM;MACXG,MAAM,CAACjB,IAAP;MACAiB,MAAM,CAAChB,OAAP;MACAiB,SAAS,CAAC,IAAD,CAAT;IACD,CAJD;EAKD,CAZD,EAYG,CAACD,MAAD,EAASL,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAZH;EAcA,oBACE;IAAK,SAAS,EAAEQ,eAAA,CAAMC;EAAtB,gBACE;IACE,KAAK,EAAE;MACLZ,eADK;MAELa,SAAS,EAAG,gBAAe,IAAAC,0DAAA,EAA6Bf,YAA7B,CAA2C;IAFjE,CADT;IAKE,SAAS,EAAEY,eAAA,CAAMI,OALnB;IAME,GAAG,EAAEX,MANP;IAOE,aAAW;EAPb,EADF,CADF;AAaD,CAxCD;;AA0CAV,MAAM,CAACsB,SAAP,2CAAmB;EACjBb,KAAK,EAAEc,kBAAA,CAAUC,IADA;EAEjBjB,UAAU,EAAEgB,kBAAA,CAAUC,IAFL;EAGjBhB,QAAQ,EAAEe,kBAAA,CAAUC;AAHH,CAAnB;AAMAxB,MAAM,CAACyB,YAAP,GAAsB;EACpBtB,IAAI,EAAEuB,iBAAA,CAASC,iBAAT,CAA2BxB;AADb,CAAtB;eAIeH,M"}
+{"version":3,"file":"handle.js","names":["NoopHammer","constructor","on","stop","destroy","Hammer","window","require","Handle","props","legacyContext","skin","GetSkinFromContext","primaryColor","backgroundColor","onPanStart","onPanEnd","onPan","HammerForTesting","handle","useRef","hammer","useMemo","current","useEffect","style","wrapper","boxShadow","getShadowBoxColorFromPrimary","default","propTypes","PropTypes","func","shape","contextTypes","Provider","childContextTypes"],"sources":["../../../src/atom/range/handle.js"],"sourcesContent":["import {noop, getOr} from 'lodash/fp';\nimport React, {useEffect, useMemo, useRef} from 'react';\nimport PropTypes from 'prop-types';\nimport Provider, {GetSkinFromContext} from '../provider';\nimport {getShadowBoxColorFromPrimary} from '../../util/get-shadow-box-color-from-primary';\nimport style from './handle.css';\n\nclass NoopHammer {\n  constructor() {}\n\n  // eslint-disable-next-line class-methods-use-this\n  on() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  stop() {\n    return;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  destroy() {\n    return;\n  }\n}\n\nconst Hammer = // eslint-disable-next-line no-undef\n  typeof window !== 'undefined' ? /* istanbul ignore next */ require('hammerjs') : NoopHammer;\n\nconst Handle = (props, legacyContext) => {\n  const skin = GetSkinFromContext(legacyContext);\n  const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n  const backgroundColor = primaryColor;\n  const {onPanStart = noop, onPanEnd = noop, onPan = noop, HammerForTesting} = props;\n\n  const handle = useRef();\n  const hammer = useMemo(\n    () => HammerForTesting || new Hammer(handle.current),\n    [handle, HammerForTesting]\n  );\n\n  useEffect(() => {\n    if (!hammer) return;\n    hammer.on('panstart', onPanStart);\n    hammer.on('panend', onPanEnd);\n\n    hammer.on('panleft panright', onPan);\n\n    return () => {\n      hammer.stop();\n      hammer.destroy();\n    };\n  }, [hammer, onPanStart, onPanEnd, onPan]);\n\n  return (\n    <div className={style.wrapper} data-testid=\"handle-wrapper\">\n      <div\n        style={{\n          backgroundColor,\n          boxShadow: `0px 0px 20px ${getShadowBoxColorFromPrimary(primaryColor)}`\n        }}\n        className={style.default}\n        ref={handle}\n        data-name={'handle'}\n      />\n    </div>\n  );\n};\n\nHandle.propTypes = {\n  onPan: PropTypes.func,\n  onPanStart: PropTypes.func,\n  onPanEnd: PropTypes.func,\n  HammerForTesting: PropTypes.shape({\n    on: PropTypes.func,\n    destroy: PropTypes.func,\n    stop: PropTypes.func\n  })\n};\n\nHandle.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nexport default Handle;\n"],"mappings":";;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,UAAN,CAAiB;EACfC,WAAW,GAAG,CAAE,CADD,CAGf;;;EACAC,EAAE,GAAG;IACH;EACD,CANc,CAQf;;;EACAC,IAAI,GAAG;IACL;EACD,CAXc,CAaf;;;EACAC,OAAO,GAAG;IACR;EACD;;AAhBc;;AAmBjB,MAAMC,MAAM,GAAG;AACb,OAAOC,MAAP,KAAkB,WAAlB;AAAgC;AAA2BC,OAAO,CAAC,UAAD,CAAlE,GAAiFP,UADnF;;AAGA,MAAMQ,MAAM,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACvC,MAAMC,IAAI,GAAG,IAAAC,4BAAA,EAAmBF,aAAnB,CAAb;EACA,MAAMG,YAAY,GAAG,qBAAM,SAAN,EAAiB,gBAAjB,EAAmCF,IAAnC,CAArB;EACA,MAAMG,eAAe,GAAGD,YAAxB;EACA,MAAM;IAACE,UAAU,iBAAX;IAAoBC,QAAQ,iBAA5B;IAAqCC,KAAK,iBAA1C;IAAmDC;EAAnD,IAAuET,KAA7E;EAEA,MAAMU,MAAM,GAAG,IAAAC,aAAA,GAAf;EACA,MAAMC,MAAM,GAAG,IAAAC,cAAA,EACb,MAAMJ,gBAAgB,IAAI,IAAIb,MAAJ,CAAWc,MAAM,CAACI,OAAlB,CADb,EAEb,CAACJ,MAAD,EAASD,gBAAT,CAFa,CAAf;EAKA,IAAAM,gBAAA,EAAU,MAAM;IACd,IAAI,CAACH,MAAL,EAAa;IACbA,MAAM,CAACnB,EAAP,CAAU,UAAV,EAAsBa,UAAtB;IACAM,MAAM,CAACnB,EAAP,CAAU,QAAV,EAAoBc,QAApB;IAEAK,MAAM,CAACnB,EAAP,CAAU,kBAAV,EAA8Be,KAA9B;IAEA,OAAO,MAAM;MACXI,MAAM,CAAClB,IAAP;MACAkB,MAAM,CAACjB,OAAP;IACD,CAHD;EAID,CAXD,EAWG,CAACiB,MAAD,EAASN,UAAT,EAAqBC,QAArB,EAA+BC,KAA/B,CAXH;EAaA,oBACE;IAAK,SAAS,EAAEQ,eAAA,CAAMC,OAAtB;IAA+B,eAAY;EAA3C,gBACE;IACE,KAAK,EAAE;MACLZ,eADK;MAELa,SAAS,EAAG,gBAAe,IAAAC,0DAAA,EAA6Bf,YAA7B,CAA2C;IAFjE,CADT;IAKE,SAAS,EAAEY,eAAA,CAAMI,OALnB;IAME,GAAG,EAAEV,MANP;IAOE,aAAW;EAPb,EADF,CADF;AAaD,CAtCD;;AAwCAX,MAAM,CAACsB,SAAP,2CAAmB;EACjBb,KAAK,EAAEc,kBAAA,CAAUC,IADA;EAEjBjB,UAAU,EAAEgB,kBAAA,CAAUC,IAFL;EAGjBhB,QAAQ,EAAEe,kBAAA,CAAUC,IAHH;EAIjBd,gBAAgB,EAAEa,kBAAA,CAAUE,KAAV,CAAgB;IAChC/B,EAAE,EAAE6B,kBAAA,CAAUC,IADkB;IAEhC5B,OAAO,EAAE2B,kBAAA,CAAUC,IAFa;IAGhC7B,IAAI,EAAE4B,kBAAA,CAAUC;EAHgB,CAAhB;AAJD,CAAnB;AAWAxB,MAAM,CAAC0B,YAAP,GAAsB;EACpBvB,IAAI,EAAEwB,iBAAA,CAASC,iBAAT,CAA2BzB;AADb,CAAtB;eAIeH,M"}

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

@@ -4,6 +4,16 @@ declare class Range extends React.Component<any, any, any> {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        HammerForTestingMax: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
         value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
     static getDerivedStateFromProps(props: any, state: any): {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA8DA;IACE;;;;;MAME;IAEF;;;aAMC;IAED,sCAcC;IAXC;;;;MAGC;IAkEH,0BAmBC;IA3ED,8BAEC;IAED,8BAKC;IAED,8BAKC;IAED,iCAKC;IAED,iCAKC;IA7BC,WAAkB;IA+BpB,8DAcC;IAED,iDAMC;IAuBD,sBAgCC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/range/index.js"],"names":[],"mappings":";AA4EA;IACE;;;;;;;;;;;;;;;MAQE;IAEF;;;aAMC;IAED,sCAcC;IAXC;;;;MAGC;IAkEH,0BAmBC;IA3ED,8BAEC;IAED,8BAKC;IAED,8BAKC;IAED,iCAKC;IAED,iCAKC;IA7BC,WAAkB;IA+BpB,8DAcC;IAED,iDAMC;IAuBD,sBAyCC;CACF"}

package/lib/atom/range/index.js

@@ -49,9 +49,13 @@ const RenderHandles = props => {
     onHandleMinChange,
     onHandleMinChangeEnd,
     onHandleMaxChange,
-    onHandleMaxChangeEnd
+    onHandleMaxChangeEnd,
+    HammerForTestingMin,
+    HammerForTestingMax
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", null, multi ? /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "handles"
+  }, multi ? /*#__PURE__*/_react.default.createElement("span", {
     className: pending ? _style.default.handle : _style.default.animatedHandle,
     style: {
       left: `${left * 100}%`
@@ -59,7 +63,8 @@ const RenderHandles = props => {
   }, /*#__PURE__*/_react.default.createElement(_handle.default, {
     axis: "x",
     onPan: onHandleMinChange,
-    onPanEnd: onHandleMinChangeEnd
+    onPanEnd: onHandleMinChangeEnd,
+    HammerForTesting: HammerForTestingMin
   })) : null, /*#__PURE__*/_react.default.createElement("span", {
     className: pending ? _style.default.handle : _style.default.animatedHandle,
     style: {
@@ -68,7 +73,8 @@ const RenderHandles = props => {
   }, /*#__PURE__*/_react.default.createElement(_handle.default, {
     axis: "x",
     onPan: onHandleMaxChange,
-    onPanEnd: onHandleMaxChangeEnd
+    onPanEnd: onHandleMaxChangeEnd,
+    HammerForTesting: HammerForTestingMax
   })));
 };
 
@@ -80,7 +86,9 @@ RenderHandles.propTypes = process.env.NODE_ENV !== "production" ? {
   onHandleMinChange: _propTypes.default.func,
   onHandleMinChangeEnd: _propTypes.default.func,
   onHandleMaxChange: _propTypes.default.func,
-  onHandleMaxChangeEnd: _propTypes.default.func
+  onHandleMaxChangeEnd: _propTypes.default.func,
+  HammerForTestingMin: _handle.default.propTypes.HammerForTesting,
+  HammerForTestingMax: _handle.default.propTypes.HammerForTesting
 } : {};
 
 class Range extends _react.default.Component {
@@ -194,12 +202,18 @@ class Range extends _react.default.Component {
       width: `${railWidth * 100}%`,
       left: `${railLeft * 100}%`
     };
+    const {
+      HammerForTestingMin,
+      HammerForTestingMax
+    } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "slider",
       className: _style.default.containerWrapper,
       onClick: this.handleClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _style.default.container
     }, /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "track",
       className: _style.default.track,
       "data-name": "sliderTrack",
       ref: this.setRefTrack
@@ -207,6 +221,8 @@ class Range extends _react.default.Component {
       className: pending ? _style.default.rail : _style.default.animatedRail,
       style: railStyle
     }), /*#__PURE__*/_react.default.createElement(RenderHandles, {
+      HammerForTestingMin: HammerForTestingMin,
+      HammerForTestingMax: HammerForTestingMax,
       left: left,
       right: right,
       pending: pending,
@@ -224,6 +240,8 @@ Range.propTypes = process.env.NODE_ENV !== "production" ? {
   onChange: _propTypes.default.func,
   onChangeEnd: _propTypes.default.func,
   multi: _propTypes.default.bool,
+  HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,
+  HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,
   // eslint-disable-next-line react/no-unused-prop-types
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.number)])
 } : {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","style","handle","animatedHandle","propTypes","PropTypes","number","bool","func","Range","React","Component","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","onChangeEnd","clientX","isClickToTheLeft","closestHandle","Math","abs","render","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","container","rail","animatedRail","oneOfType","arrayOf"],"sources":["../../../src/atom/range/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, set, clamp} from 'lodash/fp';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n  const {left, right} = track.getBoundingClientRect();\n  return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n  const {multi = false, value = multi ? [0, 1] : 0} = props;\n  return {\n    multi,\n    value: multi ? value : [0, value]\n  };\n};\n\nconst RenderHandles = props => {\n  const {\n    left,\n    right,\n    multi = false,\n    pending,\n    onHandleMinChange,\n    onHandleMinChangeEnd,\n    onHandleMaxChange,\n    onHandleMaxChangeEnd\n  } = props;\n\n  return (\n    <div>\n      {multi ? (\n        <span\n          className={pending ? style.handle : style.animatedHandle}\n          style={{left: `${left * 100}%`}}\n        >\n          <Handle axis=\"x\" onPan={onHandleMinChange} onPanEnd={onHandleMinChangeEnd} />\n        </span>\n      ) : null}\n      <span\n        className={pending ? style.handle : style.animatedHandle}\n        style={{left: `${right * 100}%`}}\n      >\n        <Handle axis=\"x\" onPan={onHandleMaxChange} onPanEnd={onHandleMaxChangeEnd} />\n      </span>\n    </div>\n  );\n};\n\nRenderHandles.propTypes = {\n  left: PropTypes.number,\n  right: PropTypes.number,\n  multi: PropTypes.bool,\n  pending: PropTypes.bool,\n  onHandleMinChange: PropTypes.func,\n  onHandleMinChangeEnd: PropTypes.func,\n  onHandleMaxChange: PropTypes.func,\n  onHandleMaxChangeEnd: PropTypes.func\n};\n\nclass Range extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    onChangeEnd: PropTypes.func,\n    multi: PropTypes.bool,\n    // eslint-disable-next-line react/no-unused-prop-types\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    const {pending} = state;\n\n    if (pending) return null;\n\n    return extractStateFromProps(props);\n  }\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.state = {\n      ...extractStateFromProps(props),\n      pending: false\n    };\n\n    this.handleClick = this.handleClick.bind(this);\n    this.setRefTrack = this.setRefTrack.bind(this);\n    this.handleMinChange = this.handleMinChange.bind(this);\n    this.handleMaxChange = this.handleMaxChange.bind(this);\n    this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n    this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n  }\n\n  setRefTrack(track) {\n    this.track = track;\n  }\n\n  handleMinChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, true);\n  }\n\n  handleMaxChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, true);\n  }\n\n  handleMinChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, false);\n  }\n\n  handleMaxChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, false);\n  }\n\n  handleChange(value, valueIndex, pending) {\n    const {value: prevValue} = this.state;\n\n    const newValue = set(valueIndex, value, prevValue);\n\n    const [minValue, maxValue] = newValue;\n\n    const nextValue = minValue > maxValue ? prevValue : newValue;\n\n    this.triggerChange(nextValue, pending);\n    return this.setState({\n      pending,\n      value: pending ? nextValue : extractStateFromProps(this.props).value\n    });\n  }\n\n  triggerChange(newValues, pending) {\n    const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n\n    const handle = pending ? onChange : onChangeEnd;\n\n    return handle(multi ? newValues : newValues[1]);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {\n      value: [left, right],\n      multi\n    } = this.state;\n    const x = e.clientX;\n    const newValue = valueOnTrack(this.track, x);\n\n    if (!multi) return this.handleChange(newValue, 1, false);\n\n    if (left === right) {\n      const isClickToTheLeft = left - newValue > 0;\n      return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n    }\n\n    const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n    return this.handleChange(newValue, closestHandle, false);\n  }\n\n  render() {\n    const {\n      multi = false,\n      value: [left, right],\n      pending\n    } = this.state;\n    const railWidth = right - left;\n    const railLeft = left;\n    const railStyle = {\n      backgroundColor: '#9999A8',\n      width: `${railWidth * 100}%`,\n      left: `${railLeft * 100}%`\n    };\n\n    return (\n      <div className={style.containerWrapper} onClick={this.handleClick}>\n        <div className={style.container}>\n          <div className={style.track} data-name=\"sliderTrack\" ref={this.setRefTrack} />\n          <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n          <RenderHandles\n            left={left}\n            right={right}\n            pending={pending}\n            multi={multi}\n            onHandleMinChange={this.handleMinChange}\n            onHandleMinChangeEnd={this.handleMinChangeEnd}\n            onHandleMaxChange={this.handleMaxChange}\n            onHandleMaxChangeEnd={this.handleMaxChangeEnd}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Range;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["valueOnTrack","track","x","left","right","getBoundingClientRect","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","HammerForTestingMin","HammerForTestingMax","style","handle","animatedHandle","propTypes","PropTypes","number","bool","func","Handle","HammerForTesting","Range","React","Component","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","onChangeEnd","clientX","isClickToTheLeft","closestHandle","Math","abs","render","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","container","rail","animatedRail","oneOfType","arrayOf"],"sources":["../../../src/atom/range/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, set, clamp} from 'lodash/fp';\nimport Handle from './handle';\nimport style from './style.css';\n\nconst valueOnTrack = (track, x) => {\n  const {left, right} = track.getBoundingClientRect();\n  return clamp(0, 1, (x - left) / (right - left));\n};\n\nconst extractStateFromProps = props => {\n  const {multi = false, value = multi ? [0, 1] : 0} = props;\n  return {\n    multi,\n    value: multi ? value : [0, value]\n  };\n};\n\nconst RenderHandles = props => {\n  const {\n    left,\n    right,\n    multi = false,\n    pending,\n    onHandleMinChange,\n    onHandleMinChangeEnd,\n    onHandleMaxChange,\n    onHandleMaxChangeEnd,\n    HammerForTestingMin,\n    HammerForTestingMax\n  } = props;\n\n  return (\n    <div data-testid=\"handles\">\n      {multi ? (\n        <span\n          className={pending ? style.handle : style.animatedHandle}\n          style={{left: `${left * 100}%`}}\n        >\n          <Handle\n            axis=\"x\"\n            onPan={onHandleMinChange}\n            onPanEnd={onHandleMinChangeEnd}\n            HammerForTesting={HammerForTestingMin}\n          />\n        </span>\n      ) : null}\n      <span\n        className={pending ? style.handle : style.animatedHandle}\n        style={{left: `${right * 100}%`}}\n      >\n        <Handle\n          axis=\"x\"\n          onPan={onHandleMaxChange}\n          onPanEnd={onHandleMaxChangeEnd}\n          HammerForTesting={HammerForTestingMax}\n        />\n      </span>\n    </div>\n  );\n};\n\nRenderHandles.propTypes = {\n  left: PropTypes.number,\n  right: PropTypes.number,\n  multi: PropTypes.bool,\n  pending: PropTypes.bool,\n  onHandleMinChange: PropTypes.func,\n  onHandleMinChangeEnd: PropTypes.func,\n  onHandleMaxChange: PropTypes.func,\n  onHandleMaxChangeEnd: PropTypes.func,\n  HammerForTestingMin: Handle.propTypes.HammerForTesting,\n  HammerForTestingMax: Handle.propTypes.HammerForTesting\n};\n\nclass Range extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    onChangeEnd: PropTypes.func,\n    multi: PropTypes.bool,\n    HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,\n    HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax,\n    // eslint-disable-next-line react/no-unused-prop-types\n    value: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    const {pending} = state;\n\n    if (pending) return null;\n\n    return extractStateFromProps(props);\n  }\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.state = {\n      ...extractStateFromProps(props),\n      pending: false\n    };\n\n    this.handleClick = this.handleClick.bind(this);\n    this.setRefTrack = this.setRefTrack.bind(this);\n    this.handleMinChange = this.handleMinChange.bind(this);\n    this.handleMaxChange = this.handleMaxChange.bind(this);\n    this.handleMinChangeEnd = this.handleMinChangeEnd.bind(this);\n    this.handleMaxChangeEnd = this.handleMaxChangeEnd.bind(this);\n  }\n\n  setRefTrack(track) {\n    this.track = track;\n  }\n\n  handleMinChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, true);\n  }\n\n  handleMaxChange(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, true);\n  }\n\n  handleMinChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 0, false);\n  }\n\n  handleMaxChangeEnd(e) {\n    e.srcEvent.stopPropagation();\n    e.srcEvent.preventDefault();\n    const newValue = valueOnTrack(this.track, e.center.x);\n    return this.handleChange(newValue, 1, false);\n  }\n\n  handleChange(value, valueIndex, pending) {\n    const {value: prevValue} = this.state;\n\n    const newValue = set(valueIndex, value, prevValue);\n\n    const [minValue, maxValue] = newValue;\n\n    const nextValue = minValue > maxValue ? prevValue : newValue;\n\n    this.triggerChange(nextValue, pending);\n    return this.setState({\n      pending,\n      value: pending ? nextValue : extractStateFromProps(this.props).value\n    });\n  }\n\n  triggerChange(newValues, pending) {\n    const {onChange = noop, onChangeEnd = onChange, multi = false} = this.props;\n\n    const handle = pending ? onChange : onChangeEnd;\n\n    return handle(multi ? newValues : newValues[1]);\n  }\n\n  handleClick(e) {\n    e.stopPropagation();\n    e.preventDefault();\n    const {\n      value: [left, right],\n      multi\n    } = this.state;\n    const x = e.clientX;\n    const newValue = valueOnTrack(this.track, x);\n\n    if (!multi) return this.handleChange(newValue, 1, false);\n\n    if (left === right) {\n      const isClickToTheLeft = left - newValue > 0;\n      return this.handleChange(newValue, isClickToTheLeft ? 0 : 1, false);\n    }\n\n    const closestHandle = Math.abs(newValue - left) < Math.abs(newValue - right) ? 0 : 1;\n    return this.handleChange(newValue, closestHandle, false);\n  }\n\n  render() {\n    const {\n      multi = false,\n      value: [left, right],\n      pending\n    } = this.state;\n    const railWidth = right - left;\n    const railLeft = left;\n    const railStyle = {\n      backgroundColor: '#9999A8',\n      width: `${railWidth * 100}%`,\n      left: `${railLeft * 100}%`\n    };\n\n    const {HammerForTestingMin, HammerForTestingMax} = this.props;\n\n    return (\n      <div data-testid=\"slider\" className={style.containerWrapper} onClick={this.handleClick}>\n        <div className={style.container}>\n          <div\n            data-testid=\"track\"\n            className={style.track}\n            data-name=\"sliderTrack\"\n            ref={this.setRefTrack}\n          />\n          <div className={pending ? style.rail : style.animatedRail} style={railStyle} />\n          <RenderHandles\n            HammerForTestingMin={HammerForTestingMin}\n            HammerForTestingMax={HammerForTestingMax}\n            left={left}\n            right={right}\n            pending={pending}\n            multi={multi}\n            onHandleMinChange={this.handleMinChange}\n            onHandleMinChangeEnd={this.handleMinChangeEnd}\n            onHandleMaxChange={this.handleMaxChange}\n            onHandleMaxChangeEnd={this.handleMaxChangeEnd}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nexport default Range;\n"],"mappings":"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"}

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

package/lib/atom/select/index.js

@@ -29,8 +29,12 @@ var _keys = _interopRequireDefault(require("lodash/fp/keys"));
 
 var _map = _interopRequireDefault(require("lodash/fp/map"));
 
+var _round = _interopRequireDefault(require("lodash/fp/round"));
+
 var _size = _interopRequireDefault(require("lodash/fp/size"));
 
+var _truncate = _interopRequireDefault(require("lodash/fp/truncate"));
+
 var _novaIcons = require("@coorpacademy/nova-icons");
 
 var _provider = _interopRequireWildcard(require("../provider"));
@@ -101,6 +105,7 @@ const Select = (props, legacyContext) => {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy
   } = props;
+  const [selectWidth, setSelectWidth] = (0, _react.useState)(0);
   const skin = (0, _provider.GetSkinFromContext)(legacyContext);
   const title = (0, _react.useMemo)(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
   const [isArrowUp, setIsArrowUp] = (0, _react.useState)(false);
@@ -121,9 +126,29 @@ const Select = (props, legacyContext) => {
       label: optgroup.label
     }, optgroup.options && optgroup.options.map((option, i) => selectOption(option, i)));
   });
+  const titleSize = (0, _react.useMemo)(() => (0, _size.default)(title), [title]);
+  const titleRef = (0, _react.useRef)(null);
+  const textLength = (0, _round.default)(selectWidth / 7);
+  (0, _react.useEffect)(() => {
+    // when the component gets mounted
+    setSelectWidth(titleRef.current.offsetWidth); // to handle page resize
+
+    /* istanbul ignore next */
+
+    const getwidth = () => {
+      setSelectWidth(titleRef.current.offsetWidth);
+    };
+
+    window.addEventListener('resize', getwidth); // remove the event listener before the component gets unmounted
+
+    return () => window.removeEventListener('resize', getwidth);
+  }, []);
+  const titleLabel = (0, _react.useMemo)(() => titleSize <= textLength ? title : (0, _truncate.default)({
+    length: textLength
+  }, title), [textLength, title, titleSize]);
   const titleView = title ? /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.title
-  }, title, " ") : null;
+  }, titleLabel) : 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)({
@@ -154,10 +179,15 @@ const Select = (props, legacyContext) => {
   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]);
+  const selectedOptionLabel = (0, _react.useMemo)(() => labelSize <= textLength ? selectedLabel : (0, _truncate.default)({
+    length: textLength
+  }, selectedLabel), [labelSize, selectedLabel, textLength]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(composedClassName, theme === 'coorpmanager' ? _style.default.coorpmanager : null)
   }, /*#__PURE__*/_react.default.createElement("label", {
+    ref: titleRef,
     "data-name": "select-wrapper",
+    title: title,
     style: _extends({}, shouldUseSkinFontColor && {
       color
     }),
@@ -168,7 +198,7 @@ const Select = (props, legacyContext) => {
     style: _extends({}, shouldUseSkinFontColor && {
       color
     })
-  }, selectedLabel), /*#__PURE__*/_react.default.createElement(ArrowView, {
+  }, selectedOptionLabel), /*#__PURE__*/_react.default.createElement(ArrowView, {
     shouldRender: !multiple,
     isArrowUp: isArrowUp,
     ariaLabel: ariaLabel,

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","ArrowView","shouldRender","isArrowUp","ariaLabel","arrowClass","arrowColor","props","useMemo","color","className","Select","legacyContext","name","options","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","skin","GetSkinFromContext","setIsArrowUp","useState","handleSelectOnFocus","useCallback","handleSelectOnBlur","selectOption","option","index","value","optionList","isEmpty","map","optgroup","label","i","titleView","selected","get","find","concat","flatMapDeep","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","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","keys"],"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      ...(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    '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 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('name', 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          {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n          {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\n          {...(ariaLabel ? {title: ariaLabel} : {})}\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          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  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":"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"}
+{"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","optgroups","borderClassName","onChange","multiple","disabled","required","description","theme","modified","error","title","propTitle","ariaLabelledBy","selectWidth","setSelectWidth","useState","skin","GetSkinFromContext","setIsArrowUp","handleSelectOnFocus","useCallback","handleSelectOnBlur","selectOption","option","index","value","optionList","isEmpty","map","optgroup","label","i","titleSize","size","titleRef","useRef","textLength","round","useEffect","current","offsetWidth","getwidth","window","addEventListener","removeEventListener","titleLabel","truncate","length","titleView","selected","get","find","concat","flatMapDeep","selectedLabel","isSelectedInValidOption","getOr","validOption","handleChange","e","target","selectedOptions","black","isThemeOneOfQuestionTemplateOrPlayer","includes","shouldUseSkinFontColor","undefined","behaviorClassName","getClassState","default","composedClassName","classnames","unselected","labelSize","isLongLabel","selectedOptionLabel","selectWrapper","selectSpan","noLabelCommon","longLabel","selectedArrow","arrow","selectBox","SelectOptionPropTypes","PropTypes","string","isRequired","oneOfType","number","bool","SelectOptionGroupPropTypes","arrayOf","shape","contextTypes","Provider","childContextTypes","propTypes","func","oneOf","keys"],"sources":["../../../src/atom/select/index.js"],"sourcesContent":["import React, {useCallback, useEffect, useMemo, useState, useRef} 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 round from 'lodash/fp/round';\nimport size from 'lodash/fp/size';\nimport truncate from 'lodash/fp/truncate';\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      ...(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    'aria-labelledby': ariaLabelledBy\n  } = props;\n  const [selectWidth, setSelectWidth] = useState(0);\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 titleSize = useMemo(() => size(title), [title]);\n  const titleRef = useRef(null);\n  const textLength = round(selectWidth / 7);\n\n  useEffect(() => {\n    // when the component gets mounted\n    setSelectWidth(titleRef.current.offsetWidth);\n    // to handle page resize\n    /* istanbul ignore next */\n    const getwidth = () => {\n      setSelectWidth(titleRef.current.offsetWidth);\n    };\n    window.addEventListener('resize', getwidth);\n    // remove the event listener before the component gets unmounted\n    return () => window.removeEventListener('resize', getwidth);\n  }, []);\n\n  const titleLabel = useMemo(\n    () => (titleSize <= textLength ? title : truncate({length: textLength}, title)),\n    [textLength, title, titleSize]\n  );\n\n  const titleView = title ? <span className={style.title}>{titleLabel}</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('name', 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  const selectedOptionLabel = useMemo(\n    () => (labelSize <= textLength ? selectedLabel : truncate({length: textLength}, selectedLabel)),\n    [labelSize, selectedLabel, textLength]\n  );\n\n  return (\n    <div\n      className={classnames(\n        composedClassName,\n        theme === 'coorpmanager' ? style.coorpmanager : null\n      )}\n    >\n      <label\n        ref={titleRef}\n        data-name=\"select-wrapper\"\n        title={title}\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          {selectedOptionLabel}\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          {...(ariaLabel && !ariaLabelledBy ? {'aria-label': ariaLabel} : {})}\n          {...(ariaLabel ? {title: ariaLabel} : {})}\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          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  'aria-labelledby': PropTypes.string\n};\n\nexport default Select;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAIA;;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,SAAS,GAAG,CAAC;EAACC,YAAD;EAAeC,SAAf;EAA0BC,SAA1B;EAAqCC,UAArC;EAAiDC;AAAjD,CAAD,KAAkE;EAClF,MAAMC,KAAK,GAAG,IAAAC,cAAA,EACZ,mBACMF,UAAU,GACZ;IACEG,KAAK,EAAEH;EADT,CAFJ;IAKEI,SAAS,EAAEL;EALb,EADY,EAQZ,CAACD,SAAD,EAAYC,UAAZ,EAAwBC,UAAxB,CARY,CAAd;;EAUA,IAAIJ,YAAJ,EAAkB;IAChB,OAAOC,SAAS,gBACd,6BAAC,4CAAD,eAAaI,KAAb;MAAoB,eAAY;IAAhC,GADc,gBAGd,6BAAC,6CAAD,eAAeA,KAAf;MAAsB,eAAY;IAAlC,GAHF;EAKD,CAND,MAMO,OAAO,IAAP;AACR,CAlBD;;AAoBA,MAAMI,MAAM,GAAG,CAACJ,KAAD,EAAQK,aAAR,KAA0B;EACvC,MAAM;IACJC,IADI;IAEJC,OAAO,GAAG,EAFN;IAGJC,SAAS,GAAG,EAHR;IAIJL,SAJI;IAKJM,eALI;IAMJC,QANI;IAOJC,QAAQ,GAAG,KAPP;IAQJC,QARI;IASJC,QATI;IAUJC,WAVI;IAWJC,KAXI;IAYJC,QAAQ,GAAG,KAZP;IAaJC,KAAK,GAAG,KAbJ;IAcJC,KAAK,EAAEC,SAdH;IAeJ,cAActB,SAfV;IAgBJ,mBAAmBuB;EAhBf,IAiBFpB,KAjBJ;EAkBA,MAAM,CAACqB,WAAD,EAAcC,cAAd,IAAgC,IAAAC,eAAA,EAAS,CAAT,CAAtC;EAEA,MAAMC,IAAI,GAAG,IAAAC,4BAAA,EAAmBpB,aAAnB,CAAb;EACA,MAAMa,KAAK,GAAG,IAAAjB,cAAA,EACZ,MAAOkB,SAAS,GAAI,GAAEA,SAAU,GAAEN,QAAQ,GAAG,GAAH,GAAS,EAAG,EAAtC,GAA0C,IAD9C,EAEZ,CAACM,SAAD,EAAYN,QAAZ,CAFY,CAAd;EAKA,MAAM,CAACjB,SAAD,EAAY8B,YAAZ,IAA4B,IAAAH,eAAA,EAAS,KAAT,CAAlC;EAEA,MAAMI,mBAAmB,GAAG,IAAAC,kBAAA,EAAY,MAAMF,YAAY,CAAC,IAAD,CAA9B,EAAsC,EAAtC,CAA5B;EACA,MAAMG,kBAAkB,GAAG,IAAAD,kBAAA,EAAY,MAAMF,YAAY,CAAC,KAAD,CAA9B,EAAuC,EAAvC,CAA3B;;EAEA,MAAMI,YAAY,GAAG,CAACC,MAAD,EAASC,KAAT,KAAmB;IACtC,oBACE;MAAQ,GAAG,EAAEA,KAAb;MAAoB,KAAK,EAAED,MAAM,CAACE,KAAlC;MAAyC,SAAS,EAAEjD,cAAA,CAAM8C;IAA1D,GACGC,MAAM,CAACzB,IADV,CADF;EAKD,CAND;;EAQA,MAAM4B,UAAU,GAAG,CAAC,IAAAC,gBAAA,EAAQ5B,OAAR,CAAD,GACfA,OAAO,CAAC6B,GAAR,CAAY,CAACL,MAAD,EAASC,KAAT,KAAmBF,YAAY,CAACC,MAAD,EAASC,KAAT,CAA3C,CADe,GAEfxB,SAAS,CAAC4B,GAAV,CAAc,CAACC,QAAD,EAAWL,KAAX,KAAqB;IACjC,oBACE;MAAU,GAAG,EAAEA,KAAf;MAAsB,KAAK,EAAEK,QAAQ,CAACC;IAAtC,GACGD,QAAQ,CAAC9B,OAAT,IAAoB8B,QAAQ,CAAC9B,OAAT,CAAiB6B,GAAjB,CAAqB,CAACL,MAAD,EAASQ,CAAT,KAAeT,YAAY,CAACC,MAAD,EAASQ,CAAT,CAAhD,CADvB,CADF;EAKD,CAND,CAFJ;EAUA,MAAMC,SAAS,GAAG,IAAAvC,cAAA,EAAQ,MAAM,IAAAwC,aAAA,EAAKvB,KAAL,CAAd,EAA2B,CAACA,KAAD,CAA3B,CAAlB;EACA,MAAMwB,QAAQ,GAAG,IAAAC,aAAA,EAAO,IAAP,CAAjB;EACA,MAAMC,UAAU,GAAG,IAAAC,cAAA,EAAMxB,WAAW,GAAG,CAApB,CAAnB;EAEA,IAAAyB,gBAAA,EAAU,MAAM;IACd;IACAxB,cAAc,CAACoB,QAAQ,CAACK,OAAT,CAAiBC,WAAlB,CAAd,CAFc,CAGd;;IACA;;IACA,MAAMC,QAAQ,GAAG,MAAM;MACrB3B,cAAc,CAACoB,QAAQ,CAACK,OAAT,CAAiBC,WAAlB,CAAd;IACD,CAFD;;IAGAE,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCF,QAAlC,EARc,CASd;;IACA,OAAO,MAAMC,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCH,QAArC,CAAb;EACD,CAXD,EAWG,EAXH;EAaA,MAAMI,UAAU,GAAG,IAAApD,cAAA,EACjB,MAAOuC,SAAS,IAAII,UAAb,GAA0B1B,KAA1B,GAAkC,IAAAoC,iBAAA,EAAS;IAACC,MAAM,EAAEX;EAAT,CAAT,EAA+B1B,KAA/B,CADxB,EAEjB,CAAC0B,UAAD,EAAa1B,KAAb,EAAoBsB,SAApB,CAFiB,CAAnB;EAKA,MAAMgB,SAAS,GAAGtC,KAAK,gBAAG;IAAM,SAAS,EAAElC,cAAA,CAAMkC;EAAvB,GAA+BmC,UAA/B,CAAH,GAAuD,IAA9E;EAEA,MAAMI,QAAQ,GAAG,IAAAxD,cAAA,EACf,MACEU,QAAQ,GACJ,IAAAyB,YAAA,EAAI,IAAAsB,YAAA,EAAI,OAAJ,CAAJ,EAAkB,IAAA3E,eAAA,EAAO;IAAC0E,QAAQ,EAAE;EAAX,CAAP,EAAyBlD,OAAzB,CAAlB,CADI,GAEJ,IAAAmD,YAAA,EAAI,OAAJ,EAAa,IAAAC,aAAA,EAAK;IAACF,QAAQ,EAAE;EAAX,CAAL,EAAuB,IAAAG,eAAA,EAAOrD,OAAP,EAAgB,IAAAsD,oBAAA,EAAY,SAAZ,EAAuBrD,SAAvB,CAAhB,CAAvB,CAAb,CAJS,EAKf,CAACG,QAAD,EAAWJ,OAAX,EAAoBC,SAApB,CALe,CAAjB;EAOA,MAAMsD,aAAa,GAAG,IAAA7D,cAAA,EACpB,MACEU,QAAQ,GACJ,IAAAyB,YAAA,EAAI,IAAAsB,YAAA,EAAI,MAAJ,CAAJ,EAAiB,IAAA3E,eAAA,EAAO;IAAC0E,QAAQ,EAAE;EAAX,CAAP,EAAyBlD,OAAzB,CAAjB,CADI,GAEJ,IAAAmD,YAAA,EAAI,MAAJ,EAAY,IAAAC,aAAA,EAAK;IAACF,QAAQ,EAAE;EAAX,CAAL,EAAuB,IAAAG,eAAA,EAAOrD,OAAP,EAAgB,IAAAsD,oBAAA,EAAY,SAAZ,EAAuBrD,SAAvB,CAAhB,CAAvB,CAAZ,CAJc,EAKpB,CAACG,QAAD,EAAWJ,OAAX,EAAoBC,SAApB,CALoB,CAAtB;EAQA,MAAMuD,uBAAuB,GAAG,IAAA9D,cAAA,EAC9B,MACEc,KAAK,KAAK,QAAV,IACA,IAAAiD,cAAA,EAAM,KAAN,EAAa,MAAb,EAAqB,IAAAL,aAAA,EAAK;IAACM,WAAW,EAAE,KAAd;IAAqBR,QAAQ,EAAE;EAA/B,CAAL,EAA2ClD,OAA3C,CAArB,CAH4B,EAI9B,CAACA,OAAD,EAAUQ,KAAV,CAJ8B,CAAhC;EAOA,MAAMmD,YAAY,GAAG,IAAAjE,cAAA,EACnB,MACEU,QAAQ,GACJwD,CAAC,IAAI;IACHzC,YAAY,CAAC,KAAD,CAAZ;IACAhB,QAAQ,CAAC,IAAA0B,YAAA,EAAI,IAAAsB,YAAA,EAAI,OAAJ,CAAJ,EAAkBS,CAAC,CAACC,MAAF,CAASC,eAA3B,CAAD,CAAR;EACD,CAJG,GAKJF,CAAC,IAAI;IACHzC,YAAY,CAAC,KAAD,CAAZ;IACAhB,QAAQ,CAACyD,CAAC,CAACC,MAAF,CAASnC,KAAV,CAAR;EACD,CAVY,EAWnB,CAACvB,QAAD,EAAWC,QAAX,CAXmB,CAArB;EAcA,MAAM2D,KAAK,GAAG,IAAArE,cAAA,EAAQ,MAAM,IAAA+D,cAAA,EAAM,SAAN,EAAiB,cAAjB,EAAiCxC,IAAjC,CAAd,EAAsD,CAACA,IAAD,CAAtD,CAAd;EACA,MAAMtB,KAAK,GAAG,IAAAD,cAAA,EAAQ,MAAM,IAAA+D,cAAA,EAAM,SAAN,EAAiB,gBAAjB,EAAmCxC,IAAnC,CAAd,EAAwD,CAACA,IAAD,CAAxD,CAAd;EACA,MAAM+C,oCAAoC,GAAG,IAAAtE,cAAA,EAC3C,MAAM,IAAAuE,iBAAA,EAASzD,KAAT,EAAgB,CAAC,UAAD,EAAa,UAAb,EAAyB,QAAzB,CAAhB,CADqC,EAE3C,CAACA,KAAD,CAF2C,CAA7C;EAIA,MAAM0D,sBAAsB,GAAG,IAAAxE,cAAA,EAC7B,MAAM,CAAC8D,uBAAD,IAA4BN,QAA5B,IAAwCc,oCADjB,EAE7B,CAACR,uBAAD,EAA0BN,QAA1B,EAAoCc,oCAApC,CAF6B,CAA/B;EAIA,MAAMxE,UAAU,GAAG0D,QAAQ,GAAGvD,KAAH,GAAWwE,SAAtC;EAEA,MAAMC,iBAAiB,GAAG,IAAA1E,cAAA,EACxB,MAAM,IAAA2E,sBAAA,EAAc5F,cAAA,CAAM6F,OAApB,EAA6B7F,cAAA,CAAMgC,QAAnC,EAA6ChC,cAAA,CAAMiC,KAAnD,EAA0DD,QAA1D,EAAoEC,KAApE,CADkB,EAExB,CAACA,KAAD,EAAQD,QAAR,CAFwB,CAA1B;EAIA,MAAM8D,iBAAiB,GAAG,IAAA7E,cAAA,EACxB,MACE,IAAA8E,mBAAA,EACEhE,KAAK,IAAIA,KAAK,KAAK,cAAnB,GAAoCjC,UAAU,CAACiC,KAAD,CAA9C,GAAwD4D,iBAD1D,EAEElB,QAAQ,GAAGzE,cAAA,CAAMyE,QAAT,GAAoBzE,cAAA,CAAMgG,UAFpC,EAGE7E,SAHF,CAFsB,EAOxB,CAACwE,iBAAD,EAAoBxE,SAApB,EAA+BsD,QAA/B,EAAyC1C,KAAzC,CAPwB,CAA1B;EAUA,MAAMkE,SAAS,GAAG,IAAAhF,cAAA,EAAQ,MAAM,IAAAwC,aAAA,EAAKqB,aAAL,CAAd,EAAmC,CAACA,aAAD,CAAnC,CAAlB;EAEA,MAAMoB,WAAW,GAAG,IAAAjF,cAAA,EAAQ,MAAMgF,SAAS,IAAI,EAA3B,EAA+B,CAACA,SAAD,CAA/B,CAApB;EAEA,MAAME,mBAAmB,GAAG,IAAAlF,cAAA,EAC1B,MAAOgF,SAAS,IAAIrC,UAAb,GAA0BkB,aAA1B,GAA0C,IAAAR,iBAAA,EAAS;IAACC,MAAM,EAAEX;EAAT,CAAT,EAA+BkB,aAA/B,CADvB,EAE1B,CAACmB,SAAD,EAAYnB,aAAZ,EAA2BlB,UAA3B,CAF0B,CAA5B;EAKA,oBACE;IACE,SAAS,EAAE,IAAAmC,mBAAA,EACTD,iBADS,EAET/D,KAAK,KAAK,cAAV,GAA2B/B,cAAA,CAAMS,YAAjC,GAAgD,IAFvC;EADb,gBAME;IACE,GAAG,EAAEiD,QADP;IAEE,aAAU,gBAFZ;IAGE,KAAK,EAAExB,KAHT;IAIE,KAAK,eACCuD,sBAAsB,IAAI;MAC5BvE;IAD4B,CAD3B,CAJP;IASE,SAAS,EAAElB,cAAA,CAAMoG;EATnB,GAWG5B,SAXH,eAYE;IACE,aAAU,aADZ;IAEE,SAAS,EAAE,IAAAuB,mBAAA,EACT/F,cAAA,CAAMqG,UADG,EAET,IAAAb,iBAAA,EAASzD,KAAT,EAAgB,CAAC,QAAD,EAAW,SAAX,EAAsB,UAAtB,EAAkC,aAAlC,EAAiD,UAAjD,CAAhB,IACI/B,cAAA,CAAMsG,aADV,GAEI,IAJK,EAKT7E,eALS,EAMTyE,WAAW,GAAGlG,cAAA,CAAMuG,SAAT,GAAqB,IANvB,CAFb;IAUE,KAAK,eACCd,sBAAsB,IAAI;MAC5BvE;IAD4B,CAD3B;EAVP,GAgBGiF,mBAhBH,CAZF,eA8BE,6BAAC,SAAD;IACE,YAAY,EAAE,CAACxE,QADjB;IAEE,SAAS,EAAEf,SAFb;IAGE,SAAS,EAAEC,SAHb;IAIE,UAAU,EAAE4E,sBAAsB,GAAGzF,cAAA,CAAMwG,aAAT,GAAyBxG,cAAA,CAAMyG,KAJnE;IAKE,UAAU,EAAElB,oCAAoC,GAAGxE,UAAH,GAAgBuE;EALlE,EA9BF,eAqCE,oDACOlD,cAAc,GAAG;IAAC,mBAAmBA;EAApB,CAAH,GAAyC,EAD9D,EAEOvB,SAAS,IAAI,CAACuB,cAAd,GAA+B;IAAC,cAAcvB;EAAf,CAA/B,GAA2D,EAFlE,EAGOA,SAAS,GAAG;IAACqB,KAAK,EAAErB;EAAR,CAAH,GAAwB,EAHxC;IAIE,aAAU,eAJZ;IAKE,SAAS,EAAEb,cAAA,CAAM0G,SALnB;IAME,IAAI,EAAEpF,IANR;IAOE,QAAQ,EAAE4D,YAPZ;IAQE,KAAK,EAAET,QART;IASE,QAAQ,EAAE9C,QATZ;IAUE,QAAQ,EAAEC,QAVZ;IAWE,OAAO,EAAEe,mBAXX;IAYE,MAAM,EAAEE,kBAZV,CAaE;IACA;IACA;IAfF;IAgBE,YAAY,EAAEA,kBAhBhB;IAiBE,eAAY;EAjBd,IAmBGK,UAnBH,CArCF,CANF,eAiEE;IAAK,SAAS,EAAElD,cAAA,CAAM8B;EAAtB,GAAoCA,WAApC,CAjEF,CADF;AAqED,CAtND;;AAwNO,MAAM6E,qBAAqB,GAAG;EACnCrF,IAAI,EAAEsF,kBAAA,CAAUC,MAAV,CAAiBC,UADY;EAEnC7D,KAAK,EAAE2D,kBAAA,CAAUG,SAAV,CAAoB,CAACH,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUI,MAA7B,CAApB,CAF4B;EAGnCvC,QAAQ,EAAEmC,kBAAA,CAAUK,IAHe;EAInChC,WAAW,EAAE2B,kBAAA,CAAUK;AAJY,CAA9B;;AAOA,MAAMC,0BAA0B,GAAG;EACxC5D,KAAK,EAAEsD,kBAAA,CAAUC,MAAV,CAAiBC,UADgB;EAExCvF,OAAO,EAAEqF,kBAAA,CAAUO,OAAV,CAAkBP,kBAAA,CAAUQ,KAAV,CAAgBT,qBAAhB,CAAlB;AAF+B,CAAnC;;AAKPvF,MAAM,CAACiG,YAAP,GAAsB;EACpB7E,IAAI,EAAE8E,iBAAA,CAASC,iBAAT,CAA2B/E;AADb,CAAtB;AAIApB,MAAM,CAACoG,SAAP,2CAAmB;EACjBtF,KAAK,EAAE0E,kBAAA,CAAUC,MADA;EAEjBvF,IAAI,EAAEsF,kBAAA,CAAUC,MAFC;EAGjB1F,SAAS,EAAEyF,kBAAA,CAAUC,MAHJ;EAIjBpF,eAAe,EAAEmF,kBAAA,CAAUC,MAJV;EAKjBjF,QAAQ,EAAEgF,kBAAA,CAAUK,IALH;EAMjBtF,QAAQ,EAAEiF,kBAAA,CAAUK,IANH;EAOjBnF,WAAW,EAAE8E,kBAAA,CAAUC,MAPN;EAQjBhF,QAAQ,EAAE+E,kBAAA,CAAUK,IARH;EASjBvF,QAAQ,EAAEkF,kBAAA,CAAUa,IATH;EAUjB1F,KAAK,EAAE6E,kBAAA,CAAUc,KAAV,CAAgB,IAAAC,aAAA,EAAK7H,UAAL,CAAhB,CAVU;EAWjByB,OAAO,EAAEqF,kBAAA,CAAUO,OAAV,CAAkBP,kBAAA,CAAUQ,KAAV,CAAgBT,qBAAhB,CAAlB,CAXQ;EAYjBnF,SAAS,EAAEoF,kBAAA,CAAUO,OAAV,CAAkBP,kBAAA,CAAUQ,KAAV,CAAgBF,0BAAhB,CAAlB,CAZM;EAajBlF,QAAQ,EAAE4E,kBAAA,CAAUK,IAbH;EAcjBhF,KAAK,EAAE2E,kBAAA,CAAUK,IAdA;EAejB,cAAcL,kBAAA,CAAUC,MAfP;EAgBjB,mBAAmBD,kBAAA,CAAUC;AAhBZ,CAAnB;eAmBezF,M"}

package/lib/atom/select/style.css

@@ -215,6 +215,7 @@ div.coorpmanager label.selectWrapper {
   background: white;
   text-transform: none;
   text-align: initial;
+  width: 100%;
 }
 
 .filter .title {

package/lib/molecule/forum/forum-comment/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/forum/forum-comment/index.js"],"names":[],"mappings":";AASA,qEAyDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/forum/forum-comment/index.js"],"names":[],"mappings":";AASA,qEA0DC"}

package/lib/molecule/forum/forum-comment/index.js

@@ -54,6 +54,7 @@ const ForumComment = (props, context) => {
     onClick: !postDisabled ? onPost : _noop2.default,
     disabled: postDisabled,
     submitValue: translate('Post'),
+    "aria-label": translate('post_comment_aria_label'),
     style: {
       backgroundColor: postDisabled ? light : primary
     },

package/lib/molecule/forum/forum-comment/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ForumComment","props","context","translate","skin","avatar","onPost","onChange","value","textareaDisabled","postDisabled","newPost","profileAvatarAlt","primary","light","avatarView","style","image","button","post","backgroundColor","disabledButton","classnames","container","wrapper","comment","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","SrcPropType","func","bool"],"sources":["../../../../src/molecule/forum/forum-comment/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {SrcPropType} from '../../../util/proptypes';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport style from './style.css';\n\nconst ForumComment = (props, context) => {\n  const {translate, skin} = context;\n  const {\n    avatar,\n    onPost,\n    onChange,\n    value,\n    textareaDisabled,\n    postDisabled,\n    newPost = false,\n    profileAvatarAlt\n  } = props;\n  const primary = get('common.primary', skin);\n  const light = get('common.light', skin);\n\n  const avatarView = avatar ? (\n    <div className={style.image}>\n      <img src={avatar} alt={profileAvatarAlt} />\n    </div>\n  ) : null;\n\n  const button = (\n    <div className={style.post}>\n      <Button\n        type=\"link\"\n        onClick={!postDisabled ? onPost : noop}\n        disabled={postDisabled}\n        submitValue={translate('Post')}\n        style={{\n          backgroundColor: postDisabled ? light : primary\n        }}\n        className={postDisabled ? style.disabledButton : style.button}\n      />\n    </div>\n  );\n\n  return (\n    <div\n      data-name=\"forumComment\"\n      className={classnames(style.container, newPost ? style.newPost : null)}\n    >\n      <div className={classnames(style.wrapper, newPost ? style.newPost : null)}>\n        {avatarView}\n        <div className={style.comment}>\n          <textarea\n            placeholder={translate('Write something here')}\n            title={translate('Write something here')}\n            aria-label={translate('comment_aria_label')}\n            value={value}\n            onChange={onChange}\n            disabled={textareaDisabled}\n          />\n        </div>\n      </div>\n      {button}\n    </div>\n  );\n};\n\nForumComment.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nForumComment.propTypes = {\n  value: PropTypes.string,\n  profileAvatarAlt: PropTypes.string,\n  avatar: SrcPropType,\n  onChange: PropTypes.func,\n  onPost: PropTypes.func,\n  newPost: PropTypes.bool,\n  textareaDisabled: PropTypes.bool,\n  postDisabled: PropTypes.bool\n};\nexport default ForumComment;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IAACC,SAAD;IAAYC;EAAZ,IAAoBF,OAA1B;EACA,MAAM;IACJG,MADI;IAEJC,MAFI;IAGJC,QAHI;IAIJC,KAJI;IAKJC,gBALI;IAMJC,YANI;IAOJC,OAAO,GAAG,KAPN;IAQJC;EARI,IASFX,KATJ;EAUA,MAAMY,OAAO,GAAG,mBAAI,gBAAJ,EAAsBT,IAAtB,CAAhB;EACA,MAAMU,KAAK,GAAG,mBAAI,cAAJ,EAAoBV,IAApB,CAAd;EAEA,MAAMW,UAAU,GAAGV,MAAM,gBACvB;IAAK,SAAS,EAAEW,cAAA,CAAMC;EAAtB,gBACE;IAAK,GAAG,EAAEZ,MAAV;IAAkB,GAAG,EAAEO;EAAvB,EADF,CADuB,GAIrB,IAJJ;;EAMA,MAAMM,MAAM,gBACV;IAAK,SAAS,EAAEF,cAAA,CAAMG;EAAtB,gBACE,6BAAC,eAAD;IACE,IAAI,EAAC,MADP;IAEE,OAAO,EAAE,CAACT,YAAD,GAAgBJ,MAAhB,iBAFX;IAGE,QAAQ,EAAEI,YAHZ;IAIE,WAAW,EAAEP,SAAS,CAAC,MAAD,CAJxB;IAKE,KAAK,EAAE;MACLiB,eAAe,EAAEV,YAAY,GAAGI,KAAH,GAAWD;IADnC,CALT;IAQE,SAAS,EAAEH,YAAY,GAAGM,cAAA,CAAMK,cAAT,GAA0BL,cAAA,CAAME;EARzD,EADF,CADF;;EAeA,oBACE;IACE,aAAU,cADZ;IAEE,SAAS,EAAE,IAAAI,mBAAA,EAAWN,cAAA,CAAMO,SAAjB,EAA4BZ,OAAO,GAAGK,cAAA,CAAML,OAAT,GAAmB,IAAtD;EAFb,gBAIE;IAAK,SAAS,EAAE,IAAAW,mBAAA,EAAWN,cAAA,CAAMQ,OAAjB,EAA0Bb,OAAO,GAAGK,cAAA,CAAML,OAAT,GAAmB,IAApD;EAAhB,GACGI,UADH,eAEE;IAAK,SAAS,EAAEC,cAAA,CAAMS;EAAtB,gBACE;IACE,WAAW,EAAEtB,SAAS,CAAC,sBAAD,CADxB;IAEE,KAAK,EAAEA,SAAS,CAAC,sBAAD,CAFlB;IAGE,cAAYA,SAAS,CAAC,oBAAD,CAHvB;IAIE,KAAK,EAAEK,KAJT;IAKE,QAAQ,EAAED,QALZ;IAME,QAAQ,EAAEE;EANZ,EADF,CAFF,CAJF,EAiBGS,MAjBH,CADF;AAqBD,CAzDD;;AA2DAlB,YAAY,CAAC0B,YAAb,GAA4B;EAC1BvB,SAAS,EAAEwB,iBAAA,CAASC,iBAAT,CAA2BzB,SADZ;EAE1BC,IAAI,EAAEuB,iBAAA,CAASC,iBAAT,CAA2BxB;AAFP,CAA5B;AAKAJ,YAAY,CAAC6B,SAAb,2CAAyB;EACvBrB,KAAK,EAAEsB,kBAAA,CAAUC,MADM;EAEvBnB,gBAAgB,EAAEkB,kBAAA,CAAUC,MAFL;EAGvB1B,MAAM,EAAE2B,sBAHe;EAIvBzB,QAAQ,EAAEuB,kBAAA,CAAUG,IAJG;EAKvB3B,MAAM,EAAEwB,kBAAA,CAAUG,IALK;EAMvBtB,OAAO,EAAEmB,kBAAA,CAAUI,IANI;EAOvBzB,gBAAgB,EAAEqB,kBAAA,CAAUI,IAPL;EAQvBxB,YAAY,EAAEoB,kBAAA,CAAUI;AARD,CAAzB;eAUelC,Y"}
+{"version":3,"file":"index.js","names":["ForumComment","props","context","translate","skin","avatar","onPost","onChange","value","textareaDisabled","postDisabled","newPost","profileAvatarAlt","primary","light","avatarView","style","image","button","post","backgroundColor","disabledButton","classnames","container","wrapper","comment","contextTypes","Provider","childContextTypes","propTypes","PropTypes","string","SrcPropType","func","bool"],"sources":["../../../../src/molecule/forum/forum-comment/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {SrcPropType} from '../../../util/proptypes';\nimport Provider from '../../../atom/provider';\nimport Button from '../../../atom/button';\nimport style from './style.css';\n\nconst ForumComment = (props, context) => {\n  const {translate, skin} = context;\n  const {\n    avatar,\n    onPost,\n    onChange,\n    value,\n    textareaDisabled,\n    postDisabled,\n    newPost = false,\n    profileAvatarAlt\n  } = props;\n  const primary = get('common.primary', skin);\n  const light = get('common.light', skin);\n\n  const avatarView = avatar ? (\n    <div className={style.image}>\n      <img src={avatar} alt={profileAvatarAlt} />\n    </div>\n  ) : null;\n\n  const button = (\n    <div className={style.post}>\n      <Button\n        type=\"link\"\n        onClick={!postDisabled ? onPost : noop}\n        disabled={postDisabled}\n        submitValue={translate('Post')}\n        aria-label={translate('post_comment_aria_label')}\n        style={{\n          backgroundColor: postDisabled ? light : primary\n        }}\n        className={postDisabled ? style.disabledButton : style.button}\n      />\n    </div>\n  );\n\n  return (\n    <div\n      data-name=\"forumComment\"\n      className={classnames(style.container, newPost ? style.newPost : null)}\n    >\n      <div className={classnames(style.wrapper, newPost ? style.newPost : null)}>\n        {avatarView}\n        <div className={style.comment}>\n          <textarea\n            placeholder={translate('Write something here')}\n            title={translate('Write something here')}\n            aria-label={translate('comment_aria_label')}\n            value={value}\n            onChange={onChange}\n            disabled={textareaDisabled}\n          />\n        </div>\n      </div>\n      {button}\n    </div>\n  );\n};\n\nForumComment.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nForumComment.propTypes = {\n  value: PropTypes.string,\n  profileAvatarAlt: PropTypes.string,\n  avatar: SrcPropType,\n  onChange: PropTypes.func,\n  onPost: PropTypes.func,\n  newPost: PropTypes.bool,\n  textareaDisabled: PropTypes.bool,\n  postDisabled: PropTypes.bool\n};\nexport default ForumComment;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAQC,OAAR,KAAoB;EACvC,MAAM;IAACC,SAAD;IAAYC;EAAZ,IAAoBF,OAA1B;EACA,MAAM;IACJG,MADI;IAEJC,MAFI;IAGJC,QAHI;IAIJC,KAJI;IAKJC,gBALI;IAMJC,YANI;IAOJC,OAAO,GAAG,KAPN;IAQJC;EARI,IASFX,KATJ;EAUA,MAAMY,OAAO,GAAG,mBAAI,gBAAJ,EAAsBT,IAAtB,CAAhB;EACA,MAAMU,KAAK,GAAG,mBAAI,cAAJ,EAAoBV,IAApB,CAAd;EAEA,MAAMW,UAAU,GAAGV,MAAM,gBACvB;IAAK,SAAS,EAAEW,cAAA,CAAMC;EAAtB,gBACE;IAAK,GAAG,EAAEZ,MAAV;IAAkB,GAAG,EAAEO;EAAvB,EADF,CADuB,GAIrB,IAJJ;;EAMA,MAAMM,MAAM,gBACV;IAAK,SAAS,EAAEF,cAAA,CAAMG;EAAtB,gBACE,6BAAC,eAAD;IACE,IAAI,EAAC,MADP;IAEE,OAAO,EAAE,CAACT,YAAD,GAAgBJ,MAAhB,iBAFX;IAGE,QAAQ,EAAEI,YAHZ;IAIE,WAAW,EAAEP,SAAS,CAAC,MAAD,CAJxB;IAKE,cAAYA,SAAS,CAAC,yBAAD,CALvB;IAME,KAAK,EAAE;MACLiB,eAAe,EAAEV,YAAY,GAAGI,KAAH,GAAWD;IADnC,CANT;IASE,SAAS,EAAEH,YAAY,GAAGM,cAAA,CAAMK,cAAT,GAA0BL,cAAA,CAAME;EATzD,EADF,CADF;;EAgBA,oBACE;IACE,aAAU,cADZ;IAEE,SAAS,EAAE,IAAAI,mBAAA,EAAWN,cAAA,CAAMO,SAAjB,EAA4BZ,OAAO,GAAGK,cAAA,CAAML,OAAT,GAAmB,IAAtD;EAFb,gBAIE;IAAK,SAAS,EAAE,IAAAW,mBAAA,EAAWN,cAAA,CAAMQ,OAAjB,EAA0Bb,OAAO,GAAGK,cAAA,CAAML,OAAT,GAAmB,IAApD;EAAhB,GACGI,UADH,eAEE;IAAK,SAAS,EAAEC,cAAA,CAAMS;EAAtB,gBACE;IACE,WAAW,EAAEtB,SAAS,CAAC,sBAAD,CADxB;IAEE,KAAK,EAAEA,SAAS,CAAC,sBAAD,CAFlB;IAGE,cAAYA,SAAS,CAAC,oBAAD,CAHvB;IAIE,KAAK,EAAEK,KAJT;IAKE,QAAQ,EAAED,QALZ;IAME,QAAQ,EAAEE;EANZ,EADF,CAFF,CAJF,EAiBGS,MAjBH,CADF;AAqBD,CA1DD;;AA4DAlB,YAAY,CAAC0B,YAAb,GAA4B;EAC1BvB,SAAS,EAAEwB,iBAAA,CAASC,iBAAT,CAA2BzB,SADZ;EAE1BC,IAAI,EAAEuB,iBAAA,CAASC,iBAAT,CAA2BxB;AAFP,CAA5B;AAKAJ,YAAY,CAAC6B,SAAb,2CAAyB;EACvBrB,KAAK,EAAEsB,kBAAA,CAAUC,MADM;EAEvBnB,gBAAgB,EAAEkB,kBAAA,CAAUC,MAFL;EAGvB1B,MAAM,EAAE2B,sBAHe;EAIvBzB,QAAQ,EAAEuB,kBAAA,CAAUG,IAJG;EAKvB3B,MAAM,EAAEwB,kBAAA,CAAUG,IALK;EAMvBtB,OAAO,EAAEmB,kBAAA,CAAUI,IANI;EAOvBzB,gBAAgB,EAAEqB,kBAAA,CAAUI,IAPL;EAQvBxB,YAAY,EAAEoB,kBAAA,CAAUI;AARD,CAAzB;eAUelC,Y"}

package/lib/molecule/questions/mobile/template/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE3E,OAAO,EACL,eAAe,EACf,UAAU,EACV,WAAW,EAEZ,MAAM,kDAAkD,CAAC;AAoJ1D,oBAAY,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,gBAAgB,UAAW,KAAK,uBA+CrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAC,qBAAqB,EAAE,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAE3E,OAAO,EACL,eAAe,EACf,UAAU,EACV,WAAW,EAEZ,MAAM,kDAAkD,CAAC;AAkJ1D,oBAAY,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,CAAC;IAC3D,aAAa,EAAE,CAAC,IAAI,EAAE,kBAAkB,GAAG,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,eAAe,EAAE,eAAe,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,QAAA,MAAM,gBAAgB,UAAW,KAAK,uBA8CrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/molecule/questions/mobile/template/index.native.js

@@ -68,7 +68,6 @@ const createStyleSheet = theme => ({
 const Item = props => {
   const {
     part,
-    index,
     isDisabled = false,
     focusedSelectId,
     choices,
@@ -83,7 +82,7 @@ const Item = props => {
     translations
   } = templateContext;
   const inputNames = choices.map(choice => choice.name);
-  const id = `question-part-${index + 1}`;
+  const id = `question-part-${part.value}`;
   const isFocused = focusedSelectId === id;
 
   if (part.type === 'answerField' && inputNames.includes(part.value)) {
@@ -146,7 +145,7 @@ const Item = props => {
     fontSize: theme.fontSize.regular,
     testID: id,
     style: styles.htmlText
-  }, (0, _trim.default)(part.value || ''));
+  }, part.value === ' ' ? part.value : (0, _trim.default)(part.value || ''));
 };
 
 const QuestionTemplate = props => {
@@ -178,15 +177,14 @@ const QuestionTemplate = props => {
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styleSheet.container,
     testID: "question-template"
-  }, parts.map((part, id) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    key: `question-part-${id}`,
+  }, parts.map(part => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    key: `question-part-${part.value}`,
     style: {
       flexDirection: 'row'
     }
   }, /*#__PURE__*/_react.default.createElement(Item, {
     part: part,
     choices: choices,
-    index: id,
     focusedSelectId: focusedSelectId,
     isDisabled: isDisabled,
     handleBlur: handleBlur,

package/lib/molecule/questions/mobile/template/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","BOX_STYLE","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","index","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","useTemplateContext","translations","inputNames","map","choice","name","id","isFocused","type","includes","value","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","selectInputStyle","selectTextStyle","items","selectAnAnswer","trim","QuestionTemplate","template","styleSheet","setStylesheet","useState","useEffect","_stylesheet","parts","parseTemplateString"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  index: number;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    index,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${index + 1}`;\n  const isFocused = focusedSelectId === id;\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map((part, id) => (\n        <View key={`question-part-${id}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            index={id}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"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"}
+{"version":3,"file":"index.native.js","names":["createStyleSheet","theme","container","width","flexDirection","flexWrap","justifyContent","alignItems","spaced","paddingVertical","spacing","tiny","htmlText","color","colors","black","fontWeight","bold","lineHeight","selectInput","padding","borderRadius","radius","regular","minWidth","marginHorizontal","BOX_STYLE","backgroundColor","white","selectText","gray","medium","fontSize","textAlign","Item","props","part","isDisabled","focusedSelectId","choices","onInputChange","handleBlur","handleFocus","styles","templateContext","useTemplateContext","translations","inputNames","map","choice","name","id","value","isFocused","type","includes","choiceIndex","findIndex","disabledSuffix","selectedSuffix","handleInputChange","_item","_value","selectInputStyle","selectTextStyle","items","selectAnAnswer","trim","QuestionTemplate","template","styleSheet","setStylesheet","useState","useEffect","_stylesheet","parts","parseTemplateString"],"sources":["../../../../../src/molecule/questions/mobile/template/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {TextStyle, View, ViewStyle} from 'react-native';\n\nimport trim from 'lodash/fp/trim';\n\nimport Html from '../../../../atom/html/index.native';\nimport Select from '../../../../atom/select-modal/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport type {TemplateListOfChoices, TemplateTextChoice} from '../../types';\nimport FreeText from '../../free-text/index.native';\nimport {\n  FocusedSelectId,\n  HandleBlur,\n  HandleFocus,\n  useTemplateContext\n} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\nimport parseTemplateString from '../../../../util/parse-template-string';\nimport {BOX_STYLE} from '../../../../variables/shadow';\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  spaced: ViewStyle;\n  htmlText: TextStyle;\n  selectInput: ViewStyle;\n  selectText: TextStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType => ({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    alignItems: 'center'\n  },\n  spaced: {\n    paddingVertical: theme.spacing.tiny\n  },\n  htmlText: {\n    color: theme.colors.black,\n    fontWeight: theme.fontWeight.bold,\n    lineHeight: 25\n  },\n  // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n  selectInput: {\n    padding: theme.spacing.tiny,\n    borderRadius: theme.radius.regular,\n    minWidth: 175,\n    marginHorizontal: 12,\n    paddingVertical: 16,\n    ...BOX_STYLE,\n    backgroundColor: theme.colors.white\n  },\n  selectText: {\n    color: theme.colors.gray.medium,\n    fontWeight: theme.fontWeight.bold,\n    fontSize: theme.fontSize.regular,\n    textAlign: 'center'\n  }\n});\n\ntype TemplatePart = {\n  type: 'string' | 'answerField';\n  value: string;\n};\n\ntype ItemProps = {\n  part: TemplatePart;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  isDisabled?: boolean;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n  styles: StyleSheetType;\n};\n\nconst Item = (props: ItemProps) => {\n  const {\n    part,\n    isDisabled = false,\n    focusedSelectId,\n    choices,\n    onInputChange,\n    handleBlur,\n    handleFocus,\n    styles\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme, translations} = templateContext;\n\n  const inputNames = choices.map(choice => choice.name);\n  const id = `question-part-${part.value}`;\n  const isFocused = focusedSelectId === id;\n\n  if (part.type === 'answerField' && inputNames.includes(part.value)) {\n    const choiceIndex = choices.findIndex(choice => choice.name === part.value);\n    const choice = choices[choiceIndex];\n    const {value} = choice;\n\n    if (!choice || !choice.type || !choice.name) {\n      return null;\n    }\n\n    const disabledSuffix = isDisabled ? '-disabled' : '';\n    const selectedSuffix = value ? '-selected' : '';\n\n    const handleInputChange =\n      (_item: TemplateTextChoice | TemplateListOfChoices) => (_value: string) =>\n        onInputChange(_item, _value);\n\n    if (choice.type === 'text') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <FreeText\n            key={id}\n            isDisabled={isDisabled}\n            onChange={handleInputChange(choice)}\n            value={value}\n            testID={`${id}-text${selectedSuffix}${disabledSuffix}`}\n            questionType=\"template\"\n          />\n        </View>\n      );\n    }\n\n    const selectInputStyle: TextStyle[] = [styles.selectInput];\n    const selectTextStyle: TextStyle[] = [styles.selectText];\n\n    if (choice.type === 'select') {\n      return (\n        <View style={styles.spaced} testID={id}>\n          <Select\n            isDisabled={isDisabled}\n            questionType=\"template\"\n            values={choice.items}\n            value={value}\n            placeholder={translations.selectAnAnswer}\n            isFocused={isFocused}\n            onBlur={handleBlur}\n            onFocus={handleFocus(id)}\n            onChange={handleInputChange(choice)}\n            textStyle={selectTextStyle}\n            style={selectInputStyle}\n            analyticsID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n            testID={`${id}-select${selectedSuffix}${disabledSuffix}`}\n          />\n        </View>\n      );\n    }\n  }\n\n  return (\n    <Html key={id} fontSize={theme.fontSize.regular} testID={id} style={styles.htmlText}>\n      {part.value === ' ' ? part.value : trim(part.value || '')}\n    </Html>\n  );\n};\n\nexport type Props = {\n  isDisabled?: boolean;\n  template: string;\n  choices: Array<TemplateTextChoice | TemplateListOfChoices>;\n  onInputChange: (item: TemplateTextChoice | TemplateListOfChoices, value: string) => void;\n  focusedSelectId: FocusedSelectId;\n  handleBlur: HandleBlur;\n  handleFocus: HandleFocus;\n};\n\nconst QuestionTemplate = (props: Props) => {\n  const {\n    template,\n    onInputChange,\n    choices,\n    handleBlur,\n    handleFocus,\n    focusedSelectId,\n    isDisabled = false\n  } = props;\n\n  const templateContext = useTemplateContext();\n  const {theme} = templateContext;\n\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  if (!template || !styleSheet) {\n    return null;\n  }\n\n  const parts: TemplatePart[] = parseTemplateString(template);\n\n  return (\n    <View style={styleSheet.container} testID=\"question-template\">\n      {parts.map(part => (\n        <View key={`question-part-${part.value}`} style={{flexDirection: 'row'}}>\n          <Item\n            part={part}\n            choices={choices}\n            focusedSelectId={focusedSelectId}\n            isDisabled={isDisabled}\n            handleBlur={handleBlur}\n            handleFocus={handleFocus}\n            onInputChange={onInputChange}\n            styles={styleSheet}\n          />\n          <Space type=\"micro\" />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport default QuestionTemplate;\n"],"mappings":"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"}

package/lib/molecule/questions/qcm-drag/style.css

@@ -142,5 +142,5 @@
   composes: innerHTML from '../../../atom/label/style.css'
 }
 .hiddenCheckbox {
-  opacity: 0;
+  display: none;
 }