@coorpacademy/components 11.40.13 → 11.40.14-alpha.11

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Handle","style","valueOnTrack","track","x","left","right","getBoundingClientRect","_clamp","extractStateFromProps","props","multi","value","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","HammerForTestingMin","HammerForTestingMax","createElement","className","handle","animatedHandle","axis","onPan","onPanEnd","HammerForTesting","propTypes","process","env","NODE_ENV","number","bool","func","Range","Component","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","_set","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","_noop","onChangeEnd","clientX","isClickToTheLeft","closestHandle","Math","abs","render","railWidth","railLeft","railStyle","backgroundColor","width","containerWrapper","onClick","container","ref","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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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","Provider","Handle","style","valueOnTrack","track","x","left","right","getBoundingClientRect","_clamp","extractStateFromProps","props","multi","value","min","max","toNormalized","actualValue","normalizedValue","Array","isArray","map","RenderHandles","pending","onHandleMinChange","onHandleMinChangeEnd","onHandleMaxChange","onHandleMaxChangeEnd","HammerForTestingMin","HammerForTestingMax","createElement","className","handle","animatedHandle","axis","onPan","onPanEnd","HammerForTesting","propTypes","process","env","NODE_ENV","number","bool","func","Range","Component","contextTypes","skin","childContextTypes","getDerivedStateFromProps","state","constructor","context","handleClick","bind","setRefTrack","handleMinChange","handleMaxChange","handleMinChangeEnd","handleMaxChangeEnd","normalizedToActual","roundToStep","step","Math","round","e","srcEvent","stopPropagation","preventDefault","newValue","center","handleChange","valueIndex","prevValue","_set","minValue","maxValue","nextValue","triggerChange","setState","newValues","onChange","_noop","onChangeEnd","actualValues","val","clientX","isClickToTheLeft","closestHandle","abs","render","theme","minLabel","maxLabel","railWidth","railLeft","primaryColor","_getOr","railStyle","backgroundColor","width","minActualValue","maxActualValue","sliderComponent","container","ref","rail","animatedRail","containerWrapper","onClick","inputsRow","moocInput","inputHint","inputValue","oneOf","string"],"sources":["../../../src/atom/range/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, set, clamp, getOr} from 'lodash/fp';\nimport Provider from '../provider';\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, min = 0, max = 100} = props;\n\n  const toNormalized = actualValue => (actualValue - min) / (max - min);\n\n  let normalizedValue;\n  if (multi) {\n    normalizedValue = Array.isArray(value)\n      ? value.map(toNormalized)\n      : [toNormalized(0), toNormalized(value)];\n  } else {\n    normalizedValue = toNormalized(value);\n  }\n\n  return {\n    multi,\n    value: multi ? normalizedValue : [0, normalizedValue]\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    theme: PropTypes.oneOf(['default', 'mooc']),\n    min: PropTypes.number,\n    max: PropTypes.number,\n    step: PropTypes.number,\n    minLabel: PropTypes.string,\n    maxLabel: PropTypes.string,\n    HammerForTestingMin: RenderHandles.propTypes.HammerForTestingMin,\n    HammerForTestingMax: RenderHandles.propTypes.HammerForTestingMax\n  };\n\n  static contextTypes = {\n    skin: Provider.childContextTypes.skin\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    const {pending} = state;\n    if (pending) return null;\n    return extractStateFromProps(props);\n  }\n\n  constructor(props, context) {\n    super(props, context);\n    this.state = {\n      ...extractStateFromProps(props),\n      pending: false\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  normalizedToActual(normalizedValue) {\n    const {min = 0, max = 100} = this.props;\n    return min + normalizedValue * (max - min);\n  }\n\n  roundToStep(value) {\n    const {step = 1} = this.props;\n    return Math.round(value / step) * step;\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    const newValue = set(valueIndex, value, prevValue);\n    const [minValue, maxValue] = newValue;\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    const handle = pending ? onChange : onChangeEnd;\n    const actualValues = newValues.map(val => this.roundToStep(this.normalizedToActual(val)));\n    return handle(multi ? actualValues : actualValues[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 newValue = valueOnTrack(this.track, e.clientX);\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 {\n      theme = 'default',\n      minLabel = 'Min',\n      maxLabel = 'Max',\n      HammerForTestingMin,\n      HammerForTestingMax\n    } = this.props;\n\n    const railWidth = right - left;\n    const railLeft = left;\n\n    const {skin} = this.context;\n    const primaryColor = getOr('#00B0FF', 'common.primary', skin);\n    const railStyle =\n      theme === 'mooc'\n        ? {\n            backgroundColor: primaryColor,\n            width: `${railWidth * 100}%`,\n            left: `${railLeft * 100}%`\n          }\n        : {\n            width: `${railWidth * 100}%`,\n            left: `${railLeft * 100}%`\n          };\n\n    const minActualValue = this.roundToStep(this.normalizedToActual(left));\n    const maxActualValue = this.roundToStep(this.normalizedToActual(right));\n\n    const sliderComponent = (\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    );\n\n    if (theme === 'mooc') {\n      return (\n        <div data-testid=\"slider\" className={style.containerWrapper}>\n          <div onClick={this.handleClick}>{sliderComponent}</div>\n          <div className={style.inputsRow}>\n            {multi ? (\n              <div className={style.moocInput} data-testid=\"min-value\">\n                <span className={style.inputHint}>{minLabel}</span>\n                <span className={style.inputValue}>{minActualValue}</span>\n              </div>\n            ) : null}\n            <div className={style.moocInput} data-testid=\"max-value\">\n              <span className={style.inputHint}>{maxLabel}</span>\n              <span className={style.inputValue}>{maxActualValue}</span>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div data-testid=\"slider\" className={style.containerWrapper} onClick={this.handleClick}>\n        {sliderComponent}\n      </div>\n    );\n  }\n}\n\nexport default Range;\n"],"mappings":"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","ignoreList":[]}

package/es/atom/range/style.css

@@ -3,10 +3,14 @@
 @value dark from colors;
 @value white from colors;
 @value brand from colors;
+@value surface_input_neutral_strong from colors;
 
 .containerWrapper {
   padding: 15px;
   user-select: none;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
 
 .container {
@@ -55,3 +59,37 @@
   transition-duration: 0.3s;
   transition-timing-function: ease-out;
 }
+
+.inputsRow {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 18px;
+}
+
+.moocInput {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: auto;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 12px;
+  background-color: surface_input_neutral_strong;
+  font-size: 16px;
+  cursor: default;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.inputHint {
+  color: #999;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.inputValue {
+  color: #000;
+  font-weight: 600;
+  font-size: 16px;
+}
+

package/es/molecule/multi-filter-panel/index.d.ts

@@ -63,12 +63,53 @@ declare const MultiFilterPanel: {
                     onChange: import("prop-types").Validator<(...args: any[]) => any>;
                     theme: import("prop-types").Validator<string>;
                     ariaLabel: import("prop-types").Validator<string>;
+                    id: import("prop-types").Requireable<string>;
                 }> | null | undefined)[]>;
             }>>;
+        }> | import("prop-types").InferProps<{
+            type: import("prop-types").Requireable<string>;
+            options: import("prop-types").Requireable<import("prop-types").InferProps<{
+                title: import("prop-types").Validator<string>;
+                titleAriaLabel: import("prop-types").Requireable<string>;
+                onClear: import("prop-types").Validator<(...args: any[]) => any>;
+                options: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    label: import("prop-types").Validator<string>;
+                    min: import("prop-types").Validator<number>;
+                    max: import("prop-types").Validator<number>;
+                    step: import("prop-types").Requireable<number>;
+                    value: import("prop-types").Requireable<(number | null | undefined)[]>;
+                    minLabel: import("prop-types").Requireable<string>;
+                    maxLabel: import("prop-types").Requireable<string>;
+                    onChange: import("prop-types").Validator<(...args: any[]) => any>;
+                    theme: import("prop-types").Requireable<string>;
+                    selected: import("prop-types").Requireable<boolean>;
+                }>>;
+            }>>;
         }> | null | undefined> | null | undefined)[]>;
     };
     contextTypes: {
         translate: import("prop-types").Requireable<(...args: any[]) => any>;
+        skin: import("prop-types").Requireable<import("prop-types").InferProps<{
+            common: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            images: import("prop-types").Requireable<import("prop-types").InferProps<{
+                'logo-mobile': import("prop-types").Requireable<any>;
+                logo: import("prop-types").Requireable<any>;
+                'logo-email': import("prop-types").Requireable<any>;
+                login: import("prop-types").Requireable<any>;
+            }>>;
+            icons: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            mod: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+            courses: import("prop-types").Requireable<any[]>;
+            texts: import("prop-types").Requireable<{
+                [x: string]: any;
+            }>;
+        }>>;
     };
 };
 export default MultiFilterPanel;

package/es/molecule/multi-filter-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AASjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAwDlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAWjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAyDlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DhF,CAAC;AASF,eAAe,gBAAgB,CAAC"}

package/es/molecule/multi-filter-panel/index.js

@@ -1,3 +1,5 @@
+import _noop from "lodash/fp/noop";
+import _getOr from "lodash/fp/getOr";
 import _toString from "lodash/fp/toString";
 import _flatMap from "lodash/fp/flatMap";
 import _filter from "lodash/fp/filter";
@@ -5,6 +7,7 @@ import _pipe from "lodash/fp/pipe";
 import _size from "lodash/fp/size";
 import _map from "lodash/fp/map";
 import React from 'react';
+import { convert } from 'css-color-function';
 import FilterChip from '../../organism/filter-chip';
 import FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';
 import Title from '../../atom/title';
@@ -14,16 +17,13 @@ import Provider, { GetTranslateFromContext } from '../../atom/provider';
 import Chip from '../../atom/chip';
 import { COLORS } from '../../variables/colors';
 import FilterSwitch from '../../organism/filter-switch';
+import FilterRange from '../../organism/filter-range';
 import style from './style.css';
 import propTypes from './prop-types';
 // @ts-expect-error convert is not recognized by the types
 const uncappedMap = _map.convert({
   cap: false
 });
-const CLEAR_ALL_BUTTON_STYLE = {
-  fontWeight: 'normal',
-  padding: 0
-};
 const FilterSeparator = /*#__PURE__*/React.createElement("div", {
   className: style.filterSeparator
 });
@@ -39,6 +39,8 @@ const buildFilters = filterOptions => {
       return /*#__PURE__*/React.createElement(FilterCheckboxAndSearch, options);
     case 'switch':
       return /*#__PURE__*/React.createElement(FilterSwitch, options);
+    case 'range':
+      return /*#__PURE__*/React.createElement(FilterRange, options);
     default:
       return null;
   }
@@ -52,7 +54,7 @@ const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) =>
       label
     } = filterItem;
     function handleClick() {
-      return onRemoveSelectedFilter(label);
+      return onRemoveSelectedFilter(filterItem);
     }
     return /*#__PURE__*/React.createElement(Chip, {
       key: label,
@@ -69,11 +71,15 @@ const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) =>
   }));
 };
 const MultiFilterPanel = (props, context) => {
+  const {
+    skin
+  } = context;
+  const primaryColor = _getOr(COLORS.cm_primary_blue, 'common.primary', skin);
   const {
     title,
     onClearAll,
     options,
-    onRemoveSelectedFilter = false
+    onRemoveSelectedFilter = _noop
   } = props;
   const translate = GetTranslateFromContext(context);
   const allSelectedFilters = _pipe(_map('options'), _flatMap('options'), _filter(filterOptions => filterOptions.selected || filterOptions.value === true))(options);
@@ -86,31 +92,40 @@ const MultiFilterPanel = (props, context) => {
   }, options);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: style.header
-  }, /*#__PURE__*/React.createElement("div", {
+  }, hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
     className: style.titleContainer
   }, /*#__PURE__*/React.createElement(Title, {
     title: title,
     type: "form-group",
     titleSize: "standard-light-weight"
-  }), hasSelectedFilters ? /*#__PURE__*/React.createElement(Tag, {
+  }), /*#__PURE__*/React.createElement(Tag, {
     label: _toString(_size(allSelectedFilters)),
     type: "info",
-    size: "S"
-  }) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
+    size: "S",
+    customStyle: {
+      color: primaryColor,
+      backgroundColor: convert(`color(${primaryColor} lightness(92%))`)
+    }
+  })) : null, hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
     className: style.buttonContainer
   }, /*#__PURE__*/React.createElement(ButtonLink, {
-    customStyle: CLEAR_ALL_BUTTON_STYLE,
+    customStyle: {
+      fontWeight: 'normal',
+      padding: 0,
+      color: primaryColor
+    },
     label: translate('clear_all'),
     type: "text",
     "data-name": "filters-all-clear-button",
     "aria-label": "filters all clear button",
     onClick: onClearAll,
     hoverColor: COLORS.primary_600
-  })) : null), onRemoveSelectedFilter && hasSelectedFilters ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)), FilterSeparator) : null, filters);
+  })) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)), FilterSeparator) : null, filters);
 };
 MultiFilterPanel.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 MultiFilterPanel.contextTypes = {
-  translate: Provider.childContextTypes.translate
+  translate: Provider.childContextTypes.translate,
+  skin: Provider.childContextTypes.skin
 };
 export default MultiFilterPanel;
 //# sourceMappingURL=index.js.map

package/es/molecule/multi-filter-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","Chip","COLORS","FilterSwitch","style","propTypes","uncappedMap","_map","convert","cap","CLEAR_ALL_BUTTON_STYLE","fontWeight","padding","FilterSeparator","createElement","className","filterSeparator","buildFilters","filterOptions","type","options","buildAllSelectedFilterChips","selectedFilters","onRemoveSelectedFilter","selectedFiltersContainer","map","filterItem","label","handleClick","key","onClick","text","textColor","neutral_500","backgroundColor","cm_grey_150","customIcon","customStyle","height","MultiFilterPanel","props","context","title","onClearAll","translate","allSelectedFilters","_pipe","_flatMap","_filter","selected","value","hasSelectedFilters","_size","filters","i","isLastItem","Fragment","header","titleContainer","titleSize","_toString","size","buttonContainer","hoverColor","primary_600","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"sourcesContent":["import React from 'react';\nimport {map, size, pipe, filter, flatMap, toString} from 'lodash/fp';\nimport FilterChip from '../../organism/filter-chip';\nimport FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Chip from '../../atom/chip';\nimport {COLORS} from '../../variables/colors';\nimport FilterSwitch from '../../organism/filter-switch';\nimport {FilterCheckboxAndSearchOptions} from '../../organism/filter-checkbox-and-search/props-types';\nimport {FilterChipOptionsProps} from '../../organism/filter-chip/prop-types';\nimport {FilterSwitchOptionsProps} from '../../organism/filter-switch/prop-types';\nimport style from './style.css';\nimport propTypes, {MultiFilterPanelProps, FilterOptionsProps} from './prop-types';\n\ntype SelectedFilter =\n  | FilterChipOptionsProps\n  | FilterSwitchOptionsProps\n  | FilterCheckboxAndSearchOptions;\n\n// @ts-expect-error convert is not recognized by the types\nconst uncappedMap = map.convert({cap: false});\n\nconst CLEAR_ALL_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst FilterSeparator = <div className={style.filterSeparator} />;\n\nconst buildFilters = (filterOptions: FilterOptionsProps) => {\n  const {type, options} = filterOptions;\n  switch (type) {\n    case 'chip':\n      return <FilterChip {...options} />;\n    case 'checkbox':\n      return <FilterCheckboxAndSearch {...options} />;\n    case 'switch':\n      return <FilterSwitch {...options} />;\n    default:\n      return null;\n  }\n};\n\nconst buildAllSelectedFilterChips = (\n  selectedFilters: SelectedFilter[],\n  onRemoveSelectedFilter: (label: string) => void\n) => {\n  return (\n    <div className={style.selectedFiltersContainer} data-testid=\"selected-filters-container\">\n      {selectedFilters.map((filterItem: SelectedFilter) => {\n        const {label} = filterItem;\n\n        function handleClick() {\n          return onRemoveSelectedFilter(label);\n        }\n\n        return (\n          <Chip\n            key={label}\n            onClick={handleClick}\n            text={label}\n            textColor={COLORS.neutral_500}\n            backgroundColor={COLORS.cm_grey_150}\n            customIcon={'xmark'}\n            customStyle={{height: '28px', padding: '4px 8px'}}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nconst MultiFilterPanel = (props: MultiFilterPanelProps, context: WebContextValues) => {\n  const {title, onClearAll, options, onRemoveSelectedFilter = false} = props;\n  const translate = GetTranslateFromContext(context);\n  const allSelectedFilters: SelectedFilter[] = pipe(\n    map('options'),\n    flatMap('options'),\n    filter(filterOptions => filterOptions.selected || filterOptions.value === true)\n  )(options);\n  const hasSelectedFilters = size(allSelectedFilters) > 0;\n  const filters = uncappedMap((filterOptions: FilterOptionsProps, i: number) => {\n    const isLastItem = i + 1 === size(options);\n\n    return (\n      <div key={i}>\n        {buildFilters(filterOptions)}\n        {isLastItem ? null : FilterSeparator}\n      </div>\n    );\n  }, options);\n  return (\n    <>\n      <div className={style.header}>\n        <div className={style.titleContainer}>\n          <Title title={title} type=\"form-group\" titleSize=\"standard-light-weight\" />\n          {hasSelectedFilters ? (\n            <Tag label={toString(size(allSelectedFilters))} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.buttonContainer}>\n            <ButtonLink\n              customStyle={CLEAR_ALL_BUTTON_STYLE}\n              label={translate('clear_all')}\n              type=\"text\"\n              data-name=\"filters-all-clear-button\"\n              aria-label=\"filters all clear button\"\n              onClick={onClearAll}\n              hoverColor={COLORS.primary_600}\n            />\n          </div>\n        ) : null}\n      </div>\n      {onRemoveSelectedFilter && hasSelectedFilters ? (\n        <>\n          <div>{buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)}</div>\n          {FilterSeparator}\n        </>\n      ) : null}\n      {filters}\n    </>\n  );\n};\n\nMultiFilterPanel.propTypes = propTypes;\n\nMultiFilterPanel.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default MultiFilterPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","convert","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","Chip","COLORS","FilterSwitch","FilterRange","style","propTypes","uncappedMap","_map","cap","FilterSeparator","createElement","className","filterSeparator","buildFilters","filterOptions","type","options","buildAllSelectedFilterChips","selectedFilters","onRemoveSelectedFilter","selectedFiltersContainer","map","filterItem","label","handleClick","key","onClick","text","textColor","neutral_500","backgroundColor","cm_grey_150","customIcon","customStyle","height","padding","MultiFilterPanel","props","context","skin","primaryColor","_getOr","cm_primary_blue","title","onClearAll","_noop","translate","allSelectedFilters","_pipe","_flatMap","_filter","selected","value","hasSelectedFilters","_size","filters","i","isLastItem","Fragment","header","titleContainer","titleSize","_toString","size","color","buttonContainer","fontWeight","hoverColor","primary_600","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"sourcesContent":["import React from 'react';\nimport {map, size, pipe, filter, flatMap, toString, getOr, noop} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport FilterChip from '../../organism/filter-chip';\nimport FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Chip from '../../atom/chip';\nimport {COLORS} from '../../variables/colors';\nimport FilterSwitch from '../../organism/filter-switch';\nimport FilterRange from '../../organism/filter-range';\nimport {FilterCheckboxAndSearchOptions} from '../../organism/filter-checkbox-and-search/props-types';\nimport {FilterChipOptionsProps} from '../../organism/filter-chip/prop-types';\nimport {FilterSwitchOptionsProps} from '../../organism/filter-switch/prop-types';\nimport {FilterRangeOptionsProps} from '../../organism/filter-range/prop-types';\nimport style from './style.css';\nimport propTypes, {MultiFilterPanelProps, FilterOptionsProps} from './prop-types';\n\ntype SelectedFilter =\n  | FilterChipOptionsProps\n  | FilterSwitchOptionsProps\n  | FilterCheckboxAndSearchOptions\n  | FilterRangeOptionsProps;\n\n// @ts-expect-error convert is not recognized by the types\nconst uncappedMap = map.convert({cap: false});\n\nconst FilterSeparator = <div className={style.filterSeparator} />;\n\nconst buildFilters = (filterOptions: FilterOptionsProps) => {\n  const {type, options} = filterOptions;\n  switch (type) {\n    case 'chip':\n      return <FilterChip {...options} />;\n    case 'checkbox':\n      return <FilterCheckboxAndSearch {...options} />;\n    case 'switch':\n      return <FilterSwitch {...options} />;\n    case 'range':\n      return <FilterRange {...options} />;\n    default:\n      return null;\n  }\n};\n\nconst buildAllSelectedFilterChips = (\n  selectedFilters: SelectedFilter[],\n  onRemoveSelectedFilter: (filterItem: SelectedFilter) => void\n) => {\n  return (\n    <div className={style.selectedFiltersContainer} data-testid=\"selected-filters-container\">\n      {selectedFilters.map((filterItem: SelectedFilter) => {\n        const {label} = filterItem;\n        function handleClick() {\n          return onRemoveSelectedFilter(filterItem);\n        }\n\n        return (\n          <Chip\n            key={label}\n            onClick={handleClick}\n            text={label}\n            textColor={COLORS.neutral_500}\n            backgroundColor={COLORS.cm_grey_150}\n            customIcon={'xmark'}\n            customStyle={{height: '28px', padding: '4px 8px'}}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nconst MultiFilterPanel = (props: MultiFilterPanelProps, context: WebContextValues) => {\n  const {skin} = context;\n  const primaryColor = getOr(COLORS.cm_primary_blue, 'common.primary', skin);\n  const {title, onClearAll, options, onRemoveSelectedFilter = noop} = props;\n  const translate = GetTranslateFromContext(context);\n  const allSelectedFilters: SelectedFilter[] = pipe(\n    map('options'),\n    flatMap('options'),\n    filter(filterOptions => filterOptions.selected || filterOptions.value === true)\n  )(options);\n  const hasSelectedFilters = size(allSelectedFilters) > 0;\n  const filters = uncappedMap((filterOptions: FilterOptionsProps, i: number) => {\n    const isLastItem = i + 1 === size(options);\n\n    return (\n      <div key={i}>\n        {buildFilters(filterOptions)}\n        {isLastItem ? null : FilterSeparator}\n      </div>\n    );\n  }, options);\n  return (\n    <>\n      <div className={style.header}>\n        {hasSelectedFilters ? (\n          <div className={style.titleContainer}>\n            <Title title={title} type=\"form-group\" titleSize=\"standard-light-weight\" />\n            <Tag\n              label={toString(size(allSelectedFilters))}\n              type=\"info\"\n              size=\"S\"\n              customStyle={{\n                color: primaryColor,\n                backgroundColor: convert(`color(${primaryColor} lightness(92%))`)\n              }}\n            />\n          </div>\n        ) : null}\n        {hasSelectedFilters ? (\n          <div className={style.buttonContainer}>\n            <ButtonLink\n              customStyle={{fontWeight: 'normal', padding: 0, color: primaryColor}}\n              label={translate('clear_all')}\n              type=\"text\"\n              data-name=\"filters-all-clear-button\"\n              aria-label=\"filters all clear button\"\n              onClick={onClearAll}\n              hoverColor={COLORS.primary_600}\n            />\n          </div>\n        ) : null}\n      </div>\n      {hasSelectedFilters ? (\n        <>\n          <div>{buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)}</div>\n          {FilterSeparator}\n        </>\n      ) : null}\n      {filters}\n    </>\n  );\n};\n\nMultiFilterPanel.propTypes = propTypes;\n\nMultiFilterPanel.contextTypes = {\n  translate: Provider.childContextTypes.translate,\n  skin: Provider.childContextTypes.skin\n};\n\nexport default MultiFilterPanel;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/multi-filter-panel/prop-types.d.ts

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import { FilterChipProps } from '../../organism/filter-chip/prop-types';
-import { FilterCheckboxAndSearchProps } from '../../organism/filter-checkbox-and-search/props-types';
-import { FilterSwitchProps } from '../../organism/filter-switch/prop-types';
+import { FilterChipOptionsProps, FilterChipProps } from '../../organism/filter-chip/prop-types';
+import { FilterCheckboxAndSearchOptions, FilterCheckboxAndSearchProps } from '../../organism/filter-checkbox-and-search/props-types';
+import { FilterSwitchOptionsProps, FilterSwitchProps } from '../../organism/filter-switch/prop-types';
+import { FilterRangeProps, FilterRangeOptionsProps } from '../../organism/filter-range/prop-types';
 declare const propTypes: {
     title: PropTypes.Requireable<string>;
     onClearAll: PropTypes.Requireable<(...args: any[]) => any>;
@@ -62,8 +63,28 @@ declare const propTypes: {
                 onChange: PropTypes.Validator<(...args: any[]) => any>;
                 theme: PropTypes.Validator<string>;
                 ariaLabel: PropTypes.Validator<string>;
+                id: PropTypes.Requireable<string>;
             }> | null | undefined)[]>;
         }>>;
+    }> | PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        options: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Validator<string>;
+            titleAriaLabel: PropTypes.Requireable<string>;
+            onClear: PropTypes.Validator<(...args: any[]) => any>;
+            options: PropTypes.Requireable<PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+                value: PropTypes.Requireable<(number | null | undefined)[]>;
+                minLabel: PropTypes.Requireable<string>;
+                maxLabel: PropTypes.Requireable<string>;
+                onChange: PropTypes.Validator<(...args: any[]) => any>;
+                theme: PropTypes.Requireable<string>;
+                selected: PropTypes.Requireable<boolean>;
+            }>>;
+        }>>;
     }> | null | undefined> | null | undefined)[]>;
 };
 export declare type OptionsChipProps = {
@@ -78,10 +99,15 @@ export declare type OptionsSwitchProps = {
     type: 'switch';
     options: FilterSwitchProps;
 };
-export declare type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;
+export declare type OptionsRangeProps = {
+    type: 'range';
+    options: FilterRangeProps;
+};
+export declare type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps | OptionsRangeProps;
+export declare type SelectedFilter = FilterChipOptionsProps | FilterSwitchOptionsProps | FilterCheckboxAndSearchOptions | FilterRangeOptionsProps;
 export declare type MultiFilterPanelProps = {
     title: string;
-    onRemoveSelectedFilter?: (label: string) => void;
+    onRemoveSelectedFilter?: (filterItem: SelectedFilter) => void;
     onClearAll: () => void;
     options: FilterOptionsProps[];
 };

package/es/molecule/multi-filter-panel/prop-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAC3F,OAAyC,EACvC,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAC/D,OAA8B,EAAC,iBAAiB,EAAC,MAAM,yCAAyC,CAAC;AAEjG,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE9F,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAC1B,sBAAsB,EACtB,eAAe,EAChB,MAAM,uCAAuC,CAAC;AAC/C,OAAyC,EACvC,8BAA8B,EAC9B,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAC/D,OAA8B,EAAC,wBAAwB,EAAE,iBAAiB,EAAC,MAAM,yCAAyC,CAAC;AAC3H,OAA6B,EAAC,gBAAgB,EAAE,uBAAuB,EAAC,MAAM,wCAAwC,CAAC;AAEvH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBd,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,oBAAY,iBAAiB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,gBAAgB,CAAC;CAC3B,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAElH,oBAAY,cAAc,GACtB,sBAAsB,GACtB,wBAAwB,GACxB,8BAA8B,GAC9B,uBAAuB,CAAC;AAE5B,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,KAAK,IAAI,CAAC;IAC9D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/molecule/multi-filter-panel/prop-types.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import filterChipProptypes from '../../organism/filter-chip/prop-types';
 import filterCheckboxAndSearchProptypes from '../../organism/filter-checkbox-and-search/props-types';
 import filterSwitchProptypes from '../../organism/filter-switch/prop-types';
+import filterRangeProptypes from '../../organism/filter-range/prop-types';
 const propTypes = {
   title: PropTypes.string,
   onClearAll: PropTypes.func,
@@ -15,6 +16,9 @@ const propTypes = {
   }), PropTypes.shape({
     type: PropTypes.oneOf(['switch']),
     options: PropTypes.shape(filterSwitchProptypes)
+  }), PropTypes.shape({
+    type: PropTypes.oneOf(['range']),
+    options: PropTypes.shape(filterRangeProptypes)
   })]))
 };
 export default propTypes;

package/es/molecule/multi-filter-panel/prop-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","filterSwitchProptypes","propTypes","title","string","onClearAll","func","onRemoveSelectedFilter","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {FilterChipProps} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n  FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\nimport filterSwitchProptypes, {FilterSwitchProps} from '../../organism/filter-switch/prop-types';\n\nconst propTypes = {\n  title: PropTypes.string,\n  onClearAll: PropTypes.func,\n  onRemoveSelectedFilter: PropTypes.func,\n  options: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape({\n        type: PropTypes.oneOf(['chip']),\n        options: PropTypes.shape(filterChipProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['checkbox']),\n        options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['switch']),\n        options: PropTypes.shape(filterSwitchProptypes)\n      })\n    ])\n  )\n};\n\nexport type OptionsChipProps = {\n  type: 'chip';\n  options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n  type: 'checkbox';\n  options: FilterCheckboxAndSearchProps;\n};\n\nexport type OptionsSwitchProps = {\n  type: 'switch';\n  options: FilterSwitchProps;\n};\n\nexport type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;\n\nexport type MultiFilterPanelProps = {\n  title: string;\n  onRemoveSelectedFilter?: (label: string) => void;\n  onClearAll: () => void;\n  options: FilterOptionsProps[];\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAAyB,uCAAuC;AAC1F,OAAOC,gCAAgC,MAEhC,uDAAuD;AAC9D,OAAOC,qBAAqB,MAA2B,yCAAyC;AAEhG,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAEL,SAAS,CAACM,MAAM;EACvBC,UAAU,EAAEP,SAAS,CAACQ,IAAI;EAC1BC,sBAAsB,EAAET,SAAS,CAACQ,IAAI;EACtCE,OAAO,EAAEV,SAAS,CAACW,OAAO,CACxBX,SAAS,CAACY,SAAS,CAAC,CAClBZ,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/BL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACZ,mBAAmB;EAC9C,CAAC,CAAC,EACFD,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACnCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACX,gCAAgC;EAC3D,CAAC,CAAC,EACFF,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACV,qBAAqB;EAChD,CAAC,CAAC,CACH,CACH;AACF,CAAC;AA0BD,eAAeC,SAAS","ignoreList":[]}
+{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","filterSwitchProptypes","filterRangeProptypes","propTypes","title","string","onClearAll","func","onRemoveSelectedFilter","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {\n  FilterChipOptionsProps,\n  FilterChipProps\n} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n  FilterCheckboxAndSearchOptions,\n  FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\nimport filterSwitchProptypes, {FilterSwitchOptionsProps, FilterSwitchProps} from '../../organism/filter-switch/prop-types';\nimport filterRangeProptypes, {FilterRangeProps, FilterRangeOptionsProps} from '../../organism/filter-range/prop-types';\n\nconst propTypes = {\n  title: PropTypes.string,\n  onClearAll: PropTypes.func,\n  onRemoveSelectedFilter: PropTypes.func,\n  options: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape({\n        type: PropTypes.oneOf(['chip']),\n        options: PropTypes.shape(filterChipProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['checkbox']),\n        options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['switch']),\n        options: PropTypes.shape(filterSwitchProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['range']),\n        options: PropTypes.shape(filterRangeProptypes)\n      })\n    ])\n  )\n};\n\nexport type OptionsChipProps = {\n  type: 'chip';\n  options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n  type: 'checkbox';\n  options: FilterCheckboxAndSearchProps;\n};\n\nexport type OptionsSwitchProps = {\n  type: 'switch';\n  options: FilterSwitchProps;\n};\n\nexport type OptionsRangeProps = {\n  type: 'range';\n  options: FilterRangeProps;\n};\n\nexport type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps | OptionsRangeProps;\n\nexport type SelectedFilter =\n  | FilterChipOptionsProps\n  | FilterSwitchOptionsProps\n  | FilterCheckboxAndSearchOptions\n  | FilterRangeOptionsProps;\n\nexport type MultiFilterPanelProps = {\n  title: string;\n  onRemoveSelectedFilter?: (filterItem: SelectedFilter) => void;\n  onClearAll: () => void;\n  options: FilterOptionsProps[];\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAGnB,uCAAuC;AAC9C,OAAOC,gCAAgC,MAGhC,uDAAuD;AAC9D,OAAOC,qBAAqB,MAAqD,yCAAyC;AAC1H,OAAOC,oBAAoB,MAAmD,wCAAwC;AAEtH,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAEN,SAAS,CAACO,MAAM;EACvBC,UAAU,EAAER,SAAS,CAACS,IAAI;EAC1BC,sBAAsB,EAAEV,SAAS,CAACS,IAAI;EACtCE,OAAO,EAAEX,SAAS,CAACY,OAAO,CACxBZ,SAAS,CAACa,SAAS,CAAC,CAClBb,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/BL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACb,mBAAmB;EAC9C,CAAC,CAAC,EACFD,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACnCL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACZ,gCAAgC;EAC3D,CAAC,CAAC,EACFF,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjCL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACX,qBAAqB;EAChD,CAAC,CAAC,EACFH,SAAS,CAACc,KAAK,CAAC;IACdC,IAAI,EAAEf,SAAS,CAACgB,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;IAChCL,OAAO,EAAEX,SAAS,CAACc,KAAK,CAACV,oBAAoB;EAC/C,CAAC,CAAC,CACH,CACH;AACF,CAAC;AAqCD,eAAeC,SAAS","ignoreList":[]}

package/es/molecule/questions/question-range/index.d.ts

@@ -32,6 +32,10 @@ declare namespace QuestionRange {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         onChangeEnd: PropTypes.Requireable<(...args: any[]) => any>;
         multi: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<string>;
+        min: PropTypes.Requireable<number>;
+        max: PropTypes.Requireable<number>;
+        step: PropTypes.Requireable<number>;
         HammerForTestingMin: PropTypes.Requireable<PropTypes.InferProps<{
             on: PropTypes.Requireable<(...args: any[]) => any>;
             destroy: PropTypes.Requireable<(...args: any[]) => any>;
@@ -42,7 +46,6 @@ declare namespace QuestionRange {
             destroy: PropTypes.Requireable<(...args: any[]) => any>;
             stop: PropTypes.Requireable<(...args: any[]) => any>;
         }>>;
-        value: PropTypes.Requireable<NonNullable<number | (number | null | undefined)[] | null | undefined>>;
     };
 }
 import PropTypes from "prop-types";

package/es/molecule/quick-filters/index.js

@@ -175,7 +175,9 @@ const QuickFilters = ({
         wrapperSize: 20
       },
       "aria-label": ariaLabel
-    }), /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("span", {
+      className: style.filterLabel
+    }, label), /*#__PURE__*/React.createElement("div", {
       className: style.bar,
       style: {
         background: primarySkinColor

package/es/molecule/quick-filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,MAAM,EAAEC,SAAS,QAAO,OAAO;AAC3D,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAAQC,MAAM,QAAO,wBAAwB;AAC7C,OAAOC,UAAU,MAAM,wBAAwB;AAG/C,OAAOC,QAAQ,IAAGC,kBAAkB,QAAO,qBAAqB;AAChE,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAA2BC,SAAS,QAAO,SAAS;AAEpD,MAAMC,iBAAiB,GAAG,GAAG;AAC7B,MAAMC,gBAAgB,GAAG,CAAC,GAAG;AAC7B,OAAO,MAAMC,YAAY,GAAGA,CAACC,SAAiB,EAAEC,OAAwC,KAAK;EAC3F,IAAIA,OAAO,CAACC,OAAO,EAAE;IACnBD,OAAO,CAACC,OAAO,CAACC,QAAQ,CAAC;MACvBC,IAAI,EAAEJ,SAAS;MACfK,QAAQ,EAAE;IACZ,CAAC,CAAC;EACJ;AACF,CAAC;AAED,MAAMC,eAAe,GAAGA,CACtBC,iBAA8C,EAC9CC,gBAAwB,KACrB;EACH,IAAI,CAACD,iBAAiB,EAAE,OAAO,IAAI;EACnC,MAAM;IAACE,GAAG;IAAE,GAAGC;EAAI,CAAC,GAAGH,iBAAiB;EACxC,oBACEtB,KAAA,CAAA0B,aAAA;IACEC,SAAS,EAAEjB,KAAK,CAACkB,mBAAoB;IACrClB,KAAK,EAAE;MAACmB,WAAW,EAAEL,GAAG,EAAEM,KAAK,GAAGP,gBAAgB,GAAG;IAAa;EAAE,gBAEpEvB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAEjB,KAAK,CAACqB;EAAa,gBACjC/B,KAAA,CAAA0B,aAAA,CAACnB,UAAU,EAAAyB,QAAA,KACLP,IAAI;IACRQ,IAAI,EAAE;MACJC,QAAQ,EAAE,MAAM;MAChBC,MAAM,EAAE;QACNC,IAAI,EAAE,SAAS;QACfC,IAAI,EAAE,EAAE;QACRC,KAAK,EAAEd,GAAG,GAAGlB,MAAM,CAACiC,WAAW,GAAGjC,MAAM,CAACkC;MAC3C;IACF,CAAE;IACFhB,GAAG,EACDA,GAAG,GACC;MACEM,KAAK,EAAEN,GAAG,CAACM,KAAK;MAChBW,WAAW,EAAE;QAACC,eAAe,EAAEnB,gBAAgB;QAAEe,KAAK,EAAE;MAAS;IACnE,CAAC,GACDK,SACL;IACDhB,SAAS,EAAEjB,KAAK,CAACqB,YAAa;IAC9B,eAAY,2BAA2B;IACvCU,WAAW,EAAE;MAACG,YAAY,EAAE;IAAM;EAAE,EACrC,CACE,CACF,CAAC;AAEV,CAAC;AAED,MAAMC,YAAY,GAAGA,CACnB;EAACC,aAAa;EAAEC,aAAa;EAAEhB,YAAY;EAAEiB;AAAyC,CAAC,EACvFC,OAAyB,KACtB;EACH,MAAMC,IAAI,GAAGzC,kBAAkB,CAACwC,OAAO,CAAC;EACxC,MAAM1B,gBAAgB,GAAG4B,IAAA,CAAI,gBAAgB,EAAED,IAAI,CAAC;EACpD,MAAM;IAACE,YAAY;IAAEC,eAAe;IAAEC,eAAe;IAAEC,gBAAgB;IAAEC;EAAc,CAAC,GACtFV,aAAa;EACf,MAAMW,cAAc,GAAGzD,KAAK,CAACE,MAAM,CAAiB,IAAI,CAAC;EACzD,MAAMwD,WAAW,GAAGxD,MAAM,CAAiB,IAAI,CAAC;EAChD,MAAMyD,UAAU,GAAGzD,MAAM,CAAiB,IAAI,CAAC;EAE/C,MAAM0D,iBAAiB,GAAG3D,WAAW,CAAC,MAAM;IAC1Ca,YAAY,CAACF,iBAAiB,EAAE6C,cAAc,CAAC;EACjD,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EACpB,MAAMI,gBAAgB,GAAG5D,WAAW,CAAC,MAAM;IACzCa,YAAY,CAACD,gBAAgB,EAAE4C,cAAc,CAAC;EAChD,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EACpBtD,SAAS,CAAC,MAAM;IACd,MAAM2D,IAAI,GAAGL,cAAc,CAACxC,OAAO;IACnC,MAAM8C,WAAW,GAAGL,WAAW,CAACzC,OAAO;IACvC,MAAM+C,UAAU,GAAGL,UAAU,CAAC1C,OAAO;IACrC,2BAA2B;IAC3B,IAAI,CAAC6C,IAAI,IAAI,CAACE,UAAU,IAAI,CAACD,WAAW,EAAE;IAE1C,MAAME,MAAM,GAAGA,CAAA,KAAM;MACnB,MAAMC,eAAe,GAAGH,WAAW,CAACI,WAAW;MAC/C,MAAMC,kBAAkB,GACtBN,IAAI,CAACO,UAAU,GAAGP,IAAI,CAACQ,WAAW,GAAGR,IAAI,CAACS,WAAW,GAAGL,eAAe;MACzE,MAAMM,iBAAiB,GAAGV,IAAI,CAACO,UAAU,GAAG,CAAC;MAC7CN,WAAW,CAACrD,KAAK,CAAC+D,UAAU,GAAGL,kBAAkB,GAAG,SAAS,GAAG,QAAQ;MACxEL,WAAW,CAACrD,KAAK,CAACgE,OAAO,GAAGN,kBAAkB,GAAG,GAAG,GAAG,GAAG;MAC1DJ,UAAU,CAACtD,KAAK,CAAC+D,UAAU,GAAGD,iBAAiB,GAAG,SAAS,GAAG,QAAQ;MACtER,UAAU,CAACtD,KAAK,CAACgE,OAAO,GAAGF,iBAAiB,GAAG,GAAG,GAAG,GAAG;IAC1D,CAAC;IAEDV,IAAI,CAACa,gBAAgB,CAAC,QAAQ,EAAEV,MAAM,CAAC;IACvCW,MAAM,CAACD,gBAAgB,CAAC,QAAQ,EAAEV,MAAM,CAAC;IACzCA,MAAM,CAAC,CAAC;IACR,OAAO,MAAM;MACXH,IAAI,CAACe,mBAAmB,CAAC,QAAQ,EAAEZ,MAAM,CAAC;MAC1CW,MAAM,CAACC,mBAAmB,CAAC,QAAQ,EAAEZ,MAAM,CAAC;IAC9C,CAAC;EACH,CAAC,EAAE,CAAClB,aAAa,CAAC,CAAC;EAEnB,oBACE/C,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAEjB,KAAK,CAACoE,oBAAqB;IAAC,aAAU;EAAQ,gBAC5D9E,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAEjB,KAAK,CAACqE,eAAgB;IAACC,GAAG,EAAErB,UAAW;IAACjD,KAAK,EAAE;MAAC+D,UAAU,EAAE;IAAQ;EAAE,gBACpFzE,KAAA,CAAA0B,aAAA,CAACnB,UAAU;IACT0B,IAAI,EAAE;MAACC,QAAQ,EAAE,MAAM;MAAEC,MAAM,EAAE;QAACC,IAAI,EAAE,YAAY;QAAEC,IAAI,EAAE;MAAE;IAAC,CAAE;IACjE4C,OAAO,EAAEpB,gBAAiB;IAC1BlC,SAAS,EAAEjB,KAAK,CAACqE,eAAgB;IACjCtC,WAAW,EAAE;MAACyC,MAAM,EAAE;IAAM,CAAE;IAC9B,eAAY;EAAoB,CACjC,CACE,CAAC,eACNlF,KAAA,CAAA0B,aAAA;IACEC,SAAS,EAAEjB,KAAK,CAACyE,WAAY;IAC7BH,GAAG,EAAEvB,cAAe;IACpB,eAAY,sBAAsB;IAClC,cAAYT;EAAuB,gBAEnChD,KAAA,CAAA0B,aAAA;IACE,eAAY,YAAY;IACxBC,SAAS,EAAEvB,UAAU,CAACM,KAAK,CAAC0E,aAAa,EAAE9B,eAAe,IAAI5C,KAAK,CAAC2E,cAAc,CAAE;IACpFJ,OAAO,EAAEzB;EAAe,gBAExBxD,KAAA,CAAA0B,aAAA,CAACrB,MAAM;IACLiF,QAAQ,EAAEjC,eAAgB;IAC1BhB,IAAI,EAAE;MAACkD,MAAM,EAAE,EAAE;MAAEC,WAAW,EAAE;IAAE,CAAE;IACpC,cAAYjC;EAAiB,CAC9B,CAAC,eACFvD,KAAA,CAAA0B,aAAA;IAAMC,SAAS,EAAEjB,KAAK,CAAC+E;EAAY,GAAErC,YAAmB,CAAC,eACzDpD,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAEjB,KAAK,CAACgF,GAAI;IAAChF,KAAK,EAAE;MAACiF,UAAU,EAAEpE;IAAgB;EAAE,CAAE,CAChE,CAAC,eACNvB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAEjB,KAAK,CAACkF;EAAgB,CAAE,CAAC,eACzC5F,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAEjB,KAAK,CAACmF;EAAiB,GACpC9C,aAAa,CAAC+C,GAAG,CAAC,CAACC,YAAY,EAAEC,GAAG,KAAK;IACxC,MAAM;MAACV,QAAQ;MAAExD,KAAK;MAAEmE,QAAQ;MAAEC,KAAK;MAAEjB,OAAO;MAAEkB;IAAS,CAAC,GAAGJ,YAAY;IAC3E,oBACE/F,KAAA,CAAA0B,aAAA;MACE0E,GAAG,EAAEJ,GAAI;MACTrE,SAAS,EAAEvB,UAAU,CAACM,KAAK,CAACqF,YAAY,EAAEE,QAAQ,IAAIvF,KAAK,CAAC2E,cAAc,CAAE;MAC5E,eAAa,UAAUa,KAAK,IAAIF,GAAG,EAAG;MACtCtF,KAAK,EAAE;QAAC2F,iBAAiB,EAAE9E;MAAgB,CAAE;MAC7C0D,OAAO,EAAEA;IAAQ,gBAEjBjF,KAAA,CAAA0B,aAAA,CAACrB,MAAM;MACLiF,QAAQ,EAAEA,QAAS;MACnBjD,IAAI,EAAE;QAACkD,MAAM,EAAE,EAAE;QAAEC,WAAW,EAAE;MAAE,CAAE;MACpC,cAAYW;IAAU,CACvB,CAAC,eACFnG,KAAA,CAAA0B,aAAA,eAAOI,KAAY,CAAC,eACpB9B,KAAA,CAAA0B,aAAA;MAAKC,SAAS,EAAEjB,KAAK,CAACgF,GAAI;MAAChF,KAAK,EAAE;QAACiF,UAAU,EAAEpE;MAAgB;IAAE,CAAE,CAChE,CAAC;EAEV,CAAC,CAAC,eACFvB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAEjB,KAAK,CAAC4F,gBAAiB;IAACtB,GAAG,EAAEtB,WAAY;IAAChD,KAAK,EAAE;MAAC+D,UAAU,EAAE;IAAQ;EAAE,gBACtFzE,KAAA,CAAA0B,aAAA,CAACnB,UAAU;IACT0B,IAAI,EAAE;MACJC,QAAQ,EAAE,MAAM;MAChBC,MAAM,EAAE;QACNC,IAAI,EAAE,aAAa;QACnBC,IAAI,EAAE;MACR;IACF,CAAE;IACFV,SAAS,EAAEjB,KAAK,CAAC4F,gBAAiB;IAClCrB,OAAO,EAAErB,iBAAkB;IAC3BnB,WAAW,EAAE;MAACyC,MAAM,EAAE;IAAM,CAAE;IAC9B,eAAY;EAAqB,CAClC,CACE,CACF,CACF,CAAC,EACL7D,eAAe,CAACU,YAAY,EAAER,gBAAgB,CAC5C,CAAC;AAEV,CAAC;AAEDsB,YAAY,CAAClC,SAAS,GAAA4F,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAG9F,SAAS;AAClCkC,YAAY,CAAC6D,YAAY,GAAG;EAC1BxD,IAAI,EAAE1C,QAAQ,CAACmG,iBAAiB,CAACzD;AACnC,CAAC;AACD,eAAeL,YAAY","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","Provider","GetSkinFromContext","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","primarySkinColor","tag","rest","createElement","className","filterButtonWrapper","borderColor","label","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","backgroundColor","undefined","borderRadius","QuickFilters","primaryOption","filterOptions","filterOptionsAriaLabel","context","skin","_get","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","showingRightButton","scrollLeft","clientWidth","scrollWidth","showingLeftButton","visibility","opacity","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","filterLabel","bar","background","filterSeparator","filtersContainer","map","filterOption","idx","selected","value","ariaLabel","key","borderBottomColor","rightArrowButton","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport {get} from 'lodash/fp';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetSkinFromContext} from '../../atom/provider';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 400;\nconst SCROLL_LEFT_SIZE = -400;\nexport const handleScroll = (direction: number, listRef: React.RefObject<HTMLDivElement>) => {\n  if (listRef.current) {\n    listRef.current.scrollBy({\n      left: direction,\n      behavior: 'smooth'\n    });\n  }\n};\n\nconst getFilterButton = (\n  filterButtonProps: ButtonLinkProps | undefined,\n  primarySkinColor: string\n) => {\n  if (!filterButtonProps) return null;\n  const {tag, ...rest} = filterButtonProps;\n  return (\n    <div\n      className={style.filterButtonWrapper}\n      style={{borderColor: tag?.label ? primarySkinColor : 'transparent'}}\n    >\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...rest}\n          icon={{\n            position: 'left',\n            faIcon: {\n              name: 'sliders',\n              size: 14,\n              color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500\n            }\n          }}\n          tag={\n            tag\n              ? {\n                  label: tag.label,\n                  customStyle: {backgroundColor: primarySkinColor, color: '#FFFFFF'}\n                }\n              : undefined\n          }\n          className={style.filterButton}\n          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = (\n  {primaryOption, filterOptions, filterButton, filterOptionsAriaLabel}: QuickFiltersProps,\n  context: WebContextValues\n) => {\n  const skin = GetSkinFromContext(context);\n  const primarySkinColor = get('common.primary', skin);\n  const {defaultLabel, defaultIconName, defaultSelected, defaultAriaLabel, onDefaultClick} =\n    primaryOption;\n  const filtersListRef = React.useRef<HTMLDivElement>(null);\n  const rightBtnRef = useRef<HTMLDivElement>(null);\n  const leftBtnRef = useRef<HTMLDivElement>(null);\n\n  const handleScrollRight = useCallback(() => {\n    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  const handleScrollLeft = useCallback(() => {\n    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);\n  }, [filtersListRef]);\n  useEffect(() => {\n    const list = filtersListRef.current;\n    const rightButton = rightBtnRef.current;\n    const leftButton = leftBtnRef.current;\n    /* istanbul ignore next */ // not testable without complex mocking useRef\n    if (!list || !leftButton || !rightButton) return;\n\n    const update = () => {\n      const rightArrowWidth = rightButton.offsetWidth;\n      const showingRightButton =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth;\n      const showingLeftButton = list.scrollLeft > 0;\n      rightButton.style.visibility = showingRightButton ? 'visible' : 'hidden';\n      rightButton.style.opacity = showingRightButton ? '1' : '0';\n      leftButton.style.visibility = showingLeftButton ? 'visible' : 'hidden';\n      leftButton.style.opacity = showingLeftButton ? '1' : '0';\n    };\n\n    list.addEventListener('scroll', update);\n    window.addEventListener('resize', update);\n    update();\n    return () => {\n      list.removeEventListener('scroll', update);\n      window.removeEventListener('resize', update);\n    };\n  }, [filterOptions]);\n\n  return (\n    <div className={style.filtersMainContainer} data-name=\"search\">\n      <div className={style.leftArrowButton} ref={leftBtnRef} style={{visibility: 'hidden'}}>\n        <ButtonLink\n          icon={{position: 'left', faIcon: {name: 'arrow-left', size: 15}}}\n          onClick={handleScrollLeft}\n          className={style.leftArrowButton}\n          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n        />\n      </div>\n      <div\n        className={style.filtersList}\n        ref={filtersListRef}\n        data-testid=\"filters-options-list\"\n        aria-label={filterOptionsAriaLabel}\n      >\n        <div\n          data-testid=\"all-option\"\n          className={classNames(style.defaultOption, defaultSelected && style.filterSelected)}\n          onClick={onDefaultClick}\n        >\n          <FaIcon\n            iconName={defaultIconName}\n            size={{faSize: 20, wrapperSize: 20}}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\n          <div className={style.bar} style={{background: primarySkinColor}} />\n        </div>\n        <div className={style.filterSeparator} />\n        <div className={style.filtersContainer}>\n          {filterOptions.map((filterOption, idx) => {\n            const {iconName, label, selected, value, onClick, ariaLabel} = filterOption;\n            return (\n              <div\n                key={idx}\n                className={classNames(style.filterOption, selected && style.filterSelected)}\n                data-testid={`filter-${value}-${idx}`}\n                style={{borderBottomColor: primarySkinColor}}\n                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span className={style.filterLabel}>{label}</span>\n                <div className={style.bar} style={{background: primarySkinColor}} />\n              </div>\n            );\n          })}\n          <div className={style.rightArrowButton} ref={rightBtnRef} style={{visibility: 'hidden'}}>\n            <ButtonLink\n              icon={{\n                position: 'left',\n                faIcon: {\n                  name: 'arrow-right',\n                  size: 15\n                }\n              }}\n              className={style.rightArrowButton}\n              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton, primarySkinColor)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nQuickFilters.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/quick-filters/style.css

@@ -113,6 +113,8 @@
 
 .filterLabel {
     min-width: 70px;
+    user-select: none;
+    text-align: center;
 }
 
 .filterSeparator {