@coorpacademy/components 11.36.10-alpha.4 → 11.36.10-alpha.7

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

@@ -11,9 +11,9 @@
   gap: 8px;
 }
 
-.buttonMenuContainer.scrollable {
-  max-height: 314px;
-  overflow-y: scroll;
+.scrollable {
+  max-height: 280px;
+  overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: cm_grey_200 transparent;
 }

package/es/atom/input-select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqH3C,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAK9C,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2G3C,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/es/atom/input-select/index.js

@@ -59,10 +59,7 @@ const InputSelect = ({
       icon: selectedIcon
     })) : null);
   };
-  const shouldBeScrollable = options.length > 6;
   return /*#__PURE__*/React.createElement("div", {
-    className: style.container
-  }, /*#__PURE__*/React.createElement("div", {
     className: classnames(style.outerWrapper, {
       [style.open]: open
     })
@@ -94,15 +91,11 @@ const InputSelect = ({
       [style.rotated]: open
     }),
     icon: iconClosed
-  }))))), open ? /*#__PURE__*/React.createElement("div", {
-    className: classnames(style.menuWrapper, {
-      [style.showFade]: shouldBeScrollable
-    })
-  }, /*#__PURE__*/React.createElement("ul", {
+  }))), open ? /*#__PURE__*/React.createElement("ul", {
     id: `${componentId}-listbox`,
     className: style.menu,
     role: "listbox"
-  }, options.map(renderOption))) : null);
+  }, options.map(renderOption)) : null));
 };
 InputSelect.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 export default InputSelect;

package/es/atom/input-select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","classnames","FontAwesomeIcon","style","propTypes","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","shouldBeScrollable","length","container","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menuWrapper","showFade","menu","map","process","env","NODE_ENV"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n  options = [],\n  value,\n  onChange,\n  placeholder,\n  className,\n  'aria-label': ariaLabel,\n  iconClosed = 'chevron-down',\n  selectedIcon = 'circle-check',\n  'button-data-testid': buttonDataTestId = 'select-input'\n}) => {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const componentId = `${COMPONENT_ID}-${\n    placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n  }`;\n\n  const handleToggle = useCallback(() => {\n    setOpen(o => !o);\n  }, []);\n\n  const handleOnOptionClick = useCallback(\n    (optionValue: string) => {\n      onChange(optionValue);\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!wrapperRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [open]);\n\n  const selectedOption = options.find(opt => opt.value === value);\n\n  const renderOption = (option: InputSelectProps['options'][0]) => {\n    function handleClick() {\n      handleOnOptionClick(option.value);\n    }\n\n    const isSelected = option.value === value;\n\n    return (\n      <li\n        key={option.value}\n        className={classnames(style.option, isSelected && style.selected)}\n        role=\"option\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        data-testid={`option-${option.value}`}\n        data-name={option['data-name']}\n      >\n        <span className={style.optionIcon}>{option.icon}</span>\n        <span className={style.optionLabel}>{option.label}</span>\n        {isSelected ? (\n          <span className={style.checkIcon}>\n            <FontAwesomeIcon icon={selectedIcon as IconName} />\n          </span>\n        ) : null}\n      </li>\n    );\n  };\n\n  const shouldBeScrollable = options.length > 6;\n\n  return (\n    <div className={style.container}>\n      <div\n        className={classnames(style.outerWrapper, {\n          [style.open]: open\n        })}\n      >\n        <div\n          ref={wrapperRef}\n          className={classnames(style.wrapper, className)}\n          aria-label={ariaLabel}\n        >\n          <button\n            type=\"button\"\n            className={style.display}\n            onClick={handleToggle}\n            aria-haspopup=\"listbox\"\n            aria-expanded={open}\n            aria-controls={open ? `${componentId}-listbox` : undefined}\n            id={componentId}\n            data-testid={buttonDataTestId}\n          >\n            <div className={style.content}>\n              <span className={style.label}>{placeholder}</span>\n              {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n            </div>\n            <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n              <FontAwesomeIcon\n                className={classnames(style.icon, {[style.rotated]: open})}\n                icon={iconClosed as IconName}\n              />\n            </span>\n          </button>\n        </div>\n      </div>\n      {open ? (\n        <div className={classnames(style.menuWrapper, {[style.showFade]: shouldBeScrollable})}>\n          <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n            {options.map(renderOption)}\n          </ul>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useState","useRef","useCallback","classnames","FontAwesomeIcon","style","propTypes","COMPONENT_ID","InputSelect","options","value","onChange","placeholder","className","ariaLabel","iconClosed","selectedIcon","buttonDataTestId","open","setOpen","wrapperRef","componentId","toLowerCase","replace","handleToggle","o","handleOnOptionClick","optionValue","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","selectedOption","find","opt","renderOption","option","handleClick","isSelected","createElement","key","selected","role","onClick","optionIcon","icon","optionLabel","label","checkIcon","outerWrapper","ref","wrapper","type","display","undefined","id","content","iconWrapper","rotated","menu","map","process","env","NODE_ENV"],"sources":["../../../src/atom/input-select/index.tsx"],"sourcesContent":["import React, {useState, useRef, useCallback} from 'react';\nimport classnames from 'classnames';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport {IconName} from '@fortawesome/fontawesome-svg-core';\nimport style from './style.css';\nimport type {InputSelectProps} from './types';\nimport propTypes from './types';\n\nconst COMPONENT_ID = 'input-select';\n\nconst InputSelect: React.FC<InputSelectProps> = ({\n  options = [],\n  value,\n  onChange,\n  placeholder,\n  className,\n  'aria-label': ariaLabel,\n  iconClosed = 'chevron-down',\n  selectedIcon = 'circle-check',\n  'button-data-testid': buttonDataTestId = 'select-input'\n}) => {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const componentId = `${COMPONENT_ID}-${\n    placeholder?.toLowerCase().replace(/\\s+/g, '-') || 'default'\n  }`;\n\n  const handleToggle = useCallback(() => {\n    setOpen(o => !o);\n  }, []);\n\n  const handleOnOptionClick = useCallback(\n    (optionValue: string) => {\n      onChange(optionValue);\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClickOutside = (event: MouseEvent) => {\n      if (!wrapperRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [open]);\n\n  const selectedOption = options.find(opt => opt.value === value);\n\n  const renderOption = (option: InputSelectProps['options'][0]) => {\n    function handleClick() {\n      handleOnOptionClick(option.value);\n    }\n\n    const isSelected = option.value === value;\n\n    return (\n      <li\n        key={option.value}\n        className={classnames(style.option, isSelected && style.selected)}\n        role=\"option\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        data-testid={`option-${option.value}`}\n        data-name={option['data-name']}\n      >\n        <span className={style.optionIcon}>{option.icon}</span>\n        <span className={style.optionLabel}>{option.label}</span>\n        {isSelected ? (\n          <span className={style.checkIcon}>\n            <FontAwesomeIcon icon={selectedIcon as IconName} />\n          </span>\n        ) : null}\n      </li>\n    );\n  };\n\n  return (\n    <div\n      className={classnames(style.outerWrapper, {\n        [style.open]: open\n      })}\n    >\n      <div ref={wrapperRef} className={classnames(style.wrapper, className)} aria-label={ariaLabel}>\n        <button\n          type=\"button\"\n          className={style.display}\n          onClick={handleToggle}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={open ? `${componentId}-listbox` : undefined}\n          id={componentId}\n          data-testid={buttonDataTestId}\n        >\n          <div className={style.content}>\n            <span className={style.label}>{placeholder}</span>\n            {selectedOption ? <span className={style.value}>{selectedOption.label}</span> : null}\n          </div>\n          <span className={classnames(style.iconWrapper, {[style.open]: open})}>\n            <FontAwesomeIcon\n              className={classnames(style.icon, {[style.rotated]: open})}\n              icon={iconClosed as IconName}\n            />\n          </span>\n        </button>\n        {open ? (\n          <ul id={`${componentId}-listbox`} className={style.menu} role=\"listbox\">\n            {options.map(renderOption)}\n          </ul>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nInputSelect.propTypes = propTypes;\n\nexport default InputSelect;\n"],"mappings":"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","ignoreList":[]}

package/es/atom/input-select/style.css

@@ -12,14 +12,6 @@
 @value cm_blue_50 from colors;
 @value cm_grey_150 from colors;
 
-.container {
-  width: 100%;
-  position: relative;
-  border-radius: 12px;
-  background-color: #fff;
-  box-shadow: 0 4px 8px 0px rgba(0,0,0,0.04);
-}
-
 .outerWrapper {
   width: 100%;
   border-radius: 12px;
@@ -103,41 +95,19 @@
   transform: rotate(180deg);
 }
 
-.menuWrapper {
+.menu {
   position: absolute;
-  top: 52px;
   left: 0;
-  width: 100%;
+  right: 0;
+  margin-top: 8px;
+  background: white;
   border-radius: 12px;
-  z-index: 1000;
-  overflow: hidden;
-  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07);
-}
-
-.menu {
-  max-height: 322px;
-  overflow-y: scroll;
-  list-style: none;
+  box-shadow: 0 4px 8px 0px rgba(0,0,0,0.04);
+  z-index: 10;
   padding: 12px;
-  margin: 0;
+  list-style: none;
   width: 100%;
-  border-radius: 12px;
   box-sizing: border-box;
-  background: #fff;
-}
-
-.menuWrapper.showFade::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 40px;
-  background: linear-gradient(to bottom, transparent 0%, #fff 80%);
-  border-radius: 12px;
-  pointer-events: none;
-  z-index: 2;
 }
 
 .option {
@@ -196,4 +166,4 @@
   color: brand;
   display: inline-flex;
   align-items: center;
-}
+} 

package/es/molecule/button-menu-action/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/button-menu-action/index.tsx"],"names":[],"mappings":";AAOA,OAAkB,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAGzD,QAAA,MAAM,gBAAgB;YAAW,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FrD,CAAC;AAIF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/button-menu-action/index.tsx"],"names":[],"mappings":";AAOA,OAAkB,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAGzD,QAAA,MAAM,gBAAgB;YAAW,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFrD,CAAC;AAIF,eAAe,gBAAgB,CAAC"}

package/es/molecule/button-menu-action/index.js

@@ -17,8 +17,7 @@ const ButtonMenuAction = props => {
     primaryColor,
     containerCustom,
     closeOnClick = false,
-    enableScroll = false,
-    showFade = false
+    enableScroll = false
   } = props;
   const {
     onClick = _noop
@@ -47,12 +46,8 @@ const ButtonMenuAction = props => {
       onClick: () => setVisible(false)
     }), menu.buttons)
   } : menu;
-  const menuWrapperClass = classnames(style.menuWrapper, {
-    [style.visible]: visible,
-    [style.showFade]: showFade && menuWithClose.buttons && menuWithClose.buttons.length > 6
-  });
   const _menu = /*#__PURE__*/React.createElement("div", {
-    className: menuWrapperClass,
+    className: classnames(style.menuWrapper, visible && style.visible),
     "data-name": "menu-wrapper",
     "aria-label": menuWrapper?.ariaLabel,
     style: menuWrapper?.customStyle

package/es/molecule/button-menu-action/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","useRef","classnames","map","FontAwesomeIcon","ButtonLink","ButtonMenu","propTypes","style","ButtonMenuAction","props","button","menu","menuWrapper","type","primaryColor","containerCustom","closeOnClick","enableScroll","showFade","onClick","_noop","visible","setVisible","containerRef","toggleVisibility","prevState","handleMouseDown","event","current","contains","target","document","addEventListener","removeEventListener","menuWithClose","buttons","btn","menuWrapperClass","length","_menu","createElement","className","ariaLabel","customStyle","_extends","container","ref","currentOption","color","undefined","label","icon","caret","process","env","NODE_ENV"],"sources":["../../../src/molecule/button-menu-action/index.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState, useRef} from 'react';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport map from 'lodash/fp/map';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonMenu from '../../atom/button-menu';\nimport propTypes, {ButtonMenuActionProps} from './types';\nimport style from './style.css';\n\nconst ButtonMenuAction = (props: ButtonMenuActionProps) => {\n  const {\n    button,\n    menu,\n    menuWrapper,\n    type = 'button',\n    primaryColor,\n    containerCustom,\n    closeOnClick = false,\n    enableScroll = false,\n    showFade = false\n  } = props;\n  const {onClick = noop} = button;\n  const [visible, setVisible] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const toggleVisibility = useCallback(() => {\n    onClick();\n    setVisible(prevState => !prevState);\n  }, [onClick]);\n\n  useEffect(() => {\n    const handleMouseDown = (event: MouseEvent) => {\n      if (visible && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setVisible(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleMouseDown);\n    return () => {\n      document.removeEventListener('mousedown', handleMouseDown);\n    };\n  }, [visible, containerRef]);\n\n  const menuWithClose = closeOnClick\n    ? {\n        ...menu,\n        buttons: map(\n          btn => ({\n            ...btn,\n            onClick: () => setVisible(false)\n          }),\n          menu.buttons\n        )\n      }\n    : menu;\n\n  const menuWrapperClass = classnames(style.menuWrapper, {\n    [style.visible]: visible,\n    [style.showFade]: showFade && menuWithClose.buttons && menuWithClose.buttons.length > 6\n  });\n\n  const _menu = (\n    <div\n      className={menuWrapperClass}\n      data-name=\"menu-wrapper\"\n      aria-label={menuWrapper?.ariaLabel}\n      style={menuWrapper?.customStyle}\n    >\n      <ButtonMenu {...menuWithClose} enableScroll={enableScroll} />\n    </div>\n  );\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"button-menu-action-wrapper\"\n      style={containerCustom}\n      ref={containerRef}\n    >\n      {type === 'link' ? (\n        <div\n          className={style.currentOption}\n          data-name={button['data-name']}\n          onClick={toggleVisibility}\n          aria-expanded={visible}\n          aria-haspopup=\"true\"\n        >\n          <span style={{color: visible ? primaryColor : undefined}}>{button.label}</span>\n          <FontAwesomeIcon\n            icon={visible ? 'chevron-up' : 'chevron-down'}\n            className={style.caret}\n            style={{color: visible ? primaryColor : undefined}}\n            aria-label={button['aria-label']}\n          />\n        </div>\n      ) : (\n        <ButtonLink {...button} onClick={toggleVisibility} />\n      )}\n      {_menu}\n    </div>\n  );\n};\n\nButtonMenuAction.propTypes = propTypes;\n\nexport default ButtonMenuAction;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useState","useRef","classnames","map","FontAwesomeIcon","ButtonLink","ButtonMenu","propTypes","style","ButtonMenuAction","props","button","menu","menuWrapper","type","primaryColor","containerCustom","closeOnClick","enableScroll","onClick","_noop","visible","setVisible","containerRef","toggleVisibility","prevState","handleMouseDown","event","current","contains","target","document","addEventListener","removeEventListener","menuWithClose","buttons","btn","_menu","createElement","className","ariaLabel","customStyle","_extends","container","ref","currentOption","color","undefined","label","icon","caret","process","env","NODE_ENV"],"sources":["../../../src/molecule/button-menu-action/index.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState, useRef} from 'react';\nimport classnames from 'classnames';\nimport {noop} from 'lodash/fp';\nimport map from 'lodash/fp/map';\nimport {FontAwesomeIcon} from '@fortawesome/react-fontawesome';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonMenu from '../../atom/button-menu';\nimport propTypes, {ButtonMenuActionProps} from './types';\nimport style from './style.css';\n\nconst ButtonMenuAction = (props: ButtonMenuActionProps) => {\n  const {\n    button,\n    menu,\n    menuWrapper,\n    type = 'button',\n    primaryColor,\n    containerCustom,\n    closeOnClick = false,\n    enableScroll = false\n  } = props;\n  const {onClick = noop} = button;\n  const [visible, setVisible] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const toggleVisibility = useCallback(() => {\n    onClick();\n    setVisible(prevState => !prevState);\n  }, [onClick]);\n\n  useEffect(() => {\n    const handleMouseDown = (event: MouseEvent) => {\n      if (visible && containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setVisible(false);\n      }\n    };\n\n    document.addEventListener('mousedown', handleMouseDown);\n    return () => {\n      document.removeEventListener('mousedown', handleMouseDown);\n    };\n  }, [visible, containerRef]);\n\n  const menuWithClose = closeOnClick\n    ? {\n        ...menu,\n        buttons: map(\n          btn => ({\n            ...btn,\n            onClick: () => setVisible(false)\n          }),\n          menu.buttons\n        )\n      }\n    : menu;\n\n  const _menu = (\n    <div\n      className={classnames(style.menuWrapper, visible && style.visible)}\n      data-name=\"menu-wrapper\"\n      aria-label={menuWrapper?.ariaLabel}\n      style={menuWrapper?.customStyle}\n    >\n      <ButtonMenu {...menuWithClose} enableScroll={enableScroll} />\n    </div>\n  );\n\n  return (\n    <div\n      className={style.container}\n      data-name=\"button-menu-action-wrapper\"\n      style={containerCustom}\n      ref={containerRef}\n    >\n      {type === 'link' ? (\n        <div\n          className={style.currentOption}\n          data-name={button['data-name']}\n          onClick={toggleVisibility}\n          aria-expanded={visible}\n          aria-haspopup=\"true\"\n        >\n          <span style={{color: visible ? primaryColor : undefined}}>{button.label}</span>\n          <FontAwesomeIcon\n            icon={visible ? 'chevron-up' : 'chevron-down'}\n            className={style.caret}\n            style={{color: visible ? primaryColor : undefined}}\n            aria-label={button['aria-label']}\n          />\n        </div>\n      ) : (\n        <ButtonLink {...button} onClick={toggleVisibility} />\n      )}\n      {_menu}\n    </div>\n  );\n};\n\nButtonMenuAction.propTypes = propTypes;\n\nexport default ButtonMenuAction;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/button-menu-action/style.css

@@ -27,17 +27,6 @@
   overflow: hidden;
 }
 
-.menuWrapper.showFade::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 30px;
-  background: linear-gradient(to bottom, transparent 0%, #fff 80%);
-}
-
 .menuWrapper > button {
   cursor: pointer;
 }

package/es/molecule/button-menu-action/types.d.ts

@@ -96,7 +96,6 @@ export declare type ButtonMenuActionProps = {
     containerCustom?: Record<string, string | number>;
     closeOnClick?: boolean;
     enableScroll?: boolean;
-    showFade?: boolean;
 };
 export declare type ButtonMenuActionPropsFixture = {
     props: ButtonMenuActionProps;

package/es/molecule/button-menu-action/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/button-menu-action/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAClF,OAA4B,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAElF,QAAA,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa9B,CAAC;AACF,eAAe,yBAAyB,CAAC;AAEzC,oBAAY,qBAAqB,GAAG;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;KAC/C,CAAC;IACF,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,4BAA4B,GAAG;IAAC,KAAK,EAAE,qBAAqB,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/button-menu-action/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAClF,OAA4B,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAElF,QAAA,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa9B,CAAC;AACF,eAAe,yBAAyB,CAAC;AAEzC,oBAAY,qBAAqB,GAAG;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;KAC/C,CAAC;IACF,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,oBAAY,4BAA4B,GAAG;IAAC,KAAK,EAAE,qBAAqB,CAAA;CAAC,CAAC"}

package/es/molecule/button-menu-action/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["PropTypes","ButtonLinkPropTypes","ButtonMenuPropTypes","ButtonMenuActionPropTypes","button","shape","isRequired","menu","menuWrapper","ariaLabel","string","customStyle","objectOf","oneOfType","number","object","type","oneOf","primaryColor","closeOnClick","bool","enableScroll"],"sources":["../../../src/molecule/button-menu-action/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport ButtonLinkPropTypes, {ButtonLinkProps} from '../../atom/button-link/types';\nimport ButtonMenuPropTypes, {ButtonMenuProps} from '../../atom/button-menu/types';\n\nconst ButtonMenuActionPropTypes = {\n  button: PropTypes.shape(ButtonLinkPropTypes).isRequired,\n  menu: PropTypes.shape(ButtonMenuPropTypes).isRequired,\n  menuWrapper: PropTypes.shape({\n    ariaLabel: PropTypes.string,\n    customStyle: PropTypes.objectOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])\n    )\n  }),\n  type: PropTypes.oneOf(['button', 'link']),\n  primaryColor: PropTypes.string,\n  closeOnClick: PropTypes.bool,\n  enableScroll: PropTypes.bool\n};\nexport default ButtonMenuActionPropTypes;\n\nexport type ButtonMenuActionProps = {\n  button: ButtonLinkProps;\n  menu: ButtonMenuProps;\n  menuWrapper?: {\n    ariaLabel?: string;\n    customStyle?: Record<string, string | number>;\n  };\n  type?: 'button' | 'link';\n  primaryColor?: string;\n  containerCustom?: Record<string, string | number>;\n  closeOnClick?: boolean;\n  enableScroll?: boolean;\n  showFade?: boolean;\n};\n\nexport type ButtonMenuActionPropsFixture = {props: ButtonMenuActionProps};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAAyB,8BAA8B;AACjF,OAAOC,mBAAmB,MAAyB,8BAA8B;AAEjF,MAAMC,yBAAyB,GAAG;EAChCC,MAAM,EAAEJ,SAAS,CAACK,KAAK,CAACJ,mBAAmB,CAAC,CAACK,UAAU;EACvDC,IAAI,EAAEP,SAAS,CAACK,KAAK,CAACH,mBAAmB,CAAC,CAACI,UAAU;EACrDE,WAAW,EAAER,SAAS,CAACK,KAAK,CAAC;IAC3BI,SAAS,EAAET,SAAS,CAACU,MAAM;IAC3BC,WAAW,EAAEX,SAAS,CAACY,QAAQ,CAC7BZ,SAAS,CAACa,SAAS,CAAC,CAACb,SAAS,CAACU,MAAM,EAAEV,SAAS,CAACc,MAAM,EAAEd,SAAS,CAACe,MAAM,CAAC,CAC5E;EACF,CAAC,CAAC;EACFC,IAAI,EAAEhB,SAAS,CAACiB,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;EACzCC,YAAY,EAAElB,SAAS,CAACU,MAAM;EAC9BS,YAAY,EAAEnB,SAAS,CAACoB,IAAI;EAC5BC,YAAY,EAAErB,SAAS,CAACoB;AAC1B,CAAC;AACD,eAAejB,yBAAyB","ignoreList":[]}
+{"version":3,"file":"types.js","names":["PropTypes","ButtonLinkPropTypes","ButtonMenuPropTypes","ButtonMenuActionPropTypes","button","shape","isRequired","menu","menuWrapper","ariaLabel","string","customStyle","objectOf","oneOfType","number","object","type","oneOf","primaryColor","closeOnClick","bool","enableScroll"],"sources":["../../../src/molecule/button-menu-action/types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport ButtonLinkPropTypes, {ButtonLinkProps} from '../../atom/button-link/types';\nimport ButtonMenuPropTypes, {ButtonMenuProps} from '../../atom/button-menu/types';\n\nconst ButtonMenuActionPropTypes = {\n  button: PropTypes.shape(ButtonLinkPropTypes).isRequired,\n  menu: PropTypes.shape(ButtonMenuPropTypes).isRequired,\n  menuWrapper: PropTypes.shape({\n    ariaLabel: PropTypes.string,\n    customStyle: PropTypes.objectOf(\n      PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])\n    )\n  }),\n  type: PropTypes.oneOf(['button', 'link']),\n  primaryColor: PropTypes.string,\n  closeOnClick: PropTypes.bool,\n  enableScroll: PropTypes.bool\n};\nexport default ButtonMenuActionPropTypes;\n\nexport type ButtonMenuActionProps = {\n  button: ButtonLinkProps;\n  menu: ButtonMenuProps;\n  menuWrapper?: {\n    ariaLabel?: string;\n    customStyle?: Record<string, string | number>;\n  };\n  type?: 'button' | 'link';\n  primaryColor?: string;\n  containerCustom?: Record<string, string | number>;\n  closeOnClick?: boolean;\n  enableScroll?: boolean;\n};\n\nexport type ButtonMenuActionPropsFixture = {props: ButtonMenuActionProps};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAAyB,8BAA8B;AACjF,OAAOC,mBAAmB,MAAyB,8BAA8B;AAEjF,MAAMC,yBAAyB,GAAG;EAChCC,MAAM,EAAEJ,SAAS,CAACK,KAAK,CAACJ,mBAAmB,CAAC,CAACK,UAAU;EACvDC,IAAI,EAAEP,SAAS,CAACK,KAAK,CAACH,mBAAmB,CAAC,CAACI,UAAU;EACrDE,WAAW,EAAER,SAAS,CAACK,KAAK,CAAC;IAC3BI,SAAS,EAAET,SAAS,CAACU,MAAM;IAC3BC,WAAW,EAAEX,SAAS,CAACY,QAAQ,CAC7BZ,SAAS,CAACa,SAAS,CAAC,CAACb,SAAS,CAACU,MAAM,EAAEV,SAAS,CAACc,MAAM,EAAEd,SAAS,CAACe,MAAM,CAAC,CAC5E;EACF,CAAC,CAAC;EACFC,IAAI,EAAEhB,SAAS,CAACiB,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;EACzCC,YAAY,EAAElB,SAAS,CAACU,MAAM;EAC9BS,YAAY,EAAEnB,SAAS,CAACoB,IAAI;EAC5BC,YAAY,EAAErB,SAAS,CAACoB;AAC1B,CAAC;AACD,eAAejB,yBAAyB","ignoreList":[]}

package/es/organism/header-with-actions/index.d.ts

@@ -4,10 +4,7 @@ declare const HeaderWithActions: {
     (props: HeaderWithActionsProps): JSX.Element;
     propTypes: {
         closeButton: import("prop-types").Requireable<import("prop-types").InferProps<{
-            size: import("prop-types").Validator<string>;
-            icon: import("prop-types").Validator<string>;
-            'data-name': import("prop-types").Validator<string>;
-            'aria-label': import("prop-types").Validator<string>;
+            'aria-label': import("prop-types").Requireable<string>;
             onClick: import("prop-types").Validator<(...args: any[]) => any>;
         }>>;
         title: import("prop-types").Validator<string>;
@@ -20,80 +17,25 @@ declare const HeaderWithActions: {
             display: import("prop-types").Validator<boolean>;
             label: import("prop-types").Requireable<string>;
         }>>>;
-        bulletPointMenuButton: import("prop-types").Requireable<import("prop-types").InferProps<{
-            'data-name': import("prop-types").Requireable<string>;
+        actionButtons: import("prop-types").Validator<(import("prop-types").InferProps<{
+            type: import("prop-types").Requireable<string>;
+            label: import("prop-types").Validator<string>;
+            onClick: import("prop-types").Validator<(...args: any[]) => any>;
             disabled: import("prop-types").Requireable<boolean>;
-            buttonAriaLabel: import("prop-types").Requireable<string>;
-            menuAriaLabel: import("prop-types").Requireable<string>;
+            iconName: import("prop-types").Requireable<string>;
+            iconColor: import("prop-types").Requireable<string>;
+        }> | null | undefined)[]>;
+        bulletPointMenuButtonPropTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
             buttons: import("prop-types").Validator<(import("prop-types").InferProps<{
-                'data-name': import("prop-types").Requireable<string>;
-                disabled: import("prop-types").Requireable<boolean>;
+                dataName: import("prop-types").Requireable<string>;
                 label: import("prop-types").Validator<string>;
-                onClick: import("prop-types").Requireable<(...args: any[]) => any>;
-                type: import("prop-types").Requireable<string>;
-                buttonLinkType: import("prop-types").Requireable<string>;
-                icon: import("prop-types").Requireable<import("prop-types").InferProps<{
-                    theme: import("prop-types").Requireable<string>;
-                    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;
-                        }>;
-                    }>>;
-                }>>;
-                customStyle: import("prop-types").Requireable<{
-                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
-                }>;
-                customLabelClassName: import("prop-types").Requireable<string>;
+                iconName: import("prop-types").Validator<string>;
+                iconColor: import("prop-types").Validator<string>;
+                onClick: import("prop-types").Validator<(...args: any[]) => any>;
             }> | null | undefined)[]>;
-            onClick: import("prop-types").Requireable<(...args: any[]) => any>;
-            menuButtonClassName: import("prop-types").Requireable<string>;
-            isBulkMenu: import("prop-types").Requireable<boolean>;
+            onClick: import("prop-types").Validator<(...args: any[]) => any>;
+            buttonAriaLabel: import("prop-types").Requireable<string>;
         }>>;
-        actionButtons: import("prop-types").Validator<(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>;
-        }> | null | undefined)[]>;
     };
 };
 export default HeaderWithActions;

package/es/organism/header-with-actions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/index.tsx"],"names":[],"mappings":";AAQA,OAAmC,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAO3E,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/header-with-actions/index.tsx"],"names":[],"mappings":";AAOA,OAAmC,EACjC,sBAAsB,EAGvB,MAAM,SAAS,CAAC;AAuEjB,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCvD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/es/organism/header-with-actions/index.js

@@ -13,6 +13,74 @@ const getDataName = suffix => `header-with-actions-${suffix}`;
 const uncappedMap = map.convert({
   cap: false
 });
+const buildCloseButton = ({
+  onClick,
+  ariaLabel
+}) => {
+  return {
+    size: 'default',
+    icon: 'close',
+    'data-name': 'close-button',
+    'aria-label': ariaLabel,
+    onClick
+  };
+};
+const buildButtonMenu = ({
+  dataName,
+  label,
+  iconName,
+  iconColor,
+  onClick
+}) => {
+  return {
+    'data-name': dataName,
+    label,
+    buttonLinkType: 'tertiary',
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: iconName,
+        color: iconColor,
+        size: 14
+      }
+    },
+    onClick,
+    type: iconName === 'trash' ? 'dangerousLeft' : 'defaultLeft'
+  };
+};
+const buildActionButton = ({
+  type,
+  label,
+  onClick,
+  disabled,
+  iconName,
+  iconColor
+}) => {
+  const base = {
+    type,
+    label,
+    onClick,
+    disabled,
+    customStyle: {
+      fontWeight: '600',
+      borderRadius: '12px'
+    }
+  };
+  if (iconName && iconColor) {
+    return {
+      ...base,
+      icon: {
+        position: 'left',
+        faIcon: {
+          name: iconName,
+          color: iconColor,
+          size: 14
+        }
+      }
+    };
+  }
+  return base;
+};
 const HeaderWithActions = props => {
   const {
     closeButton,
@@ -28,7 +96,10 @@ const HeaderWithActions = props => {
   }, /*#__PURE__*/React.createElement("div", {
     className: style.titleAndButtonWrapper,
     "data-name": getDataName('title-and-button-wrapper')
-  }, /*#__PURE__*/React.createElement(ButtonLinkIcon, _extends({}, closeButton, {
+  }, /*#__PURE__*/React.createElement(ButtonLinkIcon, _extends({}, buildCloseButton({
+    onClick: closeButton.onClick,
+    ariaLabel: closeButton['aria-label']
+  }), {
     className: style.button
   })), /*#__PURE__*/React.createElement("div", {
     className: style.titleWrapper
@@ -44,9 +115,9 @@ const HeaderWithActions = props => {
     className: style.buttonsWrapper,
     "data-name": getDataName('buttons-wrapper')
   }, bulletPointMenuButton && !isEmpty(bulletPointMenuButton.buttons) ? /*#__PURE__*/React.createElement(BulletPointMenuButton, _extends({}, bulletPointMenuButton, {
-    buttonAriaLabel: "More actions"
+    buttons: uncappedMap(buildButtonMenu, bulletPointMenuButton.buttons)
   })) : null, uncappedMap((action, key) => {
-    return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, action, {
+    return /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buildActionButton(action), {
       key: key
     }));
   }, actionButtons)));

package/es/organism/header-with-actions/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","isEmpty","map","ButtonLink","ButtonLinkIcon","Tag","BulletPointMenuButton","headerWithActionsPropTypes","style","getDataName","suffix","uncappedMap","convert","cap","HeaderWithActions","props","closeButton","title","tag","saveStatus","bulletPointMenuButton","actionButtons","createElement","className","headerWrapper","titleAndButtonWrapper","_extends","button","titleWrapper","statusWrapper","display","label","buttonsWrapper","buttons","buttonAriaLabel","action","key","propTypes","process","env","NODE_ENV"],"sources":["../../../src/organism/header-with-actions/index.tsx"],"sourcesContent":["import React from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Tag from '../../atom/tag';\nimport {ButtonLinkProps} from '../../atom/button-link/types';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport headerWithActionsPropTypes, {HeaderWithActionsProps} from './types';\nimport style from './style.css';\n\nconst getDataName = (suffix: string) => `header-with-actions-${suffix}`;\n// @ts-expect-error (need to get the index)\nconst uncappedMap = map.convert({cap: false});\n\nconst HeaderWithActions = (props: HeaderWithActionsProps) => {\n  const {closeButton, title, tag, saveStatus, bulletPointMenuButton, actionButtons} = props;\n\n  return (\n    <div className={style.headerWrapper} data-name={getDataName('wrapper')}>\n      <div\n        className={style.titleAndButtonWrapper}\n        data-name={getDataName('title-and-button-wrapper')}\n      >\n        <ButtonLinkIcon {...closeButton} className={style.button} />\n        <div className={style.titleWrapper}>\n          <div className={style.statusWrapper}>\n            <Tag {...tag} />\n            {saveStatus.display && saveStatus.label ? (\n              <p className={style.saveStatus}>{saveStatus.label}</p>\n            ) : null}\n          </div>\n          <h3 className={style.title} aria-label={title} data-name={getDataName('title')}>\n            {title}\n          </h3>\n        </div>\n      </div>\n      <div className={style.buttonsWrapper} data-name={getDataName('buttons-wrapper')}>\n        {bulletPointMenuButton && !isEmpty(bulletPointMenuButton.buttons) ? (\n          <BulletPointMenuButton {...bulletPointMenuButton} buttonAriaLabel=\"More actions\" />\n        ) : null}\n        {uncappedMap((action: ButtonLinkProps, key: string) => {\n          return <ButtonLink {...action} key={key} />;\n        }, actionButtons)}\n      </div>\n    </div>\n  );\n};\n\nHeaderWithActions.propTypes = headerWithActionsPropTypes;\n\nexport default HeaderWithActions;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,GAAG,MAAM,eAAe;AAC/B,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,GAAG,MAAM,gBAAgB;AAEhC,OAAOC,qBAAqB,MAAM,yCAAyC;AAC3E,OAAOC,0BAA0B,MAAgC,SAAS;AAC1E,OAAOC,KAAK,MAAM,aAAa;AAE/B,MAAMC,WAAW,GAAIC,MAAc,IAAK,uBAAuBA,MAAM,EAAE;AACvE;AACA,MAAMC,WAAW,GAAGT,GAAG,CAACU,OAAO,CAAC;EAACC,GAAG,EAAE;AAAK,CAAC,CAAC;AAE7C,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EAC3D,MAAM;IAACC,WAAW;IAAEC,KAAK;IAAEC,GAAG;IAAEC,UAAU;IAAEC,qBAAqB;IAAEC;EAAa,CAAC,GAAGN,KAAK;EAEzF,oBACEf,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACgB,aAAc;IAAC,aAAWf,WAAW,CAAC,SAAS;EAAE,gBACrET,KAAA,CAAAsB,aAAA;IACEC,SAAS,EAAEf,KAAK,CAACiB,qBAAsB;IACvC,aAAWhB,WAAW,CAAC,0BAA0B;EAAE,gBAEnDT,KAAA,CAAAsB,aAAA,CAAClB,cAAc,EAAAsB,QAAA,KAAKV,WAAW;IAAEO,SAAS,EAAEf,KAAK,CAACmB;EAAO,EAAE,CAAC,eAC5D3B,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACoB;EAAa,gBACjC5B,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACqB;EAAc,gBAClC7B,KAAA,CAAAsB,aAAA,CAACjB,GAAG,EAAKa,GAAM,CAAC,EACfC,UAAU,CAACW,OAAO,IAAIX,UAAU,CAACY,KAAK,gBACrC/B,KAAA,CAAAsB,aAAA;IAAGC,SAAS,EAAEf,KAAK,CAACW;EAAW,GAAEA,UAAU,CAACY,KAAS,CAAC,GACpD,IACD,CAAC,eACN/B,KAAA,CAAAsB,aAAA;IAAIC,SAAS,EAAEf,KAAK,CAACS,KAAM;IAAC,cAAYA,KAAM;IAAC,aAAWR,WAAW,CAAC,OAAO;EAAE,GAC5EQ,KACC,CACD,CACF,CAAC,eACNjB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAEf,KAAK,CAACwB,cAAe;IAAC,aAAWvB,WAAW,CAAC,iBAAiB;EAAE,GAC7EW,qBAAqB,IAAI,CAACnB,OAAO,CAACmB,qBAAqB,CAACa,OAAO,CAAC,gBAC/DjC,KAAA,CAAAsB,aAAA,CAAChB,qBAAqB,EAAAoB,QAAA,KAAKN,qBAAqB;IAAEc,eAAe,EAAC;EAAc,EAAE,CAAC,GACjF,IAAI,EACPvB,WAAW,CAAC,CAACwB,MAAuB,EAAEC,GAAW,KAAK;IACrD,oBAAOpC,KAAA,CAAAsB,aAAA,CAACnB,UAAU,EAAAuB,QAAA,KAAKS,MAAM;MAAEC,GAAG,EAAEA;IAAI,EAAE,CAAC;EAC7C,CAAC,EAAEf,aAAa,CACb,CACF,CAAC;AAEV,CAAC;AAEDP,iBAAiB,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBAAGjC,0BAA0B;AAExD,eAAeO,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","isEmpty","map","ButtonLink","ButtonLinkIcon","Tag","BulletPointMenuButton","headerWithActionsPropTypes","style","getDataName","suffix","uncappedMap","convert","cap","buildCloseButton","onClick","ariaLabel","size","icon","buildButtonMenu","dataName","label","iconName","iconColor","buttonLinkType","position","faIcon","name","color","type","buildActionButton","disabled","base","customStyle","fontWeight","borderRadius","HeaderWithActions","props","closeButton","title","tag","saveStatus","bulletPointMenuButton","actionButtons","createElement","className","headerWrapper","titleAndButtonWrapper","_extends","button","titleWrapper","statusWrapper","display","buttonsWrapper","buttons","action","key","propTypes","process","env","NODE_ENV"],"sources":["../../../src/organism/header-with-actions/index.tsx"],"sourcesContent":["import React from 'react';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport ButtonLink from '../../atom/button-link';\nimport ButtonLinkIcon from '../../atom/button-link-icon';\nimport Tag from '../../atom/tag';\nimport BulletPointMenuButton from '../../molecule/bullet-point-menu-button';\nimport headerWithActionsPropTypes, {\n  HeaderWithActionsProps,\n  ButtonMenuProps,\n  ButtonActionProps\n} from './types';\nimport style from './style.css';\n\nconst getDataName = (suffix: string) => `header-with-actions-${suffix}`;\n// @ts-expect-error (need to get the index)\nconst uncappedMap = map.convert({cap: false});\n\nconst buildCloseButton = ({onClick, ariaLabel}: {onClick: () => void; ariaLabel: string}) => {\n  return {\n    size: 'default',\n    icon: 'close',\n    'data-name': 'close-button',\n    'aria-label': ariaLabel,\n    onClick\n  };\n};\n\nconst buildButtonMenu = ({dataName, label, iconName, iconColor, onClick}: ButtonMenuProps) => {\n  return {\n    'data-name': dataName,\n    label,\n    buttonLinkType: 'tertiary',\n    icon: {\n      position: 'left' as const,\n      faIcon: {\n        name: iconName,\n        color: iconColor,\n        size: 14\n      }\n    },\n    onClick,\n    type: iconName === 'trash' ? 'dangerousLeft' : 'defaultLeft'\n  };\n};\n\nconst buildActionButton = ({\n  type,\n  label,\n  onClick,\n  disabled,\n  iconName,\n  iconColor\n}: ButtonActionProps) => {\n  const base = {\n    type,\n    label,\n    onClick,\n    disabled,\n    customStyle: {\n      fontWeight: '600',\n      borderRadius: '12px'\n    }\n  };\n\n  if (iconName && iconColor) {\n    return {\n      ...base,\n      icon: {\n        position: 'left' as const,\n        faIcon: {\n          name: iconName,\n          color: iconColor,\n          size: 14\n        }\n      }\n    };\n  }\n\n  return base;\n};\n\nconst HeaderWithActions = (props: HeaderWithActionsProps) => {\n  const {closeButton, title, tag, saveStatus, bulletPointMenuButton, actionButtons} = props;\n\n  return (\n    <div className={style.headerWrapper} data-name={getDataName('wrapper')}>\n      <div\n        className={style.titleAndButtonWrapper}\n        data-name={getDataName('title-and-button-wrapper')}\n      >\n        <ButtonLinkIcon\n          {...buildCloseButton({\n            onClick: closeButton.onClick,\n            ariaLabel: closeButton['aria-label']\n          })}\n          className={style.button}\n        />\n        <div className={style.titleWrapper}>\n          <div className={style.statusWrapper}>\n            <Tag {...tag} />\n            {saveStatus.display && saveStatus.label ? (\n              <p className={style.saveStatus}>{saveStatus.label}</p>\n            ) : null}\n          </div>\n          <h3 className={style.title} aria-label={title} data-name={getDataName('title')}>\n            {title}\n          </h3>\n        </div>\n      </div>\n      <div className={style.buttonsWrapper} data-name={getDataName('buttons-wrapper')}>\n        {bulletPointMenuButton && !isEmpty(bulletPointMenuButton.buttons) ? (\n          <BulletPointMenuButton\n            {...bulletPointMenuButton}\n            buttons={uncappedMap(buildButtonMenu, bulletPointMenuButton.buttons)}\n          />\n        ) : null}\n        {uncappedMap((action: ButtonActionProps, key: string) => {\n          return <ButtonLink {...buildActionButton(action)} key={key} />;\n        }, actionButtons)}\n      </div>\n    </div>\n  );\n};\n\nHeaderWithActions.propTypes = headerWithActionsPropTypes;\n\nexport default HeaderWithActions;\n"],"mappings":"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","ignoreList":[]}