@coorpacademy/components 10.1.12 → 10.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/es/atom/input-checkbox/index.js +9 -3
  2. package/es/atom/input-checkbox/index.js.map +1 -1
  3. package/es/atom/input-checkbox/style.css +15 -0
  4. package/es/molecule/banner/test/fixtures.js +0 -4
  5. package/es/molecule/banner/test/fixtures.js.map +1 -1
  6. package/es/molecule/bullet-point-menu-button/index.js +1 -5
  7. package/es/molecule/bullet-point-menu-button/index.js.map +1 -1
  8. package/es/molecule/bullet-point-menu-button/style.css +11 -7
  9. package/es/molecule/select-multiple/index.js +101 -16
  10. package/es/molecule/select-multiple/index.js.map +1 -1
  11. package/es/molecule/select-multiple/style.css +292 -11
  12. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +32 -0
  13. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
  14. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js +32 -0
  15. package/es/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
  16. package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
  17. package/es/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
  18. package/es/organism/accordion/coorp-manager/index.js +5 -2
  19. package/es/organism/accordion/coorp-manager/index.js.map +1 -1
  20. package/lib/atom/input-checkbox/index.js +10 -3
  21. package/lib/atom/input-checkbox/index.js.map +1 -1
  22. package/lib/atom/input-checkbox/style.css +15 -0
  23. package/lib/molecule/banner/test/fixtures.js +0 -6
  24. package/lib/molecule/banner/test/fixtures.js.map +1 -1
  25. package/lib/molecule/bullet-point-menu-button/index.js +1 -5
  26. package/lib/molecule/bullet-point-menu-button/index.js.map +1 -1
  27. package/lib/molecule/bullet-point-menu-button/style.css +11 -7
  28. package/lib/molecule/select-multiple/index.js +103 -15
  29. package/lib/molecule/select-multiple/index.js.map +1 -1
  30. package/lib/molecule/select-multiple/style.css +292 -11
  31. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js +37 -0
  32. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme-multiple.js.map +1 -0
  33. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js +37 -0
  34. package/lib/molecule/select-multiple/test/fixtures/checked-cm-theme.js.map +1 -0
  35. package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js +1 -1
  36. package/lib/molecule/select-multiple/test/fixtures/setup-theme-error.js.map +1 -1
  37. package/lib/organism/accordion/coorp-manager/index.js +4 -2
  38. package/lib/organism/accordion/coorp-manager/index.js.map +1 -1
  39. package/package.json +2 -2
  40. package/es/molecule/short-lived-banner/test/fixtures.js +0 -15
  41. package/es/molecule/short-lived-banner/test/fixtures.js.map +0 -1
  42. package/lib/molecule/short-lived-banner/test/fixtures.js +0 -25
  43. package/lib/molecule/short-lived-banner/test/fixtures.js.map +0 -1
@@ -1,11 +1,13 @@
1
1
  import _uniqueId from "lodash/fp/uniqueId";
2
2
  import _noop from "lodash/fp/noop";
3
+ import _keys from "lodash/fp/keys";
3
4
  import React, { useMemo } from 'react';
4
5
  import PropTypes from 'prop-types';
5
6
  import { NovaSolidStatusValidate as CheckIcon } from '@coorpacademy/nova-icons';
6
7
  import getClassState from '../../util/get-class-state';
7
8
  import style from './style.css';
8
9
  const titleStylesClassNames = {
10
+ inherit: style.inherit,
9
11
  primary: style.primary,
10
12
  secondary: style.secondary,
11
13
  tertiary: style.tertiary
@@ -21,7 +23,8 @@ const InputCheckbox = props => {
21
23
  titleStyle = 'primary',
22
24
  modified = false,
23
25
  theme = 'default',
24
- title: propsTitle
26
+ title: propsTitle,
27
+ noLabelMargins = false
25
28
  } = props;
26
29
  const titleStyleClassName = titleStylesClassNames[titleStyle];
27
30
 
@@ -44,11 +47,13 @@ const InputCheckbox = props => {
44
47
  onChange: handleChange,
45
48
  disabled: disabled
46
49
  }), /*#__PURE__*/React.createElement("label", {
50
+ className: noLabelMargins ? style.noLabelMargins : undefined,
47
51
  htmlFor: idCheckbox
48
52
  }, /*#__PURE__*/React.createElement(CheckIcon, {
49
53
  className: style.icon
50
54
  })), /*#__PURE__*/React.createElement("span", {
51
- className: titleStyleClassName
55
+ className: titleStyleClassName,
56
+ title: title
52
57
  }, title));
53
58
  };
54
59
 
@@ -60,8 +65,9 @@ InputCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
60
65
  error: PropTypes.bool,
61
66
  onChange: PropTypes.func,
62
67
  modified: PropTypes.bool,
68
+ noLabelMargins: PropTypes.bool,
63
69
  theme: PropTypes.oneOf(['coorpmanager', 'default']),
64
- titleStyle: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])
70
+ titleStyle: PropTypes.oneOf(_keys(titleStylesClassNames))
65
71
  } : {};
66
72
  export default InputCheckbox;
67
73
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","getClassState","style","titleStylesClassNames","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","icon","propTypes","string","isRequired","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst titleStylesClassNames = {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary\n};\n\nconst InputCheckbox = props => {\n const {\n checked,\n onChange = noop,\n error,\n disabled,\n required,\n titleStyle = 'primary',\n modified = false,\n theme = 'default',\n title: propsTitle\n } = props;\n\n const titleStyleClassName = titleStylesClassNames[titleStyle];\n const idCheckbox = uniqueId('input-checkbox-');\n const title = `${propsTitle}${required ? '*' : ''}`;\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const modifiedClassName =\n theme === 'coorpmanager' ? style.coorpManagerModified : style.defaultModified;\n const errorClassName = theme === 'coorpmanager' ? style.coorpManagerError : style.defaultError;\n const defaultContainerClassName = theme === 'coorpmanager' ? style.coorpManager : style.default;\n\n const className = getClassState(\n defaultContainerClassName,\n modifiedClassName,\n errorClassName,\n modified,\n error\n );\n\n return (\n <div className={className}>\n <input\n type=\"checkbox\"\n className={style.checkbox}\n name={title}\n id={idCheckbox}\n checked={checked}\n onChange={handleChange}\n disabled={disabled}\n />\n <label htmlFor={idCheckbox}>\n <CheckIcon className={style.icon} />\n </label>\n <span className={titleStyleClassName}>{title}</span>\n </div>\n );\n};\n\nInputCheckbox.propTypes = {\n title: PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n required: PropTypes.bool,\n checked: PropTypes.bool,\n error: PropTypes.bool,\n onChange: PropTypes.func,\n modified: PropTypes.bool,\n theme: PropTypes.oneOf(['coorpmanager', 'default']),\n titleStyle: PropTypes.oneOf(['primary', 'secondary', 'tertiary'])\n};\n\nexport default InputCheckbox;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["React","useMemo","PropTypes","NovaSolidStatusValidate","CheckIcon","getClassState","style","titleStylesClassNames","inherit","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","noLabelMargins","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","undefined","icon","propTypes","string","isRequired","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport {keys, noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst titleStylesClassNames = {\n inherit: style.inherit,\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary\n};\n\nconst InputCheckbox = props => {\n const {\n checked,\n onChange = noop,\n error,\n disabled,\n required,\n titleStyle = 'primary',\n modified = false,\n theme = 'default',\n title: propsTitle,\n noLabelMargins = false\n } = props;\n\n const titleStyleClassName = titleStylesClassNames[titleStyle];\n const idCheckbox = uniqueId('input-checkbox-');\n const title = `${propsTitle}${required ? '*' : ''}`;\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const modifiedClassName =\n theme === 'coorpmanager' ? style.coorpManagerModified : style.defaultModified;\n const errorClassName = theme === 'coorpmanager' ? style.coorpManagerError : style.defaultError;\n const defaultContainerClassName = theme === 'coorpmanager' ? style.coorpManager : style.default;\n\n const className = getClassState(\n defaultContainerClassName,\n modifiedClassName,\n errorClassName,\n modified,\n error\n );\n\n return (\n <div className={className}>\n <input\n type=\"checkbox\"\n className={style.checkbox}\n name={title}\n id={idCheckbox}\n checked={checked}\n onChange={handleChange}\n disabled={disabled}\n />\n <label className={noLabelMargins ? style.noLabelMargins : undefined} htmlFor={idCheckbox}>\n <CheckIcon className={style.icon} />\n </label>\n <span className={titleStyleClassName} title={title}>\n {title}\n </span>\n </div>\n );\n};\n\nInputCheckbox.propTypes = {\n title: PropTypes.string.isRequired,\n disabled: PropTypes.bool,\n required: PropTypes.bool,\n checked: PropTypes.bool,\n error: PropTypes.bool,\n onChange: PropTypes.func,\n modified: PropTypes.bool,\n noLabelMargins: PropTypes.bool,\n theme: PropTypes.oneOf(['coorpmanager', 'default']),\n titleStyle: PropTypes.oneOf(keys(titleStylesClassNames))\n};\n\nexport default InputCheckbox;\n"],"file":"index.js"}
@@ -143,3 +143,18 @@
143
143
  .coorpManagerModified .checkbox:checked + label {
144
144
  outline: 2px solid battle;
145
145
  }
146
+
147
+ .default .inherit,
148
+ .coorpManager .inherit {
149
+ color: inherit;
150
+ text-overflow: ellipsis;
151
+ white-space: nowrap;
152
+ overflow: hidden;
153
+ width: 100%;
154
+ }
155
+
156
+ .coorpManager .noLabelMargins,
157
+ .default .noLabelMargins {
158
+ margin-right: 0;
159
+ margin-left: 0;
160
+ }
@@ -4,8 +4,6 @@ import renderComponentMacro from '../../../test/helpers/render-component';
4
4
  import MoleculeBanner from '..';
5
5
  import fixtureDefault from './fixtures/default';
6
6
  import fixtureErrorBanner from './fixtures/error-banner';
7
- import fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';
8
- import fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';
9
7
  test('Molecule › MoleculeBanner > should have valid propTypes', t => {
10
8
  t.pass();
11
9
  forEach(MoleculeBanner.propTypes, (value, key) => {
@@ -14,6 +12,4 @@ test('Molecule › MoleculeBanner > should have valid propTypes', t => {
14
12
  });
15
13
  test('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);
16
14
  test('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);
17
- test('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);
18
- test('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);
19
15
  //# sourceMappingURL=fixtures.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","fixtureErrorTemporaryBanner","fixtureSuccessTemporaryBanner","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AACA,OAAOC,2BAAP,MAAwC,mCAAxC;AACA,OAAOC,6BAAP,MAA0C,qCAA1C;AAEAP,IAAI,CAAC,yDAAD,EAA4DQ,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAR,EAAAA,OAAO,CAACE,cAAc,CAACO,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAZ,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,8DAAD,EAAiEE,oBAAjE,EAAuFC,cAAvF,EAAuGE,kBAAvG,CAAJ;AACAL,IAAI,CAAC,uEAAD,EAA0EE,oBAA1E,EAAgGC,cAAhG,EAAgHG,2BAAhH,CAAJ;AACAN,IAAI,CAAC,yEAAD,EAA4EE,oBAA5E,EAAkGC,cAAlG,EAAkHI,6BAAlH,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\nimport fixtureErrorTemporaryBanner from './fixtures/error-temporary-banner';\nimport fixtureSuccessTemporaryBanner from './fixtures/success-temporary-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\ntest('Molecule › MoleculeBanner › ErrorTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorTemporaryBanner);\ntest('Molecule › MoleculeBanner › SuccessTemporaryBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureSuccessTemporaryBanner);\n"],"file":"fixtures.js"}
1
+ {"version":3,"sources":["../../../../src/molecule/banner/test/fixtures.js"],"names":["test","forEach","renderComponentMacro","MoleculeBanner","fixtureDefault","fixtureErrorBanner","t","pass","propTypes","value","key","not","undefined"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,KAAjB;AACA,OAAOC,OAAP,MAAoB,gBAApB;AACA,OAAOC,oBAAP,MAAiC,wCAAjC;AACA,OAAOC,cAAP,MAA2B,IAA3B;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AAEAL,IAAI,CAAC,yDAAD,EAA4DM,CAAC,IAAI;AACnEA,EAAAA,CAAC,CAACC,IAAF;AACAN,EAAAA,OAAO,CAACE,cAAc,CAACK,SAAhB,EAA2B,CAACC,KAAD,EAAQC,GAAR,KAAgB;AAChDJ,IAAAA,CAAC,CAACK,GAAF,CAAMF,KAAN,EAAaG,SAAb,EAAyB,mDAAkDF,GAAI,mEAA/E;AACD,GAFM,CAAP;AAGD,CALG,CAAJ;AAOAV,IAAI,CAAC,0DAAD,EAA6DE,oBAA7D,EAAmFC,cAAnF,EAAmGC,cAAnG,CAAJ;AACAJ,IAAI,CAAC,8DAAD,EAAiEE,oBAAjE,EAAuFC,cAAvF,EAAuGE,kBAAvG,CAAJ","sourcesContent":["import test from 'ava';\nimport forEach from 'lodash/forEach';\nimport renderComponentMacro from '../../../test/helpers/render-component';\nimport MoleculeBanner from '..';\nimport fixtureDefault from './fixtures/default';\nimport fixtureErrorBanner from './fixtures/error-banner';\n\ntest('Molecule › MoleculeBanner > should have valid propTypes', t => {\n t.pass();\n forEach(MoleculeBanner.propTypes, (value, key) => {\n t.not(value, undefined, `PropType for \"Molecule.MoleculeBanner.propTypes.${key}\" may not be undefined. Did you mistype the propTypes definition?`);\n });\n});\n\ntest('Molecule › MoleculeBanner › Default › should be rendered', renderComponentMacro, MoleculeBanner, fixtureDefault);\ntest('Molecule › MoleculeBanner › ErrorBanner › should be rendered', renderComponentMacro, MoleculeBanner, fixtureErrorBanner);\n"],"file":"fixtures.js"}
@@ -1,5 +1,3 @@
1
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
-
3
1
  import React, { useCallback } from 'react';
4
2
  import PropTypes from 'prop-types';
5
3
  import ButtonLinkIconOnly from '../../atom/button-link-icon-only';
@@ -35,9 +33,7 @@ const BulletPointMenuButton = props => {
35
33
  return /*#__PURE__*/React.createElement("div", {
36
34
  className: style.bulletPointWrapper,
37
35
  "data-name": "bullet-point-wrapper"
38
- }, /*#__PURE__*/React.createElement(ButtonLinkIconOnly, _extends({}, bulletPointButtonProps, {
39
- className: style.bulletPointButton
40
- })), menu);
36
+ }, /*#__PURE__*/React.createElement(ButtonLinkIconOnly, bulletPointButtonProps), menu);
41
37
  };
42
38
 
43
39
  BulletPointMenuButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/molecule/bullet-point-menu-button/index.js"],"names":["React","useCallback","PropTypes","ButtonLinkIconOnly","ButtonMenu","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","buttons","handleOnClick","menuProps","menu","bulletPointMenu","bulletPointButtonProps","size","icon","bulletPointWrapper","bulletPointButton","propTypes","bool","string","func"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,QAAQ,GAAG,KAAZ;AAAmBC,IAAAA,eAAnB;AAAoCC,IAAAA,aAApC;AAAmDC,IAAAA,OAAnD;AAA4DC,IAAAA;AAA5D,MAAuEL,KAA7E;AACA,QAAMM,aAAa,GAAGZ,WAAW,CAAC,MAAMU,OAAO,EAAd,EAAkB,CAACA,OAAD,CAAlB,CAAjC;AAEA,QAAMG,SAAS,GAAG;AAChB,iBAAa,aADG;AAEhBF,IAAAA;AAFgB,GAAlB;AAKA,QAAMG,IAAI,gBACR;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW,eAAtB;AAAuC,iBAAU,cAAjD;AAAgE,kBAAYN;AAA5E,kBACE,oBAAC,UAAD,EAAgBI,SAAhB,CADF,CADF;AAKA,QAAMG,sBAAsB,GAAG;AAC7BC,IAAAA,IAAI,EAAE,SADuB;AAE7B,kBAAcT,eAFe;AAG7B,iBAAa,qBAHgB;AAI7BU,IAAAA,IAAI,EAAE,cAJuB;AAK7BR,IAAAA,OAAO,EAAEE,aALoB;AAM7BL,IAAAA;AAN6B,GAA/B;AASA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACe,kBAAtB;AAA0C,iBAAU;AAApD,kBACE,oBAAC,kBAAD,eAAwBH,sBAAxB;AAAgD,IAAA,SAAS,EAAEZ,KAAK,CAACgB;AAAjE,KADF,EAEGN,IAFH,CADF;AAMD,CA7BD;;AA+BAT,qBAAqB,CAACgB,SAAtB,2CAAkC;AAChCd,EAAAA,QAAQ,EAAEN,SAAS,CAACqB,IADY;AAEhCd,EAAAA,eAAe,EAAEP,SAAS,CAACsB,MAFK;AAGhCd,EAAAA,aAAa,EAAER,SAAS,CAACsB,MAHO;AAIhCZ,EAAAA,OAAO,EAAER,UAAU,CAACkB,SAAX,CAAqBV,OAJE;AAKhCD,EAAAA,OAAO,EAAET,SAAS,CAACuB;AALa,CAAlC;AAQA,eAAenB,qBAAf","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ButtonMenu from '../../atom/button-menu';\nimport style from './style.css';\n\nconst BulletPointMenuButton = props => {\n const {disabled = false, buttonAriaLabel, menuAriaLabel, onClick, buttons} = props;\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const menuProps = {\n 'data-name': 'button-menu',\n buttons\n };\n\n const menu = (\n <div className={style.bulletPointMenu} data-name=\"menu-wrapper\" aria-label={menuAriaLabel}>\n <ButtonMenu {...menuProps} />\n </div>\n );\n const bulletPointButtonProps = {\n size: 'default',\n 'aria-label': buttonAriaLabel,\n 'data-name': 'bullet-point-button',\n icon: 'bullet-point',\n onClick: handleOnClick,\n disabled\n };\n\n return (\n <div className={style.bulletPointWrapper} data-name=\"bullet-point-wrapper\">\n <ButtonLinkIconOnly {...bulletPointButtonProps} className={style.bulletPointButton} />\n {menu}\n </div>\n );\n};\n\nBulletPointMenuButton.propTypes = {\n disabled: PropTypes.bool,\n buttonAriaLabel: PropTypes.string,\n menuAriaLabel: PropTypes.string,\n buttons: ButtonMenu.propTypes.buttons,\n onClick: PropTypes.func\n};\n\nexport default BulletPointMenuButton;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/molecule/bullet-point-menu-button/index.js"],"names":["React","useCallback","PropTypes","ButtonLinkIconOnly","ButtonMenu","style","BulletPointMenuButton","props","disabled","buttonAriaLabel","menuAriaLabel","onClick","buttons","handleOnClick","menuProps","menu","bulletPointMenu","bulletPointButtonProps","size","icon","bulletPointWrapper","propTypes","bool","string","func"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,WAAf,QAAiC,OAAjC;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,kBAAP,MAA+B,kCAA/B;AACA,OAAOC,UAAP,MAAuB,wBAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,qBAAqB,GAAGC,KAAK,IAAI;AACrC,QAAM;AAACC,IAAAA,QAAQ,GAAG,KAAZ;AAAmBC,IAAAA,eAAnB;AAAoCC,IAAAA,aAApC;AAAmDC,IAAAA,OAAnD;AAA4DC,IAAAA;AAA5D,MAAuEL,KAA7E;AACA,QAAMM,aAAa,GAAGZ,WAAW,CAAC,MAAMU,OAAO,EAAd,EAAkB,CAACA,OAAD,CAAlB,CAAjC;AAEA,QAAMG,SAAS,GAAG;AAChB,iBAAa,aADG;AAEhBF,IAAAA;AAFgB,GAAlB;AAKA,QAAMG,IAAI,gBACR;AAAK,IAAA,SAAS,EAAEV,KAAK,CAACW,eAAtB;AAAuC,iBAAU,cAAjD;AAAgE,kBAAYN;AAA5E,kBACE,oBAAC,UAAD,EAAgBI,SAAhB,CADF,CADF;AAKA,QAAMG,sBAAsB,GAAG;AAC7BC,IAAAA,IAAI,EAAE,SADuB;AAE7B,kBAAcT,eAFe;AAG7B,iBAAa,qBAHgB;AAI7BU,IAAAA,IAAI,EAAE,cAJuB;AAK7BR,IAAAA,OAAO,EAAEE,aALoB;AAM7BL,IAAAA;AAN6B,GAA/B;AASA,sBACE;AAAK,IAAA,SAAS,EAAEH,KAAK,CAACe,kBAAtB;AAA0C,iBAAU;AAApD,kBACE,oBAAC,kBAAD,EAAwBH,sBAAxB,CADF,EAEGF,IAFH,CADF;AAMD,CA7BD;;AA+BAT,qBAAqB,CAACe,SAAtB,2CAAkC;AAChCb,EAAAA,QAAQ,EAAEN,SAAS,CAACoB,IADY;AAEhCb,EAAAA,eAAe,EAAEP,SAAS,CAACqB,MAFK;AAGhCb,EAAAA,aAAa,EAAER,SAAS,CAACqB,MAHO;AAIhCX,EAAAA,OAAO,EAAER,UAAU,CAACiB,SAAX,CAAqBT,OAJE;AAKhCD,EAAAA,OAAO,EAAET,SAAS,CAACsB;AALa,CAAlC;AAQA,eAAelB,qBAAf","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLinkIconOnly from '../../atom/button-link-icon-only';\nimport ButtonMenu from '../../atom/button-menu';\nimport style from './style.css';\n\nconst BulletPointMenuButton = props => {\n const {disabled = false, buttonAriaLabel, menuAriaLabel, onClick, buttons} = props;\n const handleOnClick = useCallback(() => onClick(), [onClick]);\n\n const menuProps = {\n 'data-name': 'button-menu',\n buttons\n };\n\n const menu = (\n <div className={style.bulletPointMenu} data-name=\"menu-wrapper\" aria-label={menuAriaLabel}>\n <ButtonMenu {...menuProps} />\n </div>\n );\n const bulletPointButtonProps = {\n size: 'default',\n 'aria-label': buttonAriaLabel,\n 'data-name': 'bullet-point-button',\n icon: 'bullet-point',\n onClick: handleOnClick,\n disabled\n };\n\n return (\n <div className={style.bulletPointWrapper} data-name=\"bullet-point-wrapper\">\n <ButtonLinkIconOnly {...bulletPointButtonProps} />\n {menu}\n </div>\n );\n};\n\nBulletPointMenuButton.propTypes = {\n disabled: PropTypes.bool,\n buttonAriaLabel: PropTypes.string,\n menuAriaLabel: PropTypes.string,\n buttons: ButtonMenu.propTypes.buttons,\n onClick: PropTypes.func\n};\n\nexport default BulletPointMenuButton;\n"],"file":"index.js"}
@@ -10,7 +10,7 @@
10
10
  position: relative;
11
11
  }
12
12
 
13
- .bulletPointButton {
13
+ .bulletPointWrapper > button {
14
14
  position: relative;
15
15
  cursor: pointer;
16
16
  }
@@ -31,8 +31,8 @@
31
31
  background-color: cm_grey_100;
32
32
  }
33
33
 
34
- /* Fade-in - Fade-out */
35
- .bulletPointButton,button + .bulletPointMenu {
34
+ /* Fade-in - Fade-out, does target button class but bulletPointMenu only */
35
+ button + .bulletPointMenu {
36
36
  max-height: 0;
37
37
  /* fade out combo */
38
38
  visibility: hidden;
@@ -40,13 +40,17 @@
40
40
  transition:visibility 0.5s ease,opacity 0.5s ease;
41
41
  }
42
42
 
43
- .bulletPointButton,button:focus + .bulletPointMenu {
43
+ /* Does target button class but bulletPointMenu only */
44
+ button:focus + .bulletPointMenu {
44
45
  /* fade in combo */
45
46
  max-height: max-content;
46
47
  visibility:visible;
47
48
  opacity:1;
48
49
  }
49
50
 
50
- /* Recover - unset pointer-events */
51
- .bulletPointButton,button:focus { pointer-events: none; }
52
- .bulletPointButton,button:not(:focus) { pointer-events: auto; }
51
+ /*
52
+ Recover - unset pointer-events,
53
+ to be able to click on the button when the menu is open to close it
54
+ */
55
+ .bulletPointWrapper > button:focus { pointer-events: none; }
56
+ .bulletPointWrapper > button:not(:focus) { pointer-events: auto; }
@@ -1,3 +1,5 @@
1
+ import _isEmpty from "lodash/fp/isEmpty";
2
+ import _keys from "lodash/fp/keys";
1
3
  import _set from "lodash/fp/set";
2
4
  import _get from "lodash/fp/get";
3
5
  import _filter from "lodash/fp/filter";
@@ -10,15 +12,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
10
12
  import React, { useState, useEffect, useRef, useCallback } from 'react';
11
13
  import PropTypes from 'prop-types';
12
14
  import classnames from 'classnames';
13
- import { NovaCompositionNavigationArrowDown as ArrowDown } from '@coorpacademy/nova-icons';
15
+ import { NovaCompositionNavigationArrowDown as ArrowDown, NovaSolidStatusClose as ErrorIcon, NovaCompositionCoorpacademyInformationIcon as InfoIcon } from '@coorpacademy/nova-icons';
14
16
  import TitledCheckbox from '../titled-checkbox';
15
17
  import Provider from '../../atom/provider';
18
+ import Checkbox from '../../atom/input-checkbox';
16
19
  import getClassState from '../../util/get-class-state';
17
20
  import style from './style.css';
18
21
  const themeStyle = {
19
22
  setup: style.setup,
20
23
  cockpit: style.cockpit,
21
- sidebar: style.sidebar
24
+ sidebar: style.sidebar,
25
+ coorpmanager: style.coorpmanager
22
26
  };
23
27
  export const useChoices = options => {
24
28
  const choicesRef = useRef(options);
@@ -36,17 +40,49 @@ export const useChoices = options => {
36
40
  return [getChoices, setChoices];
37
41
  };
38
42
 
43
+ const CMMultipleView = ({
44
+ multiple,
45
+ choice,
46
+ onChange
47
+ }) => {
48
+ const handleChange = useCallback(checked => {
49
+ if (!multiple) {
50
+ return onChange(choice);
51
+ }
52
+
53
+ return onChange(_extends(_extends({}, choice), {}, {
54
+ selected: checked
55
+ }));
56
+ }, [onChange, choice]);
57
+ return multiple ? /*#__PURE__*/React.createElement("div", {
58
+ className: style.item
59
+ }, /*#__PURE__*/React.createElement(Checkbox, {
60
+ titleStyle: "inherit",
61
+ checked: choice.selected,
62
+ onChange: handleChange,
63
+ noLabelMargins: true,
64
+ title: choice.name
65
+ })) : /*#__PURE__*/React.createElement("span", {
66
+ className: style.item,
67
+ onClick: handleChange,
68
+ title: choice.name
69
+ }, choice.name);
70
+ };
71
+
39
72
  const SelectMultiple = ({
40
73
  title,
41
74
  options,
42
75
  theme,
43
76
  placeholder,
44
77
  description,
78
+ hint,
45
79
  multiple,
46
80
  onChange,
81
+ onError,
47
82
  modified = false,
48
83
  required = false,
49
- error = false
84
+ error = '',
85
+ disabled = false
50
86
  }, {
51
87
  skin
52
88
  }) => {
@@ -61,7 +97,10 @@ const SelectMultiple = ({
61
97
  const handleOnClick = useCallback(e => {
62
98
  e.preventDefault();
63
99
  e.stopPropagation();
64
- updateIsOpened(prev => !prev);
100
+
101
+ if (!disabled) {
102
+ updateIsOpened(prev => !prev);
103
+ }
65
104
  }, []);
66
105
  const closeHandle = useCallback(e => {
67
106
  if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {
@@ -86,6 +125,7 @@ const SelectMultiple = ({
86
125
  document.removeEventListener('touchstart', closeHandle);
87
126
  };
88
127
  }, [closeHandle]);
128
+ const isCMTheme = theme === 'coorpmanager';
89
129
 
90
130
  const lines = _map.convert({
91
131
  cap: false
@@ -93,7 +133,13 @@ const SelectMultiple = ({
93
133
  return /*#__PURE__*/React.createElement("li", {
94
134
  key: i,
95
135
  className: style.choice
96
- }, /*#__PURE__*/React.createElement(TitledCheckbox, {
136
+ }, isCMTheme ? /*#__PURE__*/React.createElement(CMMultipleView, {
137
+ multiple: multiple,
138
+ choice: _extends(_extends({}, choice), {}, {
139
+ i
140
+ }),
141
+ onChange: handleChange
142
+ }) : /*#__PURE__*/React.createElement(TitledCheckbox, {
97
143
  onToggle: handleChange,
98
144
  choice: _extends(_extends({}, choice), {}, {
99
145
  i
@@ -108,47 +154,86 @@ const SelectMultiple = ({
108
154
 
109
155
  const _title = title && `${title}${required ? ' *' : ''}`;
110
156
 
111
- const titleView = title ? /*#__PURE__*/React.createElement("span", {
112
- className: style.title
113
- }, _title, " ") : null;
114
157
  const isActive = isOpened === true;
158
+ const titleView = title ? /*#__PURE__*/React.createElement("span", {
159
+ className: classnames(style.title, isCMTheme && selection && style.titleWithSelection, isCMTheme && _isEmpty(selection) && style.noValue, isActive && style.active)
160
+ }, _title, isCMTheme ? /*#__PURE__*/React.createElement("div", {
161
+ className: style.infoIconWrapper
162
+ }, /*#__PURE__*/React.createElement(InfoIcon, {
163
+ className: style.infoIcon
164
+ }), /*#__PURE__*/React.createElement("div", {
165
+ className: style.descriptionLabel
166
+ }, description)) : null) : null;
167
+ const hintView = isCMTheme && !isActive ? /*#__PURE__*/React.createElement("div", {
168
+ className: style.hint // eslint-disable-next-line react/no-danger
169
+ ,
170
+ dangerouslySetInnerHTML: {
171
+ __html: error || hint
172
+ }
173
+ }) : null;
115
174
  const mainClass = theme ? themeStyle[theme] : style.default;
175
+ const showPlaceholder = isCMTheme && isActive;
116
176
  const behaviourClassName = getClassState(style.default, style.modified, style.error, modified, error);
177
+ const errorIconView = error ? /*#__PURE__*/React.createElement(ErrorIcon, {
178
+ onClick: onError,
179
+ className: style.errorIcon
180
+ }) : null;
117
181
  return /*#__PURE__*/React.createElement("div", {
118
- className: classnames(mainClass, behaviourClassName),
182
+ className: classnames(mainClass, behaviourClassName, disabled && style.disabled),
119
183
  ref: nodeRef
120
- }, /*#__PURE__*/React.createElement("label", null, titleView, /*#__PURE__*/React.createElement("div", {
184
+ }, /*#__PURE__*/React.createElement("label", null, !isCMTheme && titleView, /*#__PURE__*/React.createElement("div", {
121
185
  className: style.select,
122
186
  title: selection || placeholder,
123
187
  onClick: handleOnClick
124
- }, selection || placeholder, /*#__PURE__*/React.createElement(ArrowDown, {
188
+ }, isCMTheme && titleView, /*#__PURE__*/React.createElement("span", {
189
+ className: classnames(style.selection, isCMTheme && _isEmpty(selection) && style.noselection)
190
+ }, selection || !isCMTheme || showPlaceholder && placeholder || null), isCMTheme ? /*#__PURE__*/React.createElement("div", {
191
+ className: style.iconsWrapper
192
+ }, /*#__PURE__*/React.createElement("div", {
193
+ className: style.flex
194
+ }, errorIconView), /*#__PURE__*/React.createElement("div", {
195
+ className: classnames(style.flex, isActive && style.clicked)
196
+ }, /*#__PURE__*/React.createElement(ArrowDown, {
197
+ color: black,
198
+ className: classnames(style.arrow, {
199
+ [style.down]: isActive
200
+ })
201
+ }))) : /*#__PURE__*/React.createElement(ArrowDown, {
125
202
  color: black,
126
203
  className: classnames(style.arrow, {
127
204
  [style.down]: isActive
128
205
  })
129
206
  })), /*#__PURE__*/React.createElement("div", {
130
- className: isActive ? style.activeChoices : style.choices
207
+ className: classnames(style.choices, isActive && style.activeChoices)
131
208
  }, /*#__PURE__*/React.createElement("ul", {
132
209
  className: style.list
133
- }, lines))), /*#__PURE__*/React.createElement("div", {
210
+ }, lines))), !isCMTheme ? /*#__PURE__*/React.createElement("div", {
134
211
  className: style.description
135
- }, description));
212
+ }, description) : null, hintView);
136
213
  };
137
214
 
138
215
  SelectMultiple.contextTypes = {
139
216
  skin: Provider.childContextTypes.skin
140
217
  };
218
+ CMMultipleView.propTypes = process.env.NODE_ENV !== "production" ? {
219
+ multiple: PropTypes.bool,
220
+ choice: TitledCheckbox.propTypes.choice,
221
+ onChange: PropTypes.func
222
+ } : {};
141
223
  SelectMultiple.propTypes = process.env.NODE_ENV !== "production" ? {
142
224
  title: PropTypes.string,
143
225
  placeholder: PropTypes.string,
144
226
  description: PropTypes.string,
227
+ hint: PropTypes.string,
145
228
  options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),
146
229
  onChange: PropTypes.func,
230
+ onError: PropTypes.func,
147
231
  multiple: PropTypes.bool,
148
- theme: PropTypes.string,
149
232
  modified: PropTypes.bool,
233
+ disabled: PropTypes.bool,
150
234
  required: PropTypes.bool,
151
- error: PropTypes.bool
235
+ error: PropTypes.string,
236
+ theme: PropTypes.oneOf(_keys(themeStyle))
152
237
  } : {};
153
238
  export default SelectMultiple;
154
239
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/molecule/select-multiple/index.js"],"names":["React","useState","useEffect","useRef","useCallback","PropTypes","classnames","NovaCompositionNavigationArrowDown","ArrowDown","TitledCheckbox","Provider","getClassState","style","themeStyle","setup","cockpit","sidebar","useChoices","options","choicesRef","getChoices","current","setChoices","choice","choices","i","selected","filter","c","SelectMultiple","title","theme","placeholder","description","multiple","onChange","modified","required","error","skin","isOpened","updateIsOpened","nodeRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","handleChange","document","addEventListener","removeEventListener","lines","convert","cap","selection","_title","titleView","isActive","mainClass","default","behaviourClassName","select","arrow","down","activeChoices","list","contextTypes","childContextTypes","propTypes","string","arrayOf","func","bool"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set} from 'lodash/fp';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar\n};\n\nexport const useChoices = options => {\n const choicesRef = useRef(options);\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n multiple,\n onChange,\n modified = false,\n required = false,\n error = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(e => {\n e.preventDefault();\n e.stopPropagation();\n\n updateIsOpened(prev => !prev);\n }, []);\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n\n return onChange(getChoices());\n }\n\n return onChange(choice);\n },\n [setChoices, multiple, onChange]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li key={i} className={style.choice}>\n <TitledCheckbox onToggle={handleChange} choice={{...choice, i}} background={defaultColor} />\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const _title = title && `${title}${required ? ' *' : ''}`;\n\n const titleView = title ? <span className={style.title}>{_title} </span> : null;\n const isActive = isOpened === true;\n const mainClass = theme ? themeStyle[theme] : style.default;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n return (\n <div className={classnames(mainClass, behaviourClassName)} ref={nodeRef}>\n <label>\n {titleView}\n <div className={style.select} title={selection || placeholder} onClick={handleOnClick}>\n {selection || placeholder}\n <ArrowDown color={black} className={classnames(style.arrow, {[style.down]: isActive})} />\n </div>\n <div className={isActive ? style.activeChoices : style.choices}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n multiple: PropTypes.bool,\n theme: PropTypes.string,\n modified: PropTypes.bool,\n required: PropTypes.bool,\n error: PropTypes.bool\n};\n\nexport default SelectMultiple;\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../../src/molecule/select-multiple/index.js"],"names":["React","useState","useEffect","useRef","useCallback","PropTypes","classnames","NovaCompositionNavigationArrowDown","ArrowDown","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","TitledCheckbox","Provider","Checkbox","getClassState","style","themeStyle","setup","cockpit","sidebar","coorpmanager","useChoices","options","choicesRef","getChoices","current","setChoices","choice","choices","i","selected","filter","c","CMMultipleView","multiple","onChange","handleChange","checked","item","name","SelectMultiple","title","theme","placeholder","description","hint","onError","modified","required","error","disabled","skin","isOpened","updateIsOpened","nodeRef","defaultColor","black","handleOnClick","e","preventDefault","stopPropagation","prev","closeHandle","contains","target","document","addEventListener","removeEventListener","isCMTheme","lines","convert","cap","selection","_title","isActive","titleView","titleWithSelection","noValue","active","infoIconWrapper","infoIcon","descriptionLabel","hintView","__html","mainClass","default","showPlaceholder","behaviourClassName","errorIconView","errorIcon","select","noselection","iconsWrapper","flex","clicked","arrow","down","activeChoices","list","contextTypes","childContextTypes","propTypes","bool","func","string","arrayOf","oneOf"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useRef, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {map, pipe, join, filter, get, set, keys, isEmpty} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowDown as ArrowDown,\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} from '@coorpacademy/nova-icons';\nimport TitledCheckbox from '../titled-checkbox';\nimport Provider from '../../atom/provider';\nimport Checkbox from '../../atom/input-checkbox';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst themeStyle = {\n setup: style.setup,\n cockpit: style.cockpit,\n sidebar: style.sidebar,\n coorpmanager: style.coorpmanager\n};\n\nexport const useChoices = options => {\n const choicesRef = useRef(options);\n\n const getChoices = () => {\n return choicesRef.current;\n };\n\n const setChoices = choice => {\n const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());\n\n choicesRef.current = choices.filter(c => c.selected);\n };\n\n return [getChoices, setChoices];\n};\n\nconst CMMultipleView = ({multiple, choice, onChange}) => {\n const handleChange = useCallback(\n checked => {\n if (!multiple) {\n return onChange(choice);\n }\n return onChange({...choice, selected: checked});\n },\n [onChange, choice]\n );\n\n return multiple ? (\n <div className={style.item}>\n <Checkbox\n titleStyle=\"inherit\"\n checked={choice.selected}\n onChange={handleChange}\n noLabelMargins\n title={choice.name}\n />\n </div>\n ) : (\n <span className={style.item} onClick={handleChange} title={choice.name}>\n {choice.name}\n </span>\n );\n};\n\nconst SelectMultiple = (\n {\n title,\n options,\n theme,\n placeholder,\n description,\n hint,\n multiple,\n onChange,\n onError,\n modified = false,\n required = false,\n error = '',\n disabled = false\n },\n {skin}\n) => {\n const [isOpened, updateIsOpened] = useState(false);\n const [getChoices, setChoices] = useChoices(options);\n const nodeRef = useRef(null);\n\n const defaultColor = get('common.primary', skin);\n const black = get('common.black', skin);\n\n const handleOnClick = useCallback(e => {\n e.preventDefault();\n e.stopPropagation();\n\n if (!disabled) {\n updateIsOpened(prev => !prev);\n }\n }, []);\n\n const closeHandle = useCallback(e => {\n if (nodeRef && nodeRef.current && !nodeRef.current.contains(e.target)) {\n updateIsOpened(false);\n }\n }, []);\n\n const handleChange = useCallback(\n choice => {\n // if multiple prop is turned on\n // we return all selected choices\n if (multiple) {\n setChoices(choice);\n\n return onChange(getChoices());\n }\n\n return onChange(choice);\n },\n [setChoices, multiple, onChange]\n );\n\n useEffect(() => {\n document.addEventListener('click', closeHandle);\n document.addEventListener('touchstart', closeHandle);\n\n return () => {\n document.removeEventListener('click', closeHandle);\n document.removeEventListener('touchstart', closeHandle);\n };\n }, [closeHandle]);\n\n const isCMTheme = theme === 'coorpmanager';\n\n const lines = map.convert({cap: false})((choice, i) => {\n return (\n <li key={i} className={style.choice}>\n {isCMTheme ? (\n <CMMultipleView multiple={multiple} choice={{...choice, i}} onChange={handleChange} />\n ) : (\n <TitledCheckbox\n onToggle={handleChange}\n choice={{...choice, i}}\n background={defaultColor}\n />\n )}\n </li>\n );\n }, options);\n\n const selection = pipe(filter({selected: true}), map('name'), join(', '))(options);\n\n const _title = title && `${title}${required ? ' *' : ''}`;\n\n const isActive = isOpened === true;\n\n const titleView = title ? (\n <span\n className={classnames(\n style.title,\n isCMTheme && selection && style.titleWithSelection,\n isCMTheme && isEmpty(selection) && style.noValue,\n isActive && style.active\n )}\n >\n {_title}\n {isCMTheme ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null}\n </span>\n ) : null;\n\n const hintView =\n isCMTheme && !isActive ? (\n <div\n className={style.hint}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: error || hint}}\n />\n ) : null;\n\n const mainClass = theme ? themeStyle[theme] : style.default;\n const showPlaceholder = isCMTheme && isActive;\n const behaviourClassName = getClassState(\n style.default,\n style.modified,\n style.error,\n modified,\n error\n );\n\n const errorIconView = error ? <ErrorIcon onClick={onError} className={style.errorIcon} /> : null;\n\n return (\n <div\n className={classnames(mainClass, behaviourClassName, disabled && style.disabled)}\n ref={nodeRef}\n >\n <label>\n {!isCMTheme && titleView}\n <div className={style.select} title={selection || placeholder} onClick={handleOnClick}>\n {isCMTheme && titleView}\n <span\n className={classnames(\n style.selection,\n isCMTheme && isEmpty(selection) && style.noselection\n )}\n >\n {selection || !isCMTheme || (showPlaceholder && placeholder) || null}\n </span>\n {isCMTheme ? (\n <div className={style.iconsWrapper}>\n <div className={style.flex}>{errorIconView}</div>\n <div className={classnames(style.flex, isActive && style.clicked)}>\n <ArrowDown\n color={black}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n </div>\n </div>\n ) : (\n <ArrowDown\n color={black}\n className={classnames(style.arrow, {[style.down]: isActive})}\n />\n )}\n </div>\n <div className={classnames(style.choices, isActive && style.activeChoices)}>\n <ul className={style.list}>{lines}</ul>\n </div>\n </label>\n {!isCMTheme ? <div className={style.description}>{description}</div> : null}\n {hintView}\n </div>\n );\n};\n\nSelectMultiple.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nCMMultipleView.propTypes = {\n multiple: PropTypes.bool,\n choice: TitledCheckbox.propTypes.choice,\n onChange: PropTypes.func\n};\n\nSelectMultiple.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n description: PropTypes.string,\n hint: PropTypes.string,\n options: PropTypes.arrayOf(TitledCheckbox.propTypes.choice),\n onChange: PropTypes.func,\n onError: PropTypes.func,\n multiple: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n required: PropTypes.bool,\n error: PropTypes.string,\n theme: PropTypes.oneOf(keys(themeStyle))\n};\n\nexport default SelectMultiple;\n"],"file":"index.js"}