@coorpacademy/components 11.11.10 → 11.11.12-alpha.11

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","cssStyle","button","children","type","style","dataName","anchorClassName","disabledAnchor","anchorOnClick","anchorHref","inputClassName","buttonDisabled","propTypes","ColorPropType","PropTypes","string","bool","oneOf","func","node","shape","Button","buttonContentClassName","isLinkDisabled","cNames","classnames","buttonContent"],"sources":["../../../src/atom/button/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {ColorPropType} from '../../util/proptypes';\nimport Link from '../link';\nimport cssStyle from './style.css';\n\nconst ButtonContent = props => {\n  const {\n    color,\n    submitValue,\n    disabled,\n    download,\n    href,\n    target,\n    onClick,\n    className = cssStyle.button,\n    children,\n    type,\n    style,\n    'data-name': dataName\n  } = props;\n  const anchorClassName = (disabled && `${className} ${cssStyle.disabledAnchor}`) || className;\n  const anchorOnClick = (disabled && null) || onClick;\n  const anchorHref = (disabled && null) || href;\n  const inputClassName = (disabled && `${className} ${cssStyle.buttonDisabled}`) || className;\n\n  switch (type) {\n    case 'link':\n      return (\n        <Link\n          data-name={dataName}\n          href={anchorHref}\n          download={download}\n          onClick={anchorOnClick}\n          target={target}\n          className={anchorClassName}\n          style={style}\n        >\n          {submitValue || children || 'submit'}\n        </Link>\n      );\n\n    case 'a':\n      return (\n        <a\n          data-name={dataName}\n          href={anchorHref}\n          target={target}\n          className={anchorClassName}\n          onClick={anchorOnClick}\n          style={style}\n        >\n          {submitValue || children}\n        </a>\n      );\n\n    default:\n      return (\n        <input\n          data-name={dataName}\n          type={type}\n          value={submitValue}\n          disabled={disabled}\n          onClick={onClick}\n          className={inputClassName}\n          style={{\n            color,\n            ...style\n          }}\n        />\n      );\n  }\n};\n\nButtonContent.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string\n};\n\nconst Button = props => {\n  const {\n    className,\n    buttonContentClassName,\n    isLinkDisabled,\n    type = 'submit',\n    children,\n    style\n  } = props;\n  const cNames =\n    (isLinkDisabled && classnames([cssStyle.disabledAnchor, className])) ||\n    classnames([cssStyle.button, className]);\n  return (\n    <div className={cNames}>\n      <ButtonContent\n        {...props}\n        type={type}\n        className={buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent}\n        style={{\n          ...style\n        }}\n      >\n        {children}\n      </ButtonContent>\n    </div>\n  );\n};\n\nButton.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  isLinkDisabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  buttonContentClassName: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string\n};\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ButtonContent","props","color","submitValue","disabled","download","href","target","onClick","className","cssStyle","button","children","type","style","dataName","ariaLabel","anchorClassName","disabledAnchor","anchorOnClick","anchorHref","inputClassName","buttonDisabled","propTypes","ColorPropType","PropTypes","string","bool","oneOf","func","node","shape","Button","buttonContentClassName","isLinkDisabled","cNames","classnames","buttonContent"],"sources":["../../../src/atom/button/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {ColorPropType} from '../../util/proptypes';\nimport Link from '../link';\nimport cssStyle from './style.css';\n\nconst ButtonContent = props => {\n  const {\n    color,\n    submitValue,\n    disabled,\n    download,\n    href,\n    target,\n    onClick,\n    className = cssStyle.button,\n    children,\n    type,\n    style,\n    'data-name': dataName,\n    'aria-label': ariaLabel\n  } = props;\n  const anchorClassName = (disabled && `${className} ${cssStyle.disabledAnchor}`) || className;\n  const anchorOnClick = (disabled && null) || onClick;\n  const anchorHref = (disabled && null) || href;\n  const inputClassName = (disabled && `${className} ${cssStyle.buttonDisabled}`) || className;\n\n  switch (type) {\n    case 'link':\n      return (\n        <Link\n          data-name={dataName}\n          href={anchorHref}\n          download={download}\n          onClick={anchorOnClick}\n          target={target}\n          className={anchorClassName}\n          style={style}\n          aria-label={ariaLabel}\n        >\n          {submitValue || children || 'submit'}\n        </Link>\n      );\n\n    case 'a':\n      return (\n        <a\n          data-name={dataName}\n          href={anchorHref}\n          target={target}\n          className={anchorClassName}\n          onClick={anchorOnClick}\n          style={style}\n        >\n          {submitValue || children}\n        </a>\n      );\n\n    default:\n      return (\n        <input\n          data-name={dataName}\n          type={type}\n          value={submitValue}\n          disabled={disabled}\n          onClick={onClick}\n          className={inputClassName}\n          style={{\n            color,\n            ...style\n          }}\n        />\n      );\n  }\n};\n\nButtonContent.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string,\n  'aria-label': PropTypes.string\n};\n\nconst Button = props => {\n  const {\n    className,\n    buttonContentClassName,\n    isLinkDisabled,\n    type = 'submit',\n    children,\n    style\n  } = props;\n  const cNames =\n    (isLinkDisabled && classnames([cssStyle.disabledAnchor, className])) ||\n    classnames([cssStyle.button, className]);\n  return (\n    <div className={cNames}>\n      <ButtonContent\n        {...props}\n        type={type}\n        className={buttonContentClassName ? buttonContentClassName : cssStyle.buttonContent}\n        style={{\n          ...style\n        }}\n      >\n        {children}\n      </ButtonContent>\n    </div>\n  );\n};\n\nButton.propTypes = {\n  color: ColorPropType,\n  submitValue: PropTypes.string,\n  disabled: PropTypes.bool,\n  isLinkDisabled: PropTypes.bool,\n  href: PropTypes.string,\n  download: PropTypes.bool,\n  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),\n  type: PropTypes.string,\n  onClick: PropTypes.func,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  buttonContentClassName: PropTypes.string,\n  style: PropTypes.shape({}),\n  'data-name': PropTypes.string\n};\n\nexport default Button;\n"],"mappings":"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"}

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

@@ -5,6 +5,11 @@ declare namespace Handle {
         const onPan: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanStart: PropTypes.Requireable<(...args: any[]) => any>;
         const onPanEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        const HammerForTesting: PropTypes.Requireable<PropTypes.InferProps<{
+            on: PropTypes.Requireable<(...args: any[]) => any>;
+            destroy: PropTypes.Requireable<(...args: any[]) => any>;
+            stop: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
     }
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{

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

@@ -1 +1 @@
-{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAwCC"}
+{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../src/atom/range/handle.js"],"names":[],"mappings":";AA6BA,qEAsCC"}

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":"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"}

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/answer/index.js

@@ -150,7 +150,9 @@ const Answer = props => {
     className: _style.default.wrapper
   }, media ? /*#__PURE__*/_react.default.createElement(MediaView, {
     media: media
-  }) : null, /*#__PURE__*/_react.default.createElement("form", null, /*#__PURE__*/_react.default.createElement(Switch, {
+  }) : null, /*#__PURE__*/_react.default.createElement("form", {
+    className: _style.default.formWrapper
+  }, /*#__PURE__*/_react.default.createElement(Switch, {
     model: model,
     help: help
   })));

package/lib/molecule/answer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","legacyContext","translate","GetTranslateFromContext","contextTypes","Provider","childContextTypes","Answer","props","wrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}, legacyContext) => {\n  const {type} = model;\n  const translate = GetTranslateFromContext(legacyContext);\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcm':\n      return <Qcm {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'slider':\n      return <QuestionRange {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'template':\n      return <Template {...model} groupAriaLabel={translate('answer_the_question')} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nSwitch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <form>\n        <Switch model={model} help={help} />\n      </form>\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nAnswer.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default Answer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MediaView","media","videoId","type","childProps","TYPE_IMAGE","style","backgroundImage","url","TYPE_VIDEO","video","TYPE_AUDIO","audio","propTypes","MediaViewPropTypes","Switch","model","help","legacyContext","translate","GetTranslateFromContext","contextTypes","Provider","childContextTypes","Answer","props","wrapper","formWrapper"],"sources":["../../../src/molecule/answer/index.js"],"sourcesContent":["import React from 'react';\nimport {omit} from 'lodash/fp';\nimport VideoPlayer from '../video-player';\nimport DropDown from '../questions/drop-down';\nimport FreeText from '../questions/free-text';\nimport QcmDrag from '../questions/qcm-drag';\nimport Qcm from '../questions/qcm';\nimport QcmGraphic from '../questions/qcm-graphic';\nimport QuestionRange from '../questions/question-range';\nimport Template from '../questions/template';\nimport Audio from '../audio';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport propTypes, {MediaViewPropTypes, TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from './prop-types';\n\nconst MediaView = ({media}) => {\n  const {videoId, type, ...childProps} = media;\n  switch (type) {\n    case TYPE_IMAGE:\n      return (\n        <div\n          className={style.media}\n          style={{\n            backgroundImage: `url(${media.url})`\n          }}\n        />\n      );\n    case TYPE_VIDEO:\n      return (\n        <div className={style.video}>\n          <VideoPlayer {...omit('id', childProps)} id={videoId} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    case TYPE_AUDIO:\n      return (\n        <div className={style.audio}>\n          <Audio {...omit('id', childProps)} height=\"100%\" width=\"100%\" />\n        </div>\n      );\n    default:\n      return null;\n  }\n};\n\nMediaView.propTypes = MediaViewPropTypes;\n\nconst Switch = ({model, help}, legacyContext) => {\n  const {type} = model;\n  const translate = GetTranslateFromContext(legacyContext);\n  switch (type) {\n    case 'qcmDrag':\n      return <QcmDrag {...model} help={help} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcm':\n      return <Qcm {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'qcmGraphic':\n      return <QcmGraphic {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'freeText':\n      return <FreeText {...model} />;\n    case 'dropDown':\n      return <DropDown {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'slider':\n      return <QuestionRange {...model} groupAriaLabel={translate('answer_the_question')} />;\n    case 'template':\n      return <Template {...model} groupAriaLabel={translate('answer_the_question')} />;\n  }\n};\n\nSwitch.propTypes = {\n  model: propTypes.model,\n  help: propTypes.help\n};\n\nSwitch.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nconst Answer = props => {\n  const {model, media, help} = props;\n\n  return (\n    <div data-name=\"answer\" className={style.wrapper}>\n      {media ? <MediaView media={media} /> : null}\n      <form className={style.formWrapper}>\n        <Switch model={model} help={help} />\n      </form>\n    </div>\n  );\n};\n\nAnswer.propTypes = propTypes;\n\nAnswer.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default Answer;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAAC;EAACC;AAAD,CAAD,KAAa;EAC7B,MAAM;IAACC,OAAD;IAAUC;EAAV,IAAiCF,KAAvC;EAAA,MAAyBG,UAAzB,iCAAuCH,KAAvC;;EACA,QAAQE,IAAR;IACE,KAAKE,qBAAL;MACE,oBACE;QACE,SAAS,EAAEC,cAAA,CAAML,KADnB;QAEE,KAAK,EAAE;UACLM,eAAe,EAAG,OAAMN,KAAK,CAACO,GAAI;QAD7B;MAFT,EADF;;IAQF,KAAKC,qBAAL;MACE,oBACE;QAAK,SAAS,EAAEH,cAAA,CAAMI;MAAtB,gBACE,6BAAC,oBAAD,eAAiB,oBAAK,IAAL,EAAWN,UAAX,CAAjB;QAAyC,EAAE,EAAEF,OAA7C;QAAsD,MAAM,EAAC,MAA7D;QAAoE,KAAK,EAAC;MAA1E,GADF,CADF;;IAKF,KAAKS,qBAAL;MACE,oBACE;QAAK,SAAS,EAAEL,cAAA,CAAMM;MAAtB,gBACE,6BAAC,cAAD,eAAW,oBAAK,IAAL,EAAWR,UAAX,CAAX;QAAmC,MAAM,EAAC,MAA1C;QAAiD,KAAK,EAAC;MAAvD,GADF,CADF;;IAKF;MACE,OAAO,IAAP;EAvBJ;AAyBD,CA3BD;;AA6BAJ,SAAS,CAACa,SAAV,2CAAsBC,6BAAtB;;AAEA,MAAMC,MAAM,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,EAAgBC,aAAhB,KAAkC;EAC/C,MAAM;IAACf;EAAD,IAASa,KAAf;EACA,MAAMG,SAAS,GAAG,IAAAC,iCAAA,EAAwBF,aAAxB,CAAlB;;EACA,QAAQf,IAAR;IACE,KAAK,SAAL;MACE,oBAAO,6BAAC,gBAAD,eAAaa,KAAb;QAAoB,IAAI,EAAEC,IAA1B;QAAgC,cAAc,EAAEE,SAAS,CAAC,qBAAD;MAAzD,GAAP;;IACF,KAAK,KAAL;MACE,oBAAO,6BAAC,YAAD,eAASH,KAAT;QAAgB,cAAc,EAAEG,SAAS,CAAC,qBAAD;MAAzC,GAAP;;IACF,KAAK,YAAL;MACE,oBAAO,6BAAC,mBAAD,eAAgBH,KAAhB;QAAuB,cAAc,EAAEG,SAAS,CAAC,qBAAD;MAAhD,GAAP;;IACF,KAAK,UAAL;MACE,oBAAO,6BAAC,iBAAD,EAAcH,KAAd,CAAP;;IACF,KAAK,UAAL;MACE,oBAAO,6BAAC,iBAAD,eAAcA,KAAd;QAAqB,cAAc,EAAEG,SAAS,CAAC,qBAAD;MAA9C,GAAP;;IACF,KAAK,QAAL;MACE,oBAAO,6BAAC,sBAAD,eAAmBH,KAAnB;QAA0B,cAAc,EAAEG,SAAS,CAAC,qBAAD;MAAnD,GAAP;;IACF,KAAK,UAAL;MACE,oBAAO,6BAAC,iBAAD,eAAcH,KAAd;QAAqB,cAAc,EAAEG,SAAS,CAAC,qBAAD;MAA9C,GAAP;EAdJ;AAgBD,CAnBD;;AAqBAJ,MAAM,CAACF,SAAP,2CAAmB;EACjBG,KAAK,EAAEH,kBAAA,CAAUG,KADA;EAEjBC,IAAI,EAAEJ,kBAAA,CAAUI;AAFC,CAAnB;AAKAF,MAAM,CAACM,YAAP,GAAsB;EACpBF,SAAS,EAAEG,iBAAA,CAASC,iBAAT,CAA2BJ;AADlB,CAAtB;;AAIA,MAAMK,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IAACT,KAAD;IAAQf,KAAR;IAAegB;EAAf,IAAuBQ,KAA7B;EAEA,oBACE;IAAK,aAAU,QAAf;IAAwB,SAAS,EAAEnB,cAAA,CAAMoB;EAAzC,GACGzB,KAAK,gBAAG,6BAAC,SAAD;IAAW,KAAK,EAAEA;EAAlB,EAAH,GAAiC,IADzC,eAEE;IAAM,SAAS,EAAEK,cAAA,CAAMqB;EAAvB,gBACE,6BAAC,MAAD;IAAQ,KAAK,EAAEX,KAAf;IAAsB,IAAI,EAAEC;EAA5B,EADF,CAFF,CADF;AAQD,CAXD;;AAaAO,MAAM,CAACX,SAAP,2CAAmBA,kBAAnB;AAEAW,MAAM,CAACH,YAAP,GAAsB;EACpBF,SAAS,EAAEG,iBAAA,CAASC,iBAAT,CAA2BJ;AADlB,CAAtB;eAIeK,M"}

package/lib/molecule/answer/style.css

@@ -1,4 +1,5 @@
 @value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
 @value tablet from breakpoints;
 
 .wrapper {
@@ -42,6 +43,9 @@
     margin: 0 8px;
   }
 
+  .formWrapper {
+    width: 100%;
+  }
 }
 
 @media tablet {

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"}