@coorpacademy/components 11.40.0 → 11.40.1-alpha.5

package/es/atom/button-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAOA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA6D7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IzC,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/index.tsx"],"names":[],"mappings":";AAQA,OAAkB,EAAC,eAAe,EAAW,MAAM,SAAS,CAAC;AA8D7D,QAAA,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJzC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/es/atom/button-link/index.js

@@ -6,9 +6,10 @@ import Link from '../link';
 import FaIcon, { DEFAULT_ICON_COLOR } from '../icon';
 import { ICONS } from '../../util/button-icons';
 import ToolTip from '../tooltip';
+import Tag from '../tag';
 import propTypes from './types';
 import style from './style.css';
-const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor, customLabelClassName) => {
+const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverColor, customLabelClassName, tag) => {
   const {
     type,
     faIcon,
@@ -50,7 +51,7 @@ const getButtonContent = (icon, content, hovered, hoverBackgroundColor, hoverCol
     className: style.buttonContent
   }, position === 'left' ? iconComponent : null, content ? /*#__PURE__*/React.createElement("span", {
     className: style.label
-  }, content) : null, position === 'right' ? iconComponent : null);
+  }, content) : null, tag ? /*#__PURE__*/React.createElement(Tag, tag) : null, position === 'right' ? iconComponent : null);
 };
 const ButtonLink = props => {
   const {
@@ -73,7 +74,8 @@ const ButtonLink = props => {
     className,
     customStyle,
     useTitle = true,
-    customLabelClassName
+    customLabelClassName,
+    tag
   } = props;
   const styleButton = classnames(link && style.link, className, style.button, !label && style.iconButton, type === 'primary' && style.primary, type === 'secondary' && style.secondary, type === 'tertiary' && style.tertiary, type === 'text' && style.text, type === 'dangerous' && style.dangerous, disabled && style.disabled);
   const [hovered, setHovered] = useState(false);
@@ -121,7 +123,7 @@ const ButtonLink = props => {
       hoverBackgroundColor: hoverBackgroundColor,
       onMouseEnter: handleMouseOver,
       onMouseLeave: handleMouseLeave
-    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, customLabelClassName), renderToolTip());
+    }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, customLabelClassName, tag), renderToolTip());
   }
   return /*#__PURE__*/React.createElement("button", _extends({}, useTitle && {
     title: ariaLabel || label
@@ -142,7 +144,7 @@ const ButtonLink = props => {
     onMouseLeave: handleMouseLeave,
     tabIndex: 0,
     disabled: disabled
-  }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor), renderToolTip());
+  }), getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor, customLabelClassName, tag), renderToolTip());
 };
 ButtonLink.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 export default ButtonLink;

package/es/atom/button-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","DEFAULT_ICON_COLOR","ICONS","ToolTip","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","customLabelClassName","type","faIcon","position","Icon","createElement","className","buttonContent","label","dangerouslySetInnerHTML","__html","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon, {DEFAULT_ICON_COLOR, IconProps} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string,\n  customLabelClassName?: string\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={(style.buttonContent, customLabelClassName)}>\n        {typeof content === 'string' ? (\n          <span\n            className={(style.label, customLabelClassName)}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: content}}\n          />\n        ) : (\n          <span className={(style.label, customLabelClassName)}>{content}</span>\n        )}\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...({\n        iconName: faIcon.name,\n        iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? null\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      } as IconProps)}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    tooltipText,\n    tooltipPlacement = 'left',\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true,\n    customLabelClassName\n  } = props;\n  const styleButton = classnames(\n    link && style.link,\n    className,\n    style.button,\n    !label && style.iconButton,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n    [tooltipText, ariaLabel]\n  );\n\n  const renderToolTip = () => {\n    const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n    if (!closeToolTipInformationTextAriaLabel) return null;\n    return (\n      <ToolTip\n        fontSize={12}\n        anchorId=\"button-icon\"\n        toolTipIsVisible={hovered}\n        placement={tooltipPlacement}\n        TooltipContent={TooltipContent}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      />\n    );\n  };\n\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        className={styleButton}\n        style={customStyle}\n        data-name={dataName}\n        data-testid={dataTestId}\n        onClick={handleOnClick}\n        aria-label={ariaLabel || label}\n        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseEnter={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(\n          icon,\n          content ?? label,\n          hovered,\n          hoverBackgroundColor,\n          hoverColor,\n          customLabelClassName\n        )}\n        {renderToolTip()}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      {...(ariaLabel && !label\n        ? {\n            'data-for': 'button-icon',\n            'data-tip': hovered\n          }\n        : {})}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(icon, content ?? label, hovered, hoverBackgroundColor, hoverColor)}\n      {renderToolTip()}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useState","useMemo","classnames","Link","FaIcon","DEFAULT_ICON_COLOR","ICONS","ToolTip","Tag","propTypes","style","getButtonContent","icon","content","hovered","hoverBackgroundColor","hoverColor","customLabelClassName","tag","type","faIcon","position","Icon","createElement","className","buttonContent","label","dangerouslySetInnerHTML","__html","iconComponent","iconName","name","iconColor","color","backgroundColor","size","faSize","wrapperSize","customStyle","theme","ButtonLink","props","usage","disabled","dataName","dataTestId","ariaLabel","tooltipText","tooltipPlacement","link","onClick","_noop","onKeyDown","useTitle","styleButton","button","iconButton","primary","secondary","tertiary","text","dangerous","setHovered","handleOnClick","event","handleOnKeyDown","handleMouseOver","handleMouseLeave","TooltipContent","tooltipContentWrapper","renderToolTip","closeToolTipInformationTextAriaLabel","fontSize","anchorId","toolTipIsVisible","placement","_customStyle","_extends","title","onMouseEnter","onMouseLeave","onMouseOver","tabIndex","process","env","NODE_ENV"],"sources":["../../../src/atom/button-link/index.tsx"],"sourcesContent":["import React, {useCallback, useState, useMemo} from 'react';\nimport {noop} from 'lodash/fp';\nimport classnames from 'classnames';\nimport Link from '../link';\nimport FaIcon, {DEFAULT_ICON_COLOR, IconProps} from '../icon';\nimport {ICONS} from '../../util/button-icons';\nimport ToolTip from '../tooltip';\nimport Tag from '../tag';\nimport propTypes, {ButtonLinkProps, IconType} from './types';\nimport style from './style.css';\n\nconst getButtonContent = (\n  icon?: IconType,\n  content?: string | React.ReactNode,\n  hovered?: boolean,\n  hoverBackgroundColor?: string,\n  hoverColor?: string,\n  customLabelClassName?: string,\n  tag?: React.ComponentProps<typeof Tag>\n) => {\n  const {type, faIcon, position} = icon || {type: '', position: ''};\n  const Icon = type && ICONS[type];\n\n  if (!Icon && !faIcon) {\n    return (\n      <div className={(style.buttonContent, customLabelClassName)}>\n        {typeof content === 'string' ? (\n          <span\n            className={(style.label, customLabelClassName)}\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{__html: content}}\n          />\n        ) : (\n          <span className={(style.label, customLabelClassName)}>{content}</span>\n        )}\n      </div>\n    );\n  }\n\n  const iconComponent = faIcon ? (\n    <FaIcon\n      {...({\n        iconName: faIcon.name,\n        iconColor: hovered && hoverColor ? hoverColor : faIcon.color ?? DEFAULT_ICON_COLOR,\n        // eslint-disable-next-line no-nested-ternary\n        backgroundColor: !faIcon?.backgroundColor\n          ? null\n          : hovered && hoverBackgroundColor\n          ? hoverBackgroundColor\n          : faIcon.backgroundColor,\n        size: {\n          faSize: faIcon.size,\n          wrapperSize: faIcon.size\n        },\n        customStyle: faIcon.customStyle\n      } as IconProps)}\n    />\n  ) : (\n    <Icon className={style.icon} theme=\"coorpmanager\" />\n  );\n  return (\n    <div className={style.buttonContent}>\n      {position === 'left' ? iconComponent : null}\n      {content ? <span className={style.label}>{content}</span> : null}\n      {tag ? <Tag {...tag} /> : null}\n      {position === 'right' ? iconComponent : null}\n    </div>\n  );\n};\n\nconst ButtonLink = (props: ButtonLinkProps) => {\n  const {\n    type,\n    usage = 'button',\n    label,\n    content,\n    hoverBackgroundColor,\n    hoverColor,\n    disabled = false,\n    icon,\n    'data-name': dataName,\n    'data-testid': dataTestId = 'button-link',\n    'aria-label': ariaLabel,\n    tooltipText,\n    tooltipPlacement = 'left',\n    link,\n    onClick = noop,\n    onKeyDown = noop,\n    className,\n    customStyle,\n    useTitle = true,\n    customLabelClassName,\n    tag\n  } = props;\n  const styleButton = classnames(\n    link && style.link,\n    className,\n    style.button,\n    !label && style.iconButton,\n    type === 'primary' && style.primary,\n    type === 'secondary' && style.secondary,\n    type === 'tertiary' && style.tertiary,\n    type === 'text' && style.text,\n    type === 'dangerous' && style.dangerous,\n    disabled && style.disabled\n  );\n\n  const [hovered, setHovered] = useState(false);\n\n  const handleOnClick = useCallback(event => onClick(event), [onClick]);\n\n  const handleOnKeyDown = useCallback(event => onKeyDown(event), [onKeyDown]);\n\n  const handleMouseOver = useCallback(() => {\n    setHovered(true);\n  }, [setHovered]);\n\n  const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n  const TooltipContent = useCallback(\n    () => <span className={style.tooltipContentWrapper}>{tooltipText || ariaLabel}</span>,\n    [tooltipText, ariaLabel]\n  );\n\n  const renderToolTip = () => {\n    const closeToolTipInformationTextAriaLabel = tooltipText || ariaLabel;\n    if (!closeToolTipInformationTextAriaLabel) return null;\n    return (\n      <ToolTip\n        fontSize={12}\n        anchorId=\"button-icon\"\n        toolTipIsVisible={hovered}\n        placement={tooltipPlacement}\n        TooltipContent={TooltipContent}\n        closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n      />\n    );\n  };\n  const _customStyle = useMemo(() => {\n    return {\n      ...customStyle,\n      ...((hoverBackgroundColor || hoverColor) && hovered\n        ? {\n            backgroundColor: hoverBackgroundColor,\n            color: hoverColor\n          }\n        : null)\n    };\n  }, [hoverBackgroundColor, hoverColor, hovered, customStyle]);\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        {...(useTitle && {\n          title: ariaLabel || label\n        })}\n        className={styleButton}\n        style={customStyle}\n        data-name={dataName}\n        data-testid={dataTestId}\n        onClick={handleOnClick}\n        aria-label={ariaLabel || label}\n        hoverColor={hoverColor}\n        hoverBackgroundColor={hoverBackgroundColor}\n        onMouseEnter={handleMouseOver}\n        onMouseLeave={handleMouseLeave}\n      >\n        {getButtonContent(\n          icon,\n          content ?? label,\n          hovered,\n          hoverBackgroundColor,\n          hoverColor,\n          customLabelClassName,\n          tag\n        )}\n        {renderToolTip()}\n      </Link>\n    );\n  }\n\n  return (\n    <button\n      {...(useTitle && {\n        title: ariaLabel || label\n      })}\n      {...(ariaLabel && !label\n        ? {\n            'data-for': 'button-icon',\n            'data-tip': hovered\n          }\n        : {})}\n      // eslint-disable-next-line react/button-has-type\n      type={usage}\n      aria-label={ariaLabel || label}\n      data-name={dataName}\n      data-testid={dataTestId}\n      style={_customStyle}\n      className={styleButton}\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onMouseOver={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      tabIndex={0}\n      disabled={disabled}\n    >\n      {getButtonContent(\n        icon,\n        content ?? label,\n        hovered,\n        hoverBackgroundColor,\n        hoverColor,\n        customLabelClassName,\n        tag\n      )}\n      {renderToolTip()}\n    </button>\n  );\n};\n\nButtonLink.propTypes = propTypes;\n\nexport default ButtonLink;\n"],"mappings":"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","ignoreList":[]}

package/es/atom/button-link/style.css

@@ -110,4 +110,4 @@
   font-size: 12px;
   font-weight: 500;
   line-height: 16px;
-}
+}

package/es/atom/button-link/types.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import PropTypes from 'prop-types';
 import { ICONS } from '../../util/button-icons';
+import Tag from '../tag';
 export declare const iconPropTypes: {
     position: PropTypes.Requireable<string>;
     type: PropTypes.Requireable<string>;
@@ -89,6 +91,7 @@ export declare type ButtonLinkProps = {
     customStyle?: Record<string, string | number>;
     useTitle?: boolean;
     customLabelClassName?: string;
+    tag?: React.ComponentProps<typeof Tag>;
 };
 export declare type Fixture = {
     props: ButtonLinkProps;

package/es/atom/button-link/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAU9C,eAAO,MAAM,aAAa;;;;;;;;;;;;CAIzB,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CAC/C,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atom/button-link/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAC,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAC9C,OAAO,GAAG,MAAM,QAAQ,CAAC;AAUzB,eAAO,MAAM,aAAa;;;;;;;;;;;;CAIzB,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBd,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;CAC/C,CAAC;AAEF,oBAAY,QAAQ,GAAG;IACrB,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACnE,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,CAAC,EAAE;QACL,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;KAClD,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,OAAO,GAAG;IAAC,KAAK,EAAE,eAAe,CAAA;CAAC,CAAC;AAE/C,eAAe,SAAS,CAAC"}

package/es/atom/button-link/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","ICONS","faIconPropTypes","name","string","isRequired","color","backgroundColor","size","number","customStyle","objectOf","oneOfType","iconPropTypes","position","oneOf","type","_keys","faIcon","shape","propTypes","usage","label","content","node","tooltipText","tooltipPlacement","icon","onClick","func","link","href","download","bool","target","hoverBackgroundColor","hoverColor","disabled","className","useTitle","customLabelClassName"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\n\nconst faIconPropTypes = {\n  name: PropTypes.string.isRequired,\n  color: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  size: PropTypes.number,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport const iconPropTypes = {\n  position: PropTypes.oneOf(['right', 'left']),\n  type: PropTypes.oneOf(keys(ICONS)),\n  faIcon: PropTypes.shape(faIconPropTypes)\n};\n\nconst propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  usage: PropTypes.oneOf(['button', 'submit', 'reset']),\n  label: PropTypes.string,\n  content: PropTypes.node,\n  'aria-label': PropTypes.string,\n  tooltipText: PropTypes.string,\n  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape(iconPropTypes),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  hoverBackgroundColor: PropTypes.string,\n  hoverColor: PropTypes.string,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  useTitle: PropTypes.bool,\n  customLabelClassName: PropTypes.string\n};\n\nexport type FaIconType = {\n  name: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: number;\n  customStyle?: Record<string, number | string>;\n};\n\nexport type IconType = {\n  position: 'right' | 'left';\n  type?: keyof typeof ICONS;\n  faIcon?: FaIconType;\n};\n\nexport type ButtonLinkProps = {\n  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n  usage?: 'button' | 'submit' | 'reset';\n  label?: string;\n  content?: PropTypes.ReactNodeLike;\n  'aria-label'?: string;\n  tooltipText?: string;\n  tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom';\n  'data-name'?: string;\n  'data-testid'?: string;\n  icon?: IconType;\n  onClick?: () => void;\n  onKeyDown?: () => void;\n  link?: {\n    href?: string;\n    download?: boolean;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  };\n  hoverBackgroundColor?: string;\n  hoverColor?: string;\n  disabled?: boolean;\n  className?: string;\n  customStyle?: Record<string, string | number>;\n  useTitle?: boolean;\n  customLabelClassName?: string;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAS,MAAM,YAAY;AAElC,SAAQC,KAAK,QAAO,yBAAyB;AAE7C,MAAMC,eAAe,GAAG;EACtBC,IAAI,EAAEH,SAAS,CAACI,MAAM,CAACC,UAAU;EACjCC,KAAK,EAAEN,SAAS,CAACI,MAAM;EACvBG,eAAe,EAAEP,SAAS,CAACI,MAAM;EACjCI,IAAI,EAAER,SAAS,CAACS,MAAM;EACtBC,WAAW,EAAEV,SAAS,CAACW,QAAQ,CAACX,SAAS,CAACY,SAAS,CAAC,CAACZ,SAAS,CAACI,MAAM,EAAEJ,SAAS,CAACS,MAAM,CAAC,CAAC;AAC3F,CAAC;AAED,OAAO,MAAMI,aAAa,GAAG;EAC3BC,QAAQ,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EAC5CC,IAAI,EAAEhB,SAAS,CAACe,KAAK,CAACE,KAAA,CAAKhB,KAAK,CAAC,CAAC;EAClCiB,MAAM,EAAElB,SAAS,CAACmB,KAAK,CAACjB,eAAe;AACzC,CAAC;AAED,MAAMkB,SAAS,GAAG;EAChBJ,IAAI,EAAEhB,SAAS,CAACe,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;EAChFM,KAAK,EAAErB,SAAS,CAACe,KAAK,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;EACrDO,KAAK,EAAEtB,SAAS,CAACI,MAAM;EACvBmB,OAAO,EAAEvB,SAAS,CAACwB,IAAI;EACvB,YAAY,EAAExB,SAAS,CAACI,MAAM;EAC9BqB,WAAW,EAAEzB,SAAS,CAACI,MAAM;EAC7BsB,gBAAgB,EAAE1B,SAAS,CAACe,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;EACrE,WAAW,EAAEf,SAAS,CAACI,MAAM;EAC7B,aAAa,EAAEJ,SAAS,CAACI,MAAM;EAC/BuB,IAAI,EAAE3B,SAAS,CAACmB,KAAK,CAACN,aAAa,CAAC;EACpCe,OAAO,EAAE5B,SAAS,CAAC6B,IAAI;EACvBC,IAAI,EAAE9B,SAAS,CAACmB,KAAK,CAAC;IACpBY,IAAI,EAAE/B,SAAS,CAACI,MAAM;IACtB4B,QAAQ,EAAEhC,SAAS,CAACiC,IAAI;IACxBC,MAAM,EAAElC,SAAS,CAACe,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;EAChE,CAAC,CAAC;EACFoB,oBAAoB,EAAEnC,SAAS,CAACI,MAAM;EACtCgC,UAAU,EAAEpC,SAAS,CAACI,MAAM;EAC5BiC,QAAQ,EAAErC,SAAS,CAACiC,IAAI;EACxBK,SAAS,EAAEtC,SAAS,CAACI,MAAM;EAC3BM,WAAW,EAAEV,SAAS,CAACW,QAAQ,CAACX,SAAS,CAACY,SAAS,CAAC,CAACZ,SAAS,CAACI,MAAM,EAAEJ,SAAS,CAACS,MAAM,CAAC,CAAC,CAAC;EAC1F8B,QAAQ,EAAEvC,SAAS,CAACiC,IAAI;EACxBO,oBAAoB,EAAExC,SAAS,CAACI;AAClC,CAAC;AA6CD,eAAegB,SAAS","ignoreList":[]}
+{"version":3,"file":"types.js","names":["PropTypes","ICONS","faIconPropTypes","name","string","isRequired","color","backgroundColor","size","number","customStyle","objectOf","oneOfType","iconPropTypes","position","oneOf","type","_keys","faIcon","shape","propTypes","usage","label","content","node","tooltipText","tooltipPlacement","icon","onClick","func","link","href","download","bool","target","hoverBackgroundColor","hoverColor","disabled","className","useTitle","customLabelClassName"],"sources":["../../../src/atom/button-link/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {keys} from 'lodash/fp';\nimport {ICONS} from '../../util/button-icons';\nimport Tag from '../tag';\n\nconst faIconPropTypes = {\n  name: PropTypes.string.isRequired,\n  color: PropTypes.string,\n  backgroundColor: PropTypes.string,\n  size: PropTypes.number,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport const iconPropTypes = {\n  position: PropTypes.oneOf(['right', 'left']),\n  type: PropTypes.oneOf(keys(ICONS)),\n  faIcon: PropTypes.shape(faIconPropTypes)\n};\n\nconst propTypes = {\n  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'text', 'dangerous']),\n  usage: PropTypes.oneOf(['button', 'submit', 'reset']),\n  label: PropTypes.string,\n  content: PropTypes.node,\n  'aria-label': PropTypes.string,\n  tooltipText: PropTypes.string,\n  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),\n  'data-name': PropTypes.string,\n  'data-testid': PropTypes.string,\n  icon: PropTypes.shape(iconPropTypes),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  hoverBackgroundColor: PropTypes.string,\n  hoverColor: PropTypes.string,\n  disabled: PropTypes.bool,\n  className: PropTypes.string,\n  customStyle: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  useTitle: PropTypes.bool,\n  customLabelClassName: PropTypes.string\n};\n\nexport type FaIconType = {\n  name: string;\n  color?: string;\n  backgroundColor?: string;\n  size?: number;\n  customStyle?: Record<string, number | string>;\n};\n\nexport type IconType = {\n  position: 'right' | 'left';\n  type?: keyof typeof ICONS;\n  faIcon?: FaIconType;\n};\n\nexport type ButtonLinkProps = {\n  type?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous';\n  usage?: 'button' | 'submit' | 'reset';\n  label?: string;\n  content?: PropTypes.ReactNodeLike;\n  'aria-label'?: string;\n  tooltipText?: string;\n  tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom';\n  'data-name'?: string;\n  'data-testid'?: string;\n  icon?: IconType;\n  onClick?: () => void;\n  onKeyDown?: () => void;\n  link?: {\n    href?: string;\n    download?: boolean;\n    target?: '_self' | '_blank' | '_parent' | '_top';\n  };\n  hoverBackgroundColor?: string;\n  hoverColor?: string;\n  disabled?: boolean;\n  className?: string;\n  customStyle?: Record<string, string | number>;\n  useTitle?: boolean;\n  customLabelClassName?: string;\n  tag?: React.ComponentProps<typeof Tag>;\n};\n\nexport type Fixture = {props: ButtonLinkProps};\n\nexport default propTypes;\n"],"mappings":";AAAA,OAAOA,SAAS,MAAM,YAAY;AAElC,SAAQC,KAAK,QAAO,yBAAyB;AAG7C,MAAMC,eAAe,GAAG;EACtBC,IAAI,EAAEH,SAAS,CAACI,MAAM,CAACC,UAAU;EACjCC,KAAK,EAAEN,SAAS,CAACI,MAAM;EACvBG,eAAe,EAAEP,SAAS,CAACI,MAAM;EACjCI,IAAI,EAAER,SAAS,CAACS,MAAM;EACtBC,WAAW,EAAEV,SAAS,CAACW,QAAQ,CAACX,SAAS,CAACY,SAAS,CAAC,CAACZ,SAAS,CAACI,MAAM,EAAEJ,SAAS,CAACS,MAAM,CAAC,CAAC;AAC3F,CAAC;AAED,OAAO,MAAMI,aAAa,GAAG;EAC3BC,QAAQ,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EAC5CC,IAAI,EAAEhB,SAAS,CAACe,KAAK,CAACE,KAAA,CAAKhB,KAAK,CAAC,CAAC;EAClCiB,MAAM,EAAElB,SAAS,CAACmB,KAAK,CAACjB,eAAe;AACzC,CAAC;AAED,MAAMkB,SAAS,GAAG;EAChBJ,IAAI,EAAEhB,SAAS,CAACe,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;EAChFM,KAAK,EAAErB,SAAS,CAACe,KAAK,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;EACrDO,KAAK,EAAEtB,SAAS,CAACI,MAAM;EACvBmB,OAAO,EAAEvB,SAAS,CAACwB,IAAI;EACvB,YAAY,EAAExB,SAAS,CAACI,MAAM;EAC9BqB,WAAW,EAAEzB,SAAS,CAACI,MAAM;EAC7BsB,gBAAgB,EAAE1B,SAAS,CAACe,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;EACrE,WAAW,EAAEf,SAAS,CAACI,MAAM;EAC7B,aAAa,EAAEJ,SAAS,CAACI,MAAM;EAC/BuB,IAAI,EAAE3B,SAAS,CAACmB,KAAK,CAACN,aAAa,CAAC;EACpCe,OAAO,EAAE5B,SAAS,CAAC6B,IAAI;EACvBC,IAAI,EAAE9B,SAAS,CAACmB,KAAK,CAAC;IACpBY,IAAI,EAAE/B,SAAS,CAACI,MAAM;IACtB4B,QAAQ,EAAEhC,SAAS,CAACiC,IAAI;IACxBC,MAAM,EAAElC,SAAS,CAACe,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;EAChE,CAAC,CAAC;EACFoB,oBAAoB,EAAEnC,SAAS,CAACI,MAAM;EACtCgC,UAAU,EAAEpC,SAAS,CAACI,MAAM;EAC5BiC,QAAQ,EAAErC,SAAS,CAACiC,IAAI;EACxBK,SAAS,EAAEtC,SAAS,CAACI,MAAM;EAC3BM,WAAW,EAAEV,SAAS,CAACW,QAAQ,CAACX,SAAS,CAACY,SAAS,CAAC,CAACZ,SAAS,CAACI,MAAM,EAAEJ,SAAS,CAACS,MAAM,CAAC,CAAC,CAAC;EAC1F8B,QAAQ,EAAEvC,SAAS,CAACiC,IAAI;EACxBO,oBAAoB,EAAExC,SAAS,CAACI;AAClC,CAAC;AA8CD,eAAegB,SAAS","ignoreList":[]}

package/es/molecule/icon-picker-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAwIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAuIC"}

package/es/molecule/icon-picker-modal/index.js

@@ -27,10 +27,10 @@ const IconPickerModal = (props, context) => {
   const {
     translate
   } = context;
-  const [selectedIcon, setSelectedIcon] = useState(null);
-  const [displayedIcons, setDisplayedIcons] = useState([]);
-  const [currentIndex, setCurrentIndex] = useState(0);
   const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')), _uniq)(fas), []);
+  const [selectedIcon, setSelectedIcon] = useState(null);
+  const [displayedIcons, setDisplayedIcons] = useState(_slice(0, ICONS_PER_LOAD, allIcons));
+  const [currentIndex, setCurrentIndex] = useState(ICONS_PER_LOAD);
   const {
     searchValue,
     searchResults,
@@ -44,6 +44,7 @@ const IconPickerModal = (props, context) => {
     onClose();
   }, [onClose]);
   const handleIconClick = useCallback(iconName => () => {
+    console.log('in handleIconClick');
     setSelectedIcon(prevSelectedIcon => prevSelectedIcon === iconName ? null : iconName);
   }, []);
   const loadMoreIcons = useCallback(() => {
@@ -57,6 +58,7 @@ const IconPickerModal = (props, context) => {
     setCurrentIndex(ICONS_PER_LOAD);
   }, [searchResults]);
   const handleScroll = useCallback(event => {
+    console.log('in handleScroll --->');
     const {
       scrollTop,
       clientHeight,
@@ -67,9 +69,9 @@ const IconPickerModal = (props, context) => {
     }
   }, [loadMoreIcons]);
   const icons = useMemo(() => _pipe(_entries, _map(([index, iconName]) => /*#__PURE__*/React.createElement(SelectIcon, {
-    key: `icon-${index}`,
+    key: iconName,
     size: "responsive",
-    "data-name": `icon-${index}`,
+    "data-name": iconName,
     "aria-label": iconName,
     faIcon: iconName,
     onClick: handleIconClick(iconName),
@@ -110,7 +112,7 @@ const IconPickerModal = (props, context) => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: style.iconPicker
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: style.searchWrapper
   }, /*#__PURE__*/React.createElement(SearchForm, {
     search: {
@@ -133,7 +135,7 @@ const IconPickerModal = (props, context) => {
     onClick: handleReset
   }, translate('empty_search_result_clear_search'))) : /*#__PURE__*/React.createElement("div", {
     className: style.iconsListWrapper
-  }, icons))));
+  }, icons)));
 };
 IconPickerModal.contextTypes = {
   translate: Provider.childContextTypes.translate

package/es/molecule/icon-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","fas","BaseModal","SelectIcon","Provider","SearchForm","COLORS","style","useIconSearch","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","_pipe","_values","_map","_get","_uniq","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","_slice","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","_entries","index","createElement","key","size","faIcon","onClick","options","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","title","description","onScroll","headerIcon","name","backgroundColor","className","iconPicker","Fragment","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size, uniq} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","fas","BaseModal","SelectIcon","Provider","SearchForm","COLORS","style","useIconSearch","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","allIcons","_pipe","_values","_map","_get","_uniq","selectedIcon","setSelectedIcon","displayedIcons","setDisplayedIcons","_slice","currentIndex","setCurrentIndex","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","console","log","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","_entries","index","createElement","key","size","faIcon","onClick","options","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","title","description","onScroll","headerIcon","name","backgroundColor","className","iconPicker","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size, uniq} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState(slice(0, ICONS_PER_LOAD, allIcons));\n  const [currentIndex, setCurrentIndex] = useState(ICONS_PER_LOAD);\n\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      console.log('in handleIconClick');\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      console.log('in handleScroll --->');\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={iconName}\n            size=\"responsive\"\n            data-name={iconName}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        <div className={style.searchWrapper}>\n          <SearchForm\n            search={{\n              placeholder: translate('search_place_holder'),\n              value: searchValue,\n              onChange: handleSearch\n            }}\n            onReset={handleReset}\n            dataTestId=\"search-input\"\n          />\n        </div>\n        {searchValue && size(searchResults) === 0 ? (\n          <div className={style.emptySearchResultContainer}>\n            <div className={style.emptySearchResultTitle}>\n              {translate('empty_search_result_title', {searchValue})}\n            </div>\n            <div className={style.emptySearchResultDescription}>\n              {translate('empty_search_result_description')}\n            </div>\n            <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n              {translate('empty_search_result_clear_search')}\n            </div>\n          </div>\n        ) : (\n          <div className={style.iconsListWrapper}>{icons}</div>\n        )}\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { QuickFiltersProps } from './types';
+export declare const handleScroll: (direction: number, listRef: React.RefObject<HTMLDivElement>) => void;
+declare const QuickFilters: {
+    ({ primaryOption, filterOptions, filterButton, nextFilterAriaLabel, previousFilterAriaLabel, filterOptionsAriaLabel }: QuickFiltersProps): JSX.Element;
+    propTypes: {
+        primaryOption: import("prop-types").Requireable<import("prop-types").InferProps<{
+            defaultLabel: import("prop-types").Requireable<string>;
+            defaultValue: import("prop-types").Requireable<string>;
+            defaultIconName: import("prop-types").Requireable<string>;
+            defaultSelected: import("prop-types").Requireable<boolean>;
+            defaultAriaLabel: import("prop-types").Requireable<string>;
+            onDefaultClick: import("prop-types").Requireable<(...args: any[]) => any>;
+        }>>;
+        nextFilterAriaLabel: import("prop-types").Requireable<string>;
+        previousFilterAriaLabel: import("prop-types").Requireable<string>;
+        filterOptionsAriaLabel: import("prop-types").Requireable<string>;
+        filterOptions: import("prop-types").Requireable<(import("prop-types").InferProps<{
+            iconName: import("prop-types").Requireable<string>;
+            label: import("prop-types").Requireable<string>;
+            value: import("prop-types").Requireable<string>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+            selected: import("prop-types").Requireable<boolean>;
+            ariaLabel: import("prop-types").Requireable<string>;
+        }> | null | undefined)[]>;
+        filterButton: import("prop-types").Requireable<import("prop-types").InferProps<{
+            type: import("prop-types").Requireable<string>;
+            usage: import("prop-types").Requireable<string>;
+            label: import("prop-types").Requireable<string>;
+            content: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+            'aria-label': import("prop-types").Requireable<string>;
+            tooltipText: import("prop-types").Requireable<string>;
+            tooltipPlacement: import("prop-types").Requireable<string>;
+            'data-name': import("prop-types").Requireable<string>;
+            'data-testid': import("prop-types").Requireable<string>;
+            icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                position: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+                faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    name: import("prop-types").Validator<string>;
+                    color: import("prop-types").Requireable<string>;
+                    backgroundColor: import("prop-types").Requireable<string>;
+                    size: import("prop-types").Requireable<number>;
+                    customStyle: import("prop-types").Requireable<{
+                        [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+                    }>;
+                }>>;
+            }>>;
+            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
+            link: import("prop-types").Requireable<import("prop-types").InferProps<{
+                href: import("prop-types").Requireable<string>;
+                download: import("prop-types").Requireable<boolean>;
+                target: import("prop-types").Requireable<string>;
+            }>>;
+            hoverBackgroundColor: import("prop-types").Requireable<string>;
+            hoverColor: import("prop-types").Requireable<string>;
+            disabled: import("prop-types").Requireable<boolean>;
+            className: import("prop-types").Requireable<string>;
+            customStyle: import("prop-types").Requireable<{
+                [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+            }>;
+            useTitle: import("prop-types").Requireable<boolean>;
+            customLabelClassName: import("prop-types").Requireable<string>;
+        }>>;
+    };
+};
+export default QuickFilters;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AA0BF,QAAA,MAAM,YAAY;2HAOf,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GnB,CAAC;AAGF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,179 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import FaIcon from '../../atom/icon';
+import { COLORS } from '../../variables/colors';
+import ButtonLink from '../../atom/button-link';
+import style from './style.css';
+import { propTypes } from './types';
+const SCROLL_RIGHT_SIZE = 380;
+const SCROLL_LEFT_SIZE = -380;
+export const handleScroll = (direction, listRef) => {
+  if (listRef.current) {
+    listRef.current.scrollBy({
+      left: direction,
+      behavior: 'smooth'
+    });
+  }
+};
+const getFilterButton = filterButtonProps => {
+  if (!filterButtonProps) return null;
+  const {
+    tag
+  } = filterButtonProps;
+  return /*#__PURE__*/React.createElement("div", {
+    className: tag ? style.filterButtonWrapper : ''
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.filterButton
+  }, /*#__PURE__*/React.createElement(ButtonLink, _extends({}, filterButtonProps, {
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'sliders',
+        size: 14,
+        color: tag ? COLORS.cm_grey_700 : COLORS.neutral_500
+      }
+    },
+    "data-testid": "open-filters-modal-button",
+    customStyle: {
+      borderRadius: '12px'
+    }
+  }))));
+};
+const QuickFilters = ({
+  primaryOption,
+  filterOptions,
+  filterButton,
+  nextFilterAriaLabel,
+  previousFilterAriaLabel,
+  filterOptionsAriaLabel
+}) => {
+  const {
+    defaultLabel,
+    defaultIconName,
+    defaultSelected,
+    defaultAriaLabel,
+    onDefaultClick
+  } = primaryOption;
+  const filtersListRef = React.useRef(null);
+  const rightBtnRef = useRef(null);
+  const leftBtnRef = useRef(null);
+  const handleScrollRight = useCallback(() => {
+    handleScroll(SCROLL_RIGHT_SIZE, filtersListRef);
+  }, [filtersListRef]);
+  const handleScrollLeft = useCallback(() => {
+    handleScroll(SCROLL_LEFT_SIZE, filtersListRef);
+  }, [filtersListRef]);
+  useEffect(() => {
+    const list = filtersListRef.current;
+    const rightButton = rightBtnRef.current;
+    const leftButton = leftBtnRef.current;
+    /* istanbul ignore next */ // not testable without complex mocking useRef
+    if (!list || !leftButton || !rightButton) return;
+    const update = () => {
+      const rightArrowWidth = rightButton.offsetWidth;
+      rightButton.style.visibility = list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth ? 'visible' : 'hidden';
+      leftButton.style.visibility = list.scrollLeft > 0 ? 'visible' : 'hidden';
+      leftButton.style.display = list.scrollLeft > 0 ? 'flex' : 'none';
+    };
+    list.addEventListener('scroll', update);
+    window.addEventListener('resize', update);
+    update();
+    return () => {
+      list.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+    };
+  }, [filterOptions]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.filtersMainContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.leftArrowButton,
+    ref: leftBtnRef,
+    style: {
+      visibility: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'arrow-left',
+        size: 15
+      }
+    },
+    onClick: handleScrollLeft,
+    customStyle: {
+      height: '36px'
+    },
+    "data-testid": "scroll-left-button",
+    "aria-label": previousFilterAriaLabel
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.filtersList,
+    ref: filtersListRef,
+    "data-testid": "filters-options-list",
+    "aria-label": filterOptionsAriaLabel
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "all-option",
+    className: classNames(style.defaultOption, defaultSelected && style.filterSelected),
+    onClick: onDefaultClick
+  }, /*#__PURE__*/React.createElement(FaIcon, {
+    iconName: defaultIconName,
+    size: {
+      faSize: 20,
+      wrapperSize: 20
+    },
+    iconColor: defaultSelected ? COLORS.cm_grey_700 : COLORS.neutral_500,
+    "aria-label": defaultAriaLabel
+  }), /*#__PURE__*/React.createElement("span", {
+    className: style.filterLabel
+  }, defaultLabel)), /*#__PURE__*/React.createElement("div", {
+    className: style.filterSeparator
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.filtersContainer
+  }, filterOptions.map((filterOption, idx) => {
+    const {
+      iconName,
+      label,
+      selected,
+      value,
+      onClick,
+      ariaLabel
+    } = filterOption;
+    return /*#__PURE__*/React.createElement("div", {
+      key: idx,
+      className: classNames(style.filterOption, selected && style.filterSelected),
+      "data-testid": `filter-${value}-${idx}`,
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(FaIcon, {
+      iconName: iconName,
+      iconColor: selected ? COLORS.cm_grey_700 : COLORS.neutral_500,
+      size: {
+        faSize: 20,
+        wrapperSize: 20
+      },
+      "aria-label": ariaLabel
+    }), /*#__PURE__*/React.createElement("span", null, label));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: style.rightArrowButton,
+    ref: rightBtnRef,
+    style: {
+      visibility: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(ButtonLink, {
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'arrow-right',
+        size: 15
+      }
+    },
+    onClick: handleScrollRight,
+    customStyle: {
+      height: '36px'
+    },
+    "data-testid": "scroll-right-button",
+    "aria-label": nextFilterAriaLabel
+  })))), getFilterButton(filterButton));
+};
+QuickFilters.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default QuickFilters;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","useEffect","classNames","FaIcon","COLORS","ButtonLink","style","propTypes","SCROLL_RIGHT_SIZE","SCROLL_LEFT_SIZE","handleScroll","direction","listRef","current","scrollBy","left","behavior","getFilterButton","filterButtonProps","tag","createElement","className","filterButtonWrapper","filterButton","_extends","icon","position","faIcon","name","size","color","cm_grey_700","neutral_500","customStyle","borderRadius","QuickFilters","primaryOption","filterOptions","nextFilterAriaLabel","previousFilterAriaLabel","filterOptionsAriaLabel","defaultLabel","defaultIconName","defaultSelected","defaultAriaLabel","onDefaultClick","filtersListRef","rightBtnRef","leftBtnRef","handleScrollRight","handleScrollLeft","list","rightButton","leftButton","update","rightArrowWidth","offsetWidth","visibility","scrollLeft","clientWidth","scrollWidth","display","addEventListener","window","removeEventListener","filtersMainContainer","leftArrowButton","ref","onClick","height","filtersList","defaultOption","filterSelected","iconName","faSize","wrapperSize","iconColor","filterLabel","filterSeparator","filtersContainer","map","filterOption","idx","label","selected","value","ariaLabel","key","rightArrowButton","process","env","NODE_ENV"],"sources":["../../../src/molecule/quick-filters/index.tsx"],"sourcesContent":["import React, {useCallback, useRef, useEffect} from 'react';\nimport classNames from 'classnames';\nimport FaIcon from '../../atom/icon';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport style from './style.css';\nimport {QuickFiltersProps, propTypes} from './types';\n\nconst SCROLL_RIGHT_SIZE = 380;\nconst SCROLL_LEFT_SIZE = -380;\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 = (filterButtonProps: ButtonLinkProps | undefined) => {\n  if (!filterButtonProps) return null;\n  const {tag} = filterButtonProps;\n  return (\n    <div className={tag ? style.filterButtonWrapper : ''}>\n      <div className={style.filterButton}>\n        <ButtonLink\n          {...filterButtonProps}\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          data-testid=\"open-filters-modal-button\"\n          customStyle={{borderRadius: '12px'}}\n        />\n      </div>\n    </div>\n  );\n};\n\nconst QuickFilters = ({\n  primaryOption,\n  filterOptions,\n  filterButton,\n  nextFilterAriaLabel,\n  previousFilterAriaLabel,\n  filterOptionsAriaLabel\n}: QuickFiltersProps) => {\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      rightButton.style.visibility =\n        list.scrollLeft + list.clientWidth < list.scrollWidth - rightArrowWidth\n          ? 'visible'\n          : 'hidden';\n      leftButton.style.visibility = list.scrollLeft > 0 ? 'visible' : 'hidden';\n      leftButton.style.display = list.scrollLeft > 0 ? 'flex' : 'none';\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}>\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          customStyle={{height: '36px'}}\n          data-testid=\"scroll-left-button\"\n          aria-label={previousFilterAriaLabel}\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            iconColor={defaultSelected ? COLORS.cm_grey_700 : COLORS.neutral_500}\n            aria-label={defaultAriaLabel}\n          />\n          <span className={style.filterLabel}>{defaultLabel}</span>\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                onClick={onClick}\n              >\n                <FaIcon\n                  iconName={iconName}\n                  iconColor={selected ? COLORS.cm_grey_700 : COLORS.neutral_500}\n                  size={{faSize: 20, wrapperSize: 20}}\n                  aria-label={ariaLabel}\n                />\n                <span>{label}</span>\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              onClick={handleScrollRight}\n              customStyle={{height: '36px'}}\n              data-testid=\"scroll-right-button\"\n              aria-label={nextFilterAriaLabel}\n            />\n          </div>\n        </div>\n      </div>\n      {getFilterButton(filterButton)}\n    </div>\n  );\n};\n\nQuickFilters.propTypes = propTypes;\nexport default QuickFilters;\n"],"mappings":"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","ignoreList":[]}