@ntbjs/react-components 2.0.7-rc.1 → 2.0.8-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/build/data/Alert/Alert.js +1 -1
  2. package/build/data/Alert/Alert.js.map +1 -1
  3. package/build/data/Alert/Alert.styled.js +1 -1
  4. package/build/data/Alert/Alert.styled.js.map +1 -1
  5. package/build/data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js +69 -0
  6. package/build/data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js.map +1 -0
  7. package/build/data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.styled.js +72 -0
  8. package/build/data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.styled.js.map +1 -0
  9. package/build/data/index.js +1 -0
  10. package/build/data/index.js.map +1 -1
  11. package/build/icons/index.js +3 -2
  12. package/build/icons/info-yellow.svg +11 -0
  13. package/build/inputs/Button/Button.js +18 -4
  14. package/build/inputs/Button/Button.js.map +1 -1
  15. package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js +1 -0
  16. package/build/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js.map +1 -1
  17. package/build/inputs/CompactStarRating/CompactStarRating.js +1 -0
  18. package/build/inputs/CompactStarRating/CompactStarRating.js.map +1 -1
  19. package/build/inputs/CompactTextInput/CompactTextInput.js +2 -1
  20. package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
  21. package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js +1 -0
  22. package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
  23. package/build/inputs/TextArea/TextArea.js +1 -0
  24. package/build/inputs/TextArea/TextArea.js.map +1 -1
  25. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +5 -6
  26. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
  27. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +20 -2
  28. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
  29. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js +5 -7
  30. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js.map +1 -1
  31. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js +17 -3
  32. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js.map +1 -1
  33. package/build/widgets/AssetGallery/asset.propType.js +1 -0
  34. package/build/widgets/AssetGallery/asset.propType.js.map +1 -1
  35. package/build/widgets/SummaryCard/SummaryCard.js +8 -13
  36. package/build/widgets/SummaryCard/SummaryCard.js.map +1 -1
  37. package/build/widgets/SummaryCard/SummaryCard.styled.js +2 -2
  38. package/build/widgets/SummaryCard/SummaryCard.styled.js.map +1 -1
  39. package/icons/index.js +3 -2
  40. package/icons/info-yellow.svg +11 -0
  41. package/package.json +1 -1
@@ -45,7 +45,7 @@ const Alert = React__default.forwardRef(function Alert({
45
45
  width: width
46
46
  }, props), React__default.createElement(AlertRender, {
47
47
  fontSize: fontSize,
48
- lineHeight: lineHeight,
48
+ $lineHeight: lineHeight,
49
49
  $lineClamp: lineClamp
50
50
  }, icon, " ", React__default.createElement("span", null, alertMessage)));
51
51
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","sources":["../../../src/components/data/Alert/Alert.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './Alert.styled';\nimport { isEmpty } from 'lodash';\n\n/**\n * Alert display warnings or errors.\n *\n * ### Import\n *\n * ``` js\n * import { Alert } from '@ntbjs/react-components/data'\n * // or\n * import Alert from '@ntbjs/react-components/data/Alert'\n * ```\n * ## Props\n * ```\n * Pass one of `warning`, `error` or `info` to the `type` prop to render the right Alert.\n * Pass `align={left}`or `align={center}` to align content.\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `alertMessage={'message'} to display the message\n * Pass `fontSize={number}` to set the font size of the message in pixel\n * Pass `lineHeight={number}` to set the line height of the message in pixel\n * Pass `lineClamp={number}` to set the number of lines before the message will be truncated\n * Pass `verticalPadding={number}` to set the top and bottom padding of the alert in pixel\n * Pass `horizontalPadding={number}` to set the left and right padding of the alert in pixel\n * Pass `width={number}` to set the width of the alert in pixel\n * ```\n * ### Warning / Error / Info\n * ```\n * <Alert type={\"warning\"} />\n * <Alert type={\"error\"} />\n * <Alert type={\"info\"} />\n * ```\n */\n\nconst Alert = React.forwardRef(function Alert(\n {\n type,\n alertMessage,\n align,\n icon,\n fontSize,\n lineHeight,\n lineClamp,\n verticalPadding,\n horizontalPadding,\n width,\n ...props\n },\n forwardedRef\n) {\n let isWarning = false;\n let isError = false;\n let isInfo = true;\n\n if (!isEmpty(type)) {\n if (type === 'warning') {\n isWarning = true;\n } else if (type === 'error') {\n isError = true;\n } else {\n isInfo = true;\n }\n } else {\n if (isWarning || isError) {\n isInfo = false;\n }\n }\n\n return (\n <S.Alert\n ref={forwardedRef}\n $alertMessage={alertMessage}\n $warning={isWarning}\n $error={isError}\n $info={isInfo}\n $align={align}\n $verticalPadding={verticalPadding}\n $horizontalPadding={horizontalPadding}\n width={width}\n {...props}\n >\n <S.AlertRender fontSize={fontSize} lineHeight={lineHeight} $lineClamp={lineClamp}>\n {icon} <span>{alertMessage}</span>\n </S.AlertRender>\n </S.Alert>\n );\n});\n\nAlert.propTypes = {\n /**\n * Type of alert that will be reflected by the background color of it.\n */\n type: PropTypes.oneOf(['warning', 'error', 'info']),\n /**\n * Icon that will be displayed on the left of the alert message.\n */\n icon: PropTypes.element,\n /**\n * Alignment of the alert message.\n */\n align: PropTypes.oneOf(['left', 'center']),\n /**\n * Message that will be displayed on the alert.\n */\n alertMessage: PropTypes.string,\n /**\n * Font size of the alert message in pixel.\n */\n fontSize: PropTypes.number,\n /**\n * Line height of the alert message in pixel.\n */\n lineHeight: PropTypes.number,\n /**\n * Number of lines that will be displayed before the message will be truncated and replaced with ellipsis.\n */\n lineClamp: PropTypes.number,\n /**\n * The top and bottom padding of the alert in pixel.\n */\n verticalPadding: PropTypes.number,\n /**\n * The left and right padding of the alert in pixel.\n */\n horizontalPadding: PropTypes.number,\n /**\n * Custom width of the alert in pixel.\n */\n width: PropTypes.number\n};\n\nAlert.defaultProps = {\n align: 'left',\n alertMessage:\n 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',\n lineClamp: 0,\n horizontalPadding: 30,\n verticalPadding: 17\n};\n\nexport default Alert;\n"],"names":["Alert","React","forwardRef","type","alertMessage","align","icon","fontSize","lineHeight","lineClamp","verticalPadding","horizontalPadding","width","props","forwardedRef","isWarning","isError","isInfo","isEmpty","createElement","S","_extends","ref","$alertMessage","$warning","$error","$info","$align","$verticalPadding","$horizontalPadding","$lineClamp","propTypes","process","env","NODE_ENV","PropTypes","oneOf","element","string","number","defaultProps"],"mappings":";;;;;;AAoCMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,YAAY;EACZC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,iBAAiB;EACjBC,KAAK;EACL,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,IAAIC,SAAS,GAAG,KAAK,CAAA;EACrB,IAAIC,OAAO,GAAG,KAAK,CAAA;EACnB,IAAIC,MAAM,GAAG,IAAI,CAAA;AAEjB,EAAA,IAAI,CAACC,OAAO,CAACf,IAAI,CAAC,EAAE;IAClB,IAAIA,IAAI,KAAK,SAAS,EAAE;AACtBY,MAAAA,SAAS,GAAG,IAAI,CAAA;AAClB,KAAC,MAAM,IAAIZ,IAAI,KAAK,OAAO,EAAE;AAC3Ba,MAAAA,OAAO,GAAG,IAAI,CAAA;AAChB,KAAC,MAAM;AACLC,MAAAA,MAAM,GAAG,IAAI,CAAA;AACf,KAAA;AACF,GAAC,MAAM;IACL,IAAIF,SAAS,IAAIC,OAAO,EAAE;AACxBC,MAAAA,MAAM,GAAG,KAAK,CAAA;AAChB,KAAA;AACF,GAAA;EAEA,OACEhB,cAAA,CAAAkB,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,aAAa,EAAEnB,YAAa;AAC5BoB,IAAAA,QAAQ,EAAET,SAAU;AACpBU,IAAAA,MAAM,EAAET,OAAQ;AAChBU,IAAAA,KAAK,EAAET,MAAO;AACdU,IAAAA,MAAM,EAAEtB,KAAM;AACduB,IAAAA,gBAAgB,EAAElB,eAAgB;AAClCmB,IAAAA,kBAAkB,EAAElB,iBAAkB;AACtCC,IAAAA,KAAK,EAAEA,KAAAA;GACHC,EAAAA,KAAK,GAETZ,cAAA,CAAAkB,aAAA,CAACC,WAAa,EAAA;AAACb,IAAAA,QAAQ,EAAEA,QAAS;AAACC,IAAAA,UAAU,EAAEA,UAAW;AAACsB,IAAAA,UAAU,EAAErB,SAAAA;GACpEH,EAAAA,IAAI,EAAC,GAAC,EAAAL,cAAA,CAAAkB,aAAA,CAAOf,MAAAA,EAAAA,IAAAA,EAAAA,YAAmB,CACpB,CACR,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFJ,KAAK,CAAC+B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIhB/B,EAAAA,IAAI,EAAEgC,SAAS,CAACC,KAAK,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;EAInD9B,IAAI,EAAE6B,SAAS,CAACE,OAAO;EAIvBhC,KAAK,EAAE8B,SAAS,CAACC,KAAK,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;EAI1ChC,YAAY,EAAE+B,SAAS,CAACG,MAAM;EAI9B/B,QAAQ,EAAE4B,SAAS,CAACI,MAAM;EAI1B/B,UAAU,EAAE2B,SAAS,CAACI,MAAM;EAI5B9B,SAAS,EAAE0B,SAAS,CAACI,MAAM;EAI3B7B,eAAe,EAAEyB,SAAS,CAACI,MAAM;EAIjC5B,iBAAiB,EAAEwB,SAAS,CAACI,MAAM;EAInC3B,KAAK,EAAEuB,SAAS,CAACI,MAAAA;AACnB,CAAC,GAAA,EAAA,CAAA;AAEDvC,KAAK,CAACwC,YAAY,GAAG;AACnBnC,EAAAA,KAAK,EAAE,MAAM;AACbD,EAAAA,YAAY,EACV,8GAA8G;AAChHK,EAAAA,SAAS,EAAE,CAAC;AACZE,EAAAA,iBAAiB,EAAE,EAAE;AACrBD,EAAAA,eAAe,EAAE,EAAA;AACnB,CAAC;;;;"}
1
+ {"version":3,"file":"Alert.js","sources":["../../../src/components/data/Alert/Alert.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './Alert.styled';\nimport { isEmpty } from 'lodash';\n\n/**\n * Alert display warnings or errors.\n *\n * ### Import\n *\n * ``` js\n * import { Alert } from '@ntbjs/react-components/data'\n * // or\n * import Alert from '@ntbjs/react-components/data/Alert'\n * ```\n * ## Props\n * ```\n * Pass one of `warning`, `error` or `info` to the `type` prop to render the right Alert.\n * Pass `align={left}`or `align={center}` to align content.\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `alertMessage={'message'} to display the message\n * Pass `fontSize={number}` to set the font size of the message in pixel\n * Pass `lineHeight={number}` to set the line height of the message in pixel\n * Pass `lineClamp={number}` to set the number of lines before the message will be truncated\n * Pass `verticalPadding={number}` to set the top and bottom padding of the alert in pixel\n * Pass `horizontalPadding={number}` to set the left and right padding of the alert in pixel\n * Pass `width={number}` to set the width of the alert in pixel\n * ```\n * ### Warning / Error / Info\n * ```\n * <Alert type={\"warning\"} />\n * <Alert type={\"error\"} />\n * <Alert type={\"info\"} />\n * ```\n */\n\nconst Alert = React.forwardRef(function Alert(\n {\n type,\n alertMessage,\n align,\n icon,\n fontSize,\n lineHeight,\n lineClamp,\n verticalPadding,\n horizontalPadding,\n width,\n ...props\n },\n forwardedRef\n) {\n let isWarning = false;\n let isError = false;\n let isInfo = true;\n\n if (!isEmpty(type)) {\n if (type === 'warning') {\n isWarning = true;\n } else if (type === 'error') {\n isError = true;\n } else {\n isInfo = true;\n }\n } else {\n if (isWarning || isError) {\n isInfo = false;\n }\n }\n\n return (\n <S.Alert\n ref={forwardedRef}\n $alertMessage={alertMessage}\n $warning={isWarning}\n $error={isError}\n $info={isInfo}\n $align={align}\n $verticalPadding={verticalPadding}\n $horizontalPadding={horizontalPadding}\n width={width}\n {...props}\n >\n <S.AlertRender fontSize={fontSize} $lineHeight={lineHeight} $lineClamp={lineClamp}>\n {icon} <span>{alertMessage}</span>\n </S.AlertRender>\n </S.Alert>\n );\n});\n\nAlert.propTypes = {\n /**\n * Type of alert that will be reflected by the background color of it.\n */\n type: PropTypes.oneOf(['warning', 'error', 'info']),\n /**\n * Icon that will be displayed on the left of the alert message.\n */\n icon: PropTypes.element,\n /**\n * Alignment of the alert message.\n */\n align: PropTypes.oneOf(['left', 'center']),\n /**\n * Message that will be displayed on the alert.\n */\n alertMessage: PropTypes.string,\n /**\n * Font size of the alert message in pixel.\n */\n fontSize: PropTypes.number,\n /**\n * Line height of the alert message in pixel.\n */\n lineHeight: PropTypes.number,\n /**\n * Number of lines that will be displayed before the message will be truncated and replaced with ellipsis.\n */\n lineClamp: PropTypes.number,\n /**\n * The top and bottom padding of the alert in pixel.\n */\n verticalPadding: PropTypes.number,\n /**\n * The left and right padding of the alert in pixel.\n */\n horizontalPadding: PropTypes.number,\n /**\n * Custom width of the alert in pixel.\n */\n width: PropTypes.number\n};\n\nAlert.defaultProps = {\n align: 'left',\n alertMessage:\n 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',\n lineClamp: 0,\n horizontalPadding: 30,\n verticalPadding: 17\n};\n\nexport default Alert;\n"],"names":["Alert","React","forwardRef","type","alertMessage","align","icon","fontSize","lineHeight","lineClamp","verticalPadding","horizontalPadding","width","props","forwardedRef","isWarning","isError","isInfo","isEmpty","createElement","S","_extends","ref","$alertMessage","$warning","$error","$info","$align","$verticalPadding","$horizontalPadding","$lineHeight","$lineClamp","propTypes","process","env","NODE_ENV","PropTypes","oneOf","element","string","number","defaultProps"],"mappings":";;;;;;AAoCMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,YAAY;EACZC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,iBAAiB;EACjBC,KAAK;EACL,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,IAAIC,SAAS,GAAG,KAAK,CAAA;EACrB,IAAIC,OAAO,GAAG,KAAK,CAAA;EACnB,IAAIC,MAAM,GAAG,IAAI,CAAA;AAEjB,EAAA,IAAI,CAACC,OAAO,CAACf,IAAI,CAAC,EAAE;IAClB,IAAIA,IAAI,KAAK,SAAS,EAAE;AACtBY,MAAAA,SAAS,GAAG,IAAI,CAAA;AAClB,KAAC,MAAM,IAAIZ,IAAI,KAAK,OAAO,EAAE;AAC3Ba,MAAAA,OAAO,GAAG,IAAI,CAAA;AAChB,KAAC,MAAM;AACLC,MAAAA,MAAM,GAAG,IAAI,CAAA;AACf,KAAA;AACF,GAAC,MAAM;IACL,IAAIF,SAAS,IAAIC,OAAO,EAAE;AACxBC,MAAAA,MAAM,GAAG,KAAK,CAAA;AAChB,KAAA;AACF,GAAA;EAEA,OACEhB,cAAA,CAAAkB,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,aAAa,EAAEnB,YAAa;AAC5BoB,IAAAA,QAAQ,EAAET,SAAU;AACpBU,IAAAA,MAAM,EAAET,OAAQ;AAChBU,IAAAA,KAAK,EAAET,MAAO;AACdU,IAAAA,MAAM,EAAEtB,KAAM;AACduB,IAAAA,gBAAgB,EAAElB,eAAgB;AAClCmB,IAAAA,kBAAkB,EAAElB,iBAAkB;AACtCC,IAAAA,KAAK,EAAEA,KAAAA;GACHC,EAAAA,KAAK,GAETZ,cAAA,CAAAkB,aAAA,CAACC,WAAa,EAAA;AAACb,IAAAA,QAAQ,EAAEA,QAAS;AAACuB,IAAAA,WAAW,EAAEtB,UAAW;AAACuB,IAAAA,UAAU,EAAEtB,SAAAA;GACrEH,EAAAA,IAAI,EAAC,GAAC,EAAAL,cAAA,CAAAkB,aAAA,CAAOf,MAAAA,EAAAA,IAAAA,EAAAA,YAAmB,CACpB,CACR,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFJ,KAAK,CAACgC,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIhBhC,EAAAA,IAAI,EAAEiC,SAAS,CAACC,KAAK,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;EAInD/B,IAAI,EAAE8B,SAAS,CAACE,OAAO;EAIvBjC,KAAK,EAAE+B,SAAS,CAACC,KAAK,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;EAI1CjC,YAAY,EAAEgC,SAAS,CAACG,MAAM;EAI9BhC,QAAQ,EAAE6B,SAAS,CAACI,MAAM;EAI1BhC,UAAU,EAAE4B,SAAS,CAACI,MAAM;EAI5B/B,SAAS,EAAE2B,SAAS,CAACI,MAAM;EAI3B9B,eAAe,EAAE0B,SAAS,CAACI,MAAM;EAIjC7B,iBAAiB,EAAEyB,SAAS,CAACI,MAAM;EAInC5B,KAAK,EAAEwB,SAAS,CAACI,MAAAA;AACnB,CAAC,GAAA,EAAA,CAAA;AAEDxC,KAAK,CAACyC,YAAY,GAAG;AACnBpC,EAAAA,KAAK,EAAE,MAAM;AACbD,EAAAA,YAAY,EACV,8GAA8G;AAChHK,EAAAA,SAAS,EAAE,CAAC;AACZE,EAAAA,iBAAiB,EAAE,EAAE;AACrBD,EAAAA,eAAe,EAAE,EAAA;AACnB,CAAC;;;;"}
@@ -37,7 +37,7 @@ const AlertRender = styled.div.withConfig({
37
37
  display: flex;
38
38
  align-items: center;
39
39
  word-break: break-word;
40
- ${props => props.lineHeight ? `line-height: ${props.lineHeight}px;` : null}
40
+ ${props => props.$lineHeight ? `line-height: ${props.$lineHeight}px;` : null}
41
41
  ${props => props.fontSize ? `font-size: ${props.fontSize}px;` : null}
42
42
  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
43
43
 
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.styled.js","sources":["../../../src/components/data/Alert/Alert.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Alert = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: column;\n padding: ${props => {\n const verticalPadding = props.$verticalPadding ?? 17;\n const horizontalPadding = props.$horizontalPadding ?? 30;\n return `${verticalPadding}px ${horizontalPadding}px`;\n }};\n width: ${props => (props.width ? `${props.width}px` : '100%')};\n box-sizing: border-box;\n\n ${props =>\n props.$warning &&\n css`\n ${props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))}\n `}\n\n ${props =>\n props.$error &&\n css`\n ${props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))}\n `}\n \n ${props =>\n props.$info &&\n css`\n background: transparent;\n `}\n \n text-align: ${props => (props.align === 'center' ? 'center' : 'left')};\n`;\n\nexport const AlertRender = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n word-break: break-word;\n ${props => (props.lineHeight ? `line-height: ${props.lineHeight}px;` : null)}\n ${props => (props.fontSize ? `font-size: ${props.fontSize}px;` : null)}\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n span {\n flex: 1;\n padding-left: 5px;\n ${props =>\n props.$lineClamp\n ? css`\n display: -webkit-box;\n -webkit-line-clamp: ${props.$lineClamp};\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : null};\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Alert","styled","div","withConfig","attrs","applyDefaultTheme","props","verticalPadding","$verticalPadding","horizontalPadding","$horizontalPadding","width","$warning","css","theme","themeProp","getColor","$error","$info","align","AlertRender","lineHeight","fontSize","$lineClamp"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,KAAK,GAAGC,MAAM,CAACC,GAAG,CAC5BC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA,WAAA,EAAaC,KAAK,IAAI;AAClB,EAAA,MAAMC,eAAe,GAAGD,KAAK,CAACE,gBAAgB,IAAI,EAAE,CAAA;AACpD,EAAA,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,kBAAkB,IAAI,EAAE,CAAA;AACxD,EAAA,OAAO,CAAGH,EAAAA,eAAe,CAAME,GAAAA,EAAAA,iBAAiB,CAAI,EAAA,CAAA,CAAA;AACtD,CAAC,CAAA;AACH,SAAA,EAAWH,KAAK,IAAKA,KAAK,CAACK,KAAK,GAAG,CAAGL,EAAAA,KAAK,CAACK,KAAK,CAAI,EAAA,CAAA,GAAG,MAAO,CAAA;AAC/D;AACA;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdC,GAAG,CAAA;AACP,MAAA,EAAQP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AACjG,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIV,KAAK,IACLA,KAAK,CAACW,MAAM,IACZJ,GAAG,CAAA;AACP,MAAA,EAAQP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAA;AACvF,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIV,KAAK,IACLA,KAAK,CAACY,KAAK,IACXL,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA,cAAgBP,EAAAA,KAAK,IAAKA,KAAK,CAACa,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAO,CAAA;AACvE,EAAC;AAEM,MAAMC,WAAW,GAAGnB,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,EAAA,EAAIC,KAAK,IAAKA,KAAK,CAACe,UAAU,GAAG,CAAgBf,aAAAA,EAAAA,KAAK,CAACe,UAAU,CAAK,GAAA,CAAA,GAAG,IAAK,CAAA;AAC9E,EAAA,EAAIf,KAAK,IAAKA,KAAK,CAACgB,QAAQ,GAAG,CAAchB,WAAAA,EAAAA,KAAK,CAACgB,QAAQ,CAAK,GAAA,CAAA,GAAG,IAAK,CAAA;AACxE,EAAIhB,EAAAA,KAAK,IACLA,KAAK,CAACQ,KAAK,CAACC,SAAS,CACnB,OAAO,EACPT,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,EAC7BV,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMV,KAAK,IACLA,KAAK,CAACiB,UAAU,GACZV,GAAG,CAAA;AACb;AACA,gCAAkCP,EAAAA,KAAK,CAACiB,UAAU,CAAA;AAClD;AACA;AACA;AACA,UAAA,CAAW,GACD,IAAI,CAAA;AACd;AACA;;;;"}
1
+ {"version":3,"file":"Alert.styled.js","sources":["../../../src/components/data/Alert/Alert.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Alert = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: column;\n padding: ${props => {\n const verticalPadding = props.$verticalPadding ?? 17;\n const horizontalPadding = props.$horizontalPadding ?? 30;\n return `${verticalPadding}px ${horizontalPadding}px`;\n }};\n width: ${props => (props.width ? `${props.width}px` : '100%')};\n box-sizing: border-box;\n\n ${props =>\n props.$warning &&\n css`\n ${props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))}\n `}\n\n ${props =>\n props.$error &&\n css`\n ${props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))}\n `}\n \n ${props =>\n props.$info &&\n css`\n background: transparent;\n `}\n \n text-align: ${props => (props.align === 'center' ? 'center' : 'left')};\n`;\n\nexport const AlertRender = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n word-break: break-word;\n ${props => (props.$lineHeight ? `line-height: ${props.$lineHeight}px;` : null)}\n ${props => (props.fontSize ? `font-size: ${props.fontSize}px;` : null)}\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n span {\n flex: 1;\n padding-left: 5px;\n ${props =>\n props.$lineClamp\n ? css`\n display: -webkit-box;\n -webkit-line-clamp: ${props.$lineClamp};\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n `\n : null};\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Alert","styled","div","withConfig","attrs","applyDefaultTheme","props","verticalPadding","$verticalPadding","horizontalPadding","$horizontalPadding","width","$warning","css","theme","themeProp","getColor","$error","$info","align","AlertRender","$lineHeight","fontSize","$lineClamp"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,KAAK,GAAGC,MAAM,CAACC,GAAG,CAC5BC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA,WAAA,EAAaC,KAAK,IAAI;AAClB,EAAA,MAAMC,eAAe,GAAGD,KAAK,CAACE,gBAAgB,IAAI,EAAE,CAAA;AACpD,EAAA,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,kBAAkB,IAAI,EAAE,CAAA;AACxD,EAAA,OAAO,CAAGH,EAAAA,eAAe,CAAME,GAAAA,EAAAA,iBAAiB,CAAI,EAAA,CAAA,CAAA;AACtD,CAAC,CAAA;AACH,SAAA,EAAWH,KAAK,IAAKA,KAAK,CAACK,KAAK,GAAG,CAAGL,EAAAA,KAAK,CAACK,KAAK,CAAI,EAAA,CAAA,GAAG,MAAO,CAAA;AAC/D;AACA;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdC,GAAG,CAAA;AACP,MAAA,EAAQP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AACjG,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIV,KAAK,IACLA,KAAK,CAACW,MAAM,IACZJ,GAAG,CAAA;AACP,MAAA,EAAQP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAA;AACvF,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIV,KAAK,IACLA,KAAK,CAACY,KAAK,IACXL,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA,cAAgBP,EAAAA,KAAK,IAAKA,KAAK,CAACa,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAO,CAAA;AACvE,EAAC;AAEM,MAAMC,WAAW,GAAGnB,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,EAAA,EAAIC,KAAK,IAAKA,KAAK,CAACe,WAAW,GAAG,CAAgBf,aAAAA,EAAAA,KAAK,CAACe,WAAW,CAAK,GAAA,CAAA,GAAG,IAAK,CAAA;AAChF,EAAA,EAAIf,KAAK,IAAKA,KAAK,CAACgB,QAAQ,GAAG,CAAchB,WAAAA,EAAAA,KAAK,CAACgB,QAAQ,CAAK,GAAA,CAAA,GAAG,IAAK,CAAA;AACxE,EAAIhB,EAAAA,KAAK,IACLA,KAAK,CAACQ,KAAK,CAACC,SAAS,CACnB,OAAO,EACPT,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,EAC7BV,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMV,KAAK,IACLA,KAAK,CAACiB,UAAU,GACZV,GAAG,CAAA;AACb;AACA,gCAAkCP,EAAAA,KAAK,CAACiB,UAAU,CAAA;AAClD;AACA;AACA;AACA,UAAA,CAAW,GACD,IAAI,CAAA;AACd;AACA;;;;"}
@@ -0,0 +1,69 @@
1
+ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
+ import React__default from 'react';
3
+ import PropTypes from 'prop-types';
4
+ import { Card, BadgePill, BadgeText, InstructionText } from './InstructionsSeverityDisplay.styled.js';
5
+
6
+ const InformationIcon = () => React__default.createElement("svg", {
7
+ width: "12",
8
+ height: "12",
9
+ viewBox: "0 0 12 12",
10
+ fill: "none",
11
+ xmlns: "http://www.w3.org/2000/svg"
12
+ }, React__default.createElement("path", {
13
+ d: "M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z",
14
+ fill: "currentColor"
15
+ }));
16
+ const getSeverityConfig = severity => {
17
+ switch (severity) {
18
+ case 1:
19
+ case 2:
20
+ return {
21
+ label: 'Info'
22
+ };
23
+ case 3:
24
+ case 4:
25
+ return {
26
+ label: 'Limited use'
27
+ };
28
+ case 5:
29
+ return {
30
+ label: 'Highly restricted'
31
+ };
32
+ default:
33
+ return null;
34
+ }
35
+ };
36
+ const InstructionsSeverityDisplay = React__default.forwardRef(function InstructionsSeverityDisplay({
37
+ severity,
38
+ instructionText,
39
+ severityLabel,
40
+ icon,
41
+ showCard = true,
42
+ ...props
43
+ }, forwardedRef) {
44
+ if (!instructionText) {
45
+ return null;
46
+ }
47
+ const config = getSeverityConfig(severity);
48
+ if (!config) {
49
+ return null;
50
+ }
51
+ const displayLabel = severityLabel || config.label;
52
+ return React__default.createElement(Card, _extends({
53
+ ref: forwardedRef,
54
+ $severity: severity,
55
+ $showCard: showCard
56
+ }, props), React__default.createElement(BadgePill, {
57
+ $severity: severity
58
+ }, icon || React__default.createElement(InformationIcon, null), React__default.createElement(BadgeText, null, displayLabel)), React__default.createElement(InstructionText, null, instructionText));
59
+ });
60
+ InstructionsSeverityDisplay.propTypes = process.env.NODE_ENV !== "production" ? {
61
+ severity: PropTypes.oneOf([1, 2, 3, 4, 5]),
62
+ instructionText: PropTypes.string,
63
+ severityLabel: PropTypes.string,
64
+ icon: PropTypes.element,
65
+ showCard: PropTypes.bool
66
+ } : {};
67
+
68
+ export { InstructionsSeverityDisplay as default };
69
+ //# sourceMappingURL=InstructionsSeverityDisplay.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InstructionsSeverityDisplay.js","sources":["../../../src/components/data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './InstructionsSeverityDisplay.styled';\n\nconst InformationIcon = () => (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n\nconst getSeverityConfig = severity => {\n switch (severity) {\n case 1:\n case 2:\n return { label: 'Info' };\n case 3:\n case 4:\n return { label: 'Limited use' };\n case 5:\n return { label: 'Highly restricted' };\n default:\n return null;\n }\n};\n\n/**\n * Displays instruction text with a severity-level badge.\n *\n * ### Import\n *\n * ``` js\n * import { InstructionsSeverityDisplay } from '@ntbjs/react-components/data'\n * // or\n * import InstructionsSeverityDisplay from '@ntbjs/react-components/data/InstructionsSeverityDisplay'\n * ```\n *\n * ## Props\n * ```\n * Pass `severity` (1-5) to control the visual style.\n * Pass `instructionText` to display the instruction content.\n * Optionally pass `severityLabel` to override the default badge label.\n * Optionally pass `icon` to override the default icon element.\n * Pass `showCard={false}` to render without border-radius, shadow, and border.\n * ```\n */\n\nconst InstructionsSeverityDisplay = React.forwardRef(function InstructionsSeverityDisplay(\n { severity, instructionText, severityLabel, icon, showCard = true, ...props },\n forwardedRef\n) {\n if (!instructionText) {\n return null;\n }\n\n const config = getSeverityConfig(severity);\n\n if (!config) {\n return null;\n }\n\n const displayLabel = severityLabel || config.label;\n\n return (\n <S.Card ref={forwardedRef} $severity={severity} $showCard={showCard} {...props}>\n <S.BadgePill $severity={severity}>\n {icon || <InformationIcon />}\n <S.BadgeText>{displayLabel}</S.BadgeText>\n </S.BadgePill>\n <S.InstructionText>{instructionText}</S.InstructionText>\n </S.Card>\n );\n});\n\nInstructionsSeverityDisplay.propTypes = {\n /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */\n severity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n /** The instruction text to display. Component returns null if empty. */\n instructionText: PropTypes.string,\n /** Override the default badge label for the severity level. */\n severityLabel: PropTypes.string,\n /** Override the default icon element. */\n icon: PropTypes.element,\n /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */\n showCard: PropTypes.bool\n};\n\nexport default InstructionsSeverityDisplay;\n"],"names":["InformationIcon","React","createElement","width","height","viewBox","fill","xmlns","d","getSeverityConfig","severity","label","InstructionsSeverityDisplay","forwardRef","instructionText","severityLabel","icon","showCard","props","forwardedRef","config","displayLabel","S","_extends","ref","$severity","$showCard","propTypes","process","env","NODE_ENV","PropTypes","oneOf","string","element","bool"],"mappings":";;;;;AAIA,MAAMA,eAAe,GAAGA,MACtBC,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,EAAAA,KAAK,EAAC,IAAI;AAACC,EAAAA,MAAM,EAAC,IAAI;AAACC,EAAAA,OAAO,EAAC,WAAW;AAACC,EAAAA,IAAI,EAAC,MAAM;AAACC,EAAAA,KAAK,EAAC,4BAAA;AAA4B,CAC5FN,EAAAA,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AACEM,EAAAA,CAAC,EAAC,ocAAoc;AACtcF,EAAAA,IAAI,EAAC,cAAA;AAAc,CACpB,CACE,CACN,CAAA;AAED,MAAMG,iBAAiB,GAAGC,QAAQ,IAAI;AACpC,EAAA,QAAQA,QAAQ;AACd,IAAA,KAAK,CAAC,CAAA;AACN,IAAA,KAAK,CAAC;MACJ,OAAO;AAAEC,QAAAA,KAAK,EAAE,MAAA;OAAQ,CAAA;AAC1B,IAAA,KAAK,CAAC,CAAA;AACN,IAAA,KAAK,CAAC;MACJ,OAAO;AAAEA,QAAAA,KAAK,EAAE,aAAA;OAAe,CAAA;AACjC,IAAA,KAAK,CAAC;MACJ,OAAO;AAAEA,QAAAA,KAAK,EAAE,mBAAA;OAAqB,CAAA;AACvC,IAAA;AACE,MAAA,OAAO,IAAI,CAAA;AACf,GAAA;AACF,CAAC,CAAA;AAuBKC,MAAAA,2BAA2B,GAAGX,cAAK,CAACY,UAAU,CAAC,SAASD,2BAA2BA,CACvF;EAAEF,QAAQ;EAAEI,eAAe;EAAEC,aAAa;EAAEC,IAAI;AAAEC,EAAAA,QAAQ,GAAG,IAAI;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC7EC,YAAY,EACZ;EACA,IAAI,CAACL,eAAe,EAAE;AACpB,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,MAAMM,MAAM,GAAGX,iBAAiB,CAACC,QAAQ,CAAC,CAAA;EAE1C,IAAI,CAACU,MAAM,EAAE;AACX,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,MAAMC,YAAY,GAAGN,aAAa,IAAIK,MAAM,CAACT,KAAK,CAAA;EAElD,OACEV,cAAA,CAAAC,aAAA,CAACoB,IAAM,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEL,YAAa;AAACM,IAAAA,SAAS,EAAEf,QAAS;AAACgB,IAAAA,SAAS,EAAET,QAAAA;GAAcC,EAAAA,KAAK,GAC5EjB,cAAA,CAAAC,aAAA,CAACoB,SAAW,EAAA;AAACG,IAAAA,SAAS,EAAEf,QAAAA;AAAS,GAAA,EAC9BM,IAAI,IAAIf,cAAA,CAAAC,aAAA,CAACF,eAAe,EAAE,IAAA,CAAC,EAC5BC,cAAA,CAAAC,aAAA,CAACoB,SAAW,EAAA,IAAA,EAAED,YAA0B,CAC7B,CAAC,EACdpB,cAAA,CAAAC,aAAA,CAACoB,eAAiB,EAAER,IAAAA,EAAAA,eAAmC,CACjD,CAAC,CAAA;AAEb,CAAC,EAAC;AAEFF,2BAA2B,CAACe,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAEtCpB,EAAAA,QAAQ,EAAEqB,SAAS,CAACC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EAE1ClB,eAAe,EAAEiB,SAAS,CAACE,MAAM;EAEjClB,aAAa,EAAEgB,SAAS,CAACE,MAAM;EAE/BjB,IAAI,EAAEe,SAAS,CAACG,OAAO;EAEvBjB,QAAQ,EAAEc,SAAS,CAACI,IAAAA;AACtB,CAAC,GAAA,EAAA;;;;"}
@@ -0,0 +1,72 @@
1
+ import styled, { css } from 'styled-components';
2
+ import { applyDefaultTheme } from '../../utils/defaultTheme.js';
3
+
4
+ const shouldForwardProp = prop => {
5
+ return prop !== 'theme' && !prop.startsWith('$');
6
+ };
7
+ const Card = styled.div.withConfig({
8
+ shouldForwardProp
9
+ }).attrs(applyDefaultTheme)`
10
+ display: flex;
11
+ flex-direction: column;
12
+ gap: 8px;
13
+ padding: 14px 10px;
14
+ ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
15
+
16
+ ${props => props.$showCard && css`
17
+ border-radius: 10px;
18
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);
19
+ `}
20
+
21
+ ${props => props.$severity === 5 && props.$showCard && css`
22
+ ${props.theme.themeProp('border', '1px solid #7f1d1d', '1px solid #dc2626')}
23
+ `}
24
+ `;
25
+ const BadgePill = styled.span.withConfig({
26
+ shouldForwardProp
27
+ }).attrs(applyDefaultTheme)`
28
+ display: flex;
29
+ flex-direction: row;
30
+ align-items: center;
31
+ gap: 4px;
32
+ padding: 2px 8px;
33
+ border-radius: 9999px;
34
+ width: fit-content;
35
+
36
+ ${props => (props.$severity === 1 || props.$severity === 2) && css`
37
+ border-style: solid;
38
+ border-width: 1px;
39
+ ${props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('white'))}
40
+ ${props.theme.themeProp('border-color', '#3a3a3a', '#ece4e1')}
41
+ ${props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
42
+ `}
43
+
44
+ ${props => (props.$severity === 3 || props.$severity === 4) && css`
45
+ ${props.theme.themeProp('background', '#2e2301', '#faeeb3')}
46
+ ${props.theme.themeProp('color', '#eab308', '#3b302b')}
47
+ `}
48
+
49
+ ${props => props.$severity === 5 && css`
50
+ ${props.theme.themeProp('background', 'rgba(182, 41, 2, 0.2)', 'rgba(182, 41, 2, 0.1)')}
51
+ ${props.theme.themeProp('color', '#ef4444', '#b62902')}
52
+ `}
53
+ `;
54
+ const BadgeText = styled.span.withConfig({
55
+ shouldForwardProp
56
+ }).attrs(applyDefaultTheme)`
57
+ font-size: 12px;
58
+ font-weight: 500;
59
+ line-height: 1.333em;
60
+ `;
61
+ const InstructionText = styled.p.withConfig({
62
+ shouldForwardProp
63
+ }).attrs(applyDefaultTheme)`
64
+ font-size: 14px;
65
+ font-weight: 400;
66
+ line-height: 1.286em;
67
+ margin: 0;
68
+ ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
69
+ `;
70
+
71
+ export { BadgePill, BadgeText, Card, InstructionText };
72
+ //# sourceMappingURL=InstructionsSeverityDisplay.styled.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InstructionsSeverityDisplay.styled.js","sources":["../../../src/components/data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Card = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 14px 10px;\n ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}\n\n ${props =>\n props.$showCard &&\n css`\n border-radius: 10px;\n box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.16);\n `}\n\n ${props =>\n props.$severity === 5 &&\n props.$showCard &&\n css`\n ${props.theme.themeProp('border', '1px solid #7f1d1d', '1px solid #dc2626')}\n `}\n`;\n\nexport const BadgePill = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 9999px;\n width: fit-content;\n\n ${props =>\n (props.$severity === 1 || props.$severity === 2) &&\n css`\n border-style: solid;\n border-width: 1px;\n ${props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('white'))}\n ${props.theme.themeProp('border-color', '#3a3a3a', '#ece4e1')}\n ${props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n `}\n\n ${props =>\n (props.$severity === 3 || props.$severity === 4) &&\n css`\n ${props.theme.themeProp('background', '#2e2301', '#faeeb3')}\n ${props.theme.themeProp('color', '#eab308', '#3b302b')}\n `}\n\n ${props =>\n props.$severity === 5 &&\n css`\n ${props.theme.themeProp('background', 'rgba(182, 41, 2, 0.2)', 'rgba(182, 41, 2, 0.1)')}\n ${props.theme.themeProp('color', '#ef4444', '#b62902')}\n `}\n`;\n\nexport const BadgeText = styled.span\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n font-size: 12px;\n font-weight: 500;\n line-height: 1.333em;\n`;\n\nexport const InstructionText = styled.p\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n font-size: 14px;\n font-weight: 400;\n line-height: 1.286em;\n margin: 0;\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('black')\n )}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","themeProp","getColor","$showCard","css","$severity","BadgePill","span","BadgeText","InstructionText","p"],"mappings":"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"}
@@ -1,5 +1,6 @@
1
1
  export { default as Alert } from './Alert/Alert.js';
2
2
  export { default as Badge } from './Badge/Badge.js';
3
+ export { default as InstructionsSeverityDisplay } from './InstructionsSeverityDisplay/InstructionsSeverityDisplay.js';
3
4
  export { default as Popover } from './Popover/Popover.js';
4
5
  export { default as Tab } from './Tab/Tab.js';
5
6
  export { default as Tabs } from './Tabs/Tabs.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -36,7 +36,7 @@ import { ReactComponent as TriangleRightIcon } from './triangle-right.svg';
36
36
  import { ReactComponent as VerificationIcon } from './verification.svg';
37
37
  import { ReactComponent as WarningCircleIcon } from './warning-circle.svg';
38
38
  import { ReactComponent as WarningTriangleIcon } from './warning-triangle.svg';
39
-
39
+ import { ReactComponent as InfoYellowIcon } from './info-yellow.svg';
40
40
  export {
41
41
  AddIcon,
42
42
  AddCircleIcon,
@@ -75,5 +75,6 @@ export {
75
75
  TriangleRightIcon,
76
76
  VerificationIcon,
77
77
  WarningCircleIcon,
78
- WarningTriangleIcon
78
+ WarningTriangleIcon,
79
+ InfoYellowIcon
79
80
  };
@@ -0,0 +1,11 @@
1
+ <svg viewBox="5 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_yellow)">
3
+ <path d="M5 14C5 6.26801 11.268 0 19 0C26.732 0 33 6.26801 33 14C33 21.732 26.732 28 19 28C11.268 28 5 21.732 5 14Z" fill="#EAB308"/>
4
+ <path d="M19.001 2.91602C25.1222 2.91619 30.084 7.87878 30.084 14C30.0838 20.1211 25.1221 25.0828 19.001 25.083C12.8798 25.083 7.91717 20.1212 7.91699 14C7.91699 7.87867 12.8796 2.91602 19.001 2.91602ZM19.001 4.08301C16.3709 4.08301 13.848 5.12757 11.9883 6.9873C10.1285 8.84704 9.08398 11.3699 9.08398 14C9.08407 16.6299 10.1287 19.1521 11.9883 21.0117C13.848 22.8715 16.3709 23.916 19.001 23.916C21.6309 23.9159 24.153 22.8714 26.0127 21.0117C27.8724 19.1521 28.9169 16.6299 28.917 14C28.917 11.3699 27.8724 8.84704 26.0127 6.9873C24.1531 5.12775 21.6308 4.08309 19.001 4.08301ZM19.584 13.416V19.25H18.417V13.416H19.584ZM19.584 8.75V9.91602H18.417V8.75H19.584Z" fill="black" stroke="#451A03" stroke-width="1.16667"/>
5
+ </g>
6
+ <defs>
7
+ <clipPath id="clip0_yellow">
8
+ <path d="M5 14C5 6.26801 11.268 0 19 0C26.732 0 33 6.26801 33 14C33 21.732 26.732 28 19 28C11.268 28 5 21.732 5 14Z" fill="white"/>
9
+ </clipPath>
10
+ </defs>
11
+ </svg>
@@ -28,7 +28,16 @@ const Button = React__default.forwardRef(function Button({
28
28
  const [loadingState, setLoadingState] = useState(loading || false);
29
29
  const [loadingStep, setLoadingStep] = useState(113);
30
30
  const loadingInterval = useRef(0);
31
+ const loadingTimeout = useRef(0);
31
32
  const [dropdownIsActive, setDropdownIsActive] = useState(false);
33
+ const isMounted = useRef(true);
34
+ useEffect(() => {
35
+ return () => {
36
+ isMounted.current = false;
37
+ clearInterval(loadingInterval.current);
38
+ clearTimeout(loadingTimeout.current);
39
+ };
40
+ }, []);
32
41
  const enableLoading = () => {
33
42
  loadingInterval.current = setInterval(() => {
34
43
  setLoadingStep(currentLoadingStep => {
@@ -44,9 +53,11 @@ const Button = React__default.forwardRef(function Button({
44
53
  const disableLoading = () => {
45
54
  clearInterval(loadingInterval.current);
46
55
  setLoadingStep(0);
47
- setTimeout(() => {
48
- setLoadingState(false);
49
- setLoadingStep(113);
56
+ loadingTimeout.current = setTimeout(() => {
57
+ if (isMounted.current) {
58
+ setLoadingState(false);
59
+ setLoadingStep(113);
60
+ }
50
61
  }, 500);
51
62
  };
52
63
  useEffect(() => {
@@ -55,7 +66,10 @@ const Button = React__default.forwardRef(function Button({
55
66
  } else {
56
67
  disableLoading();
57
68
  }
58
- return () => clearInterval(loadingInterval.current);
69
+ return () => {
70
+ clearInterval(loadingInterval.current);
71
+ clearTimeout(loadingTimeout.current);
72
+ };
59
73
  }, [loading]);
60
74
  const handleDropdownButtonClick = () => {
61
75
  setDropdownIsActive(true);
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/inputs/Button/Button.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './Button.styled';\n\nimport Popover from '../../data/Popover';\nimport ContextMenu from '../../widgets/ContextMenu/ContextMenu';\n\nimport { ReactComponent as DropdownIcon } from '../../../icons/expand-more.svg';\n\n/**\n * Buttons communicate actions that users can take.\n *\n * ### Import\n *\n * ``` js\n * import { Button } from '@ntbjs/react-components/inputs'\n * // or\n * import Button from '@ntbjs/react-components/inputs/Button'\n * ```\n */\nconst Button = React.forwardRef(function Button(\n {\n onClickEffect,\n singleAction = false,\n activeDropdown = false,\n dropdownItems,\n secondary,\n outlined,\n block = false,\n icon,\n size = 'normal',\n disabled,\n loading,\n className,\n children,\n singleActionGap = 34,\n width,\n border = 2,\n ...props\n },\n forwardedRef\n) {\n const [loadingState, setLoadingState] = useState(loading || false);\n const [loadingStep, setLoadingStep] = useState(113);\n const loadingInterval = useRef(0);\n\n const [dropdownIsActive, setDropdownIsActive] = useState(false);\n\n const enableLoading = () => {\n loadingInterval.current = setInterval(() => {\n setLoadingStep(currentLoadingStep => {\n const newLoadingStep = Math.round(currentLoadingStep - (15 * currentLoadingStep) / 100);\n\n if (newLoadingStep === currentLoadingStep) {\n clearInterval(loadingInterval.current);\n }\n\n return newLoadingStep;\n });\n }, 300);\n\n setLoadingState(true);\n };\n\n const disableLoading = () => {\n clearInterval(loadingInterval.current);\n\n setLoadingStep(0);\n\n setTimeout(() => {\n setLoadingState(false);\n setLoadingStep(113);\n }, 500);\n };\n\n useEffect(() => {\n if (loading) {\n enableLoading();\n } else {\n disableLoading();\n }\n\n return () => clearInterval(loadingInterval.current);\n }, [loading]);\n\n const handleDropdownButtonClick = () => {\n setDropdownIsActive(true);\n };\n\n const handleDropdownClose = () => {\n setDropdownIsActive(false);\n };\n\n return (\n <S.ButtonWrapper>\n {!singleAction ? (\n <S.MainButtonWrapper\n $activeDropdown={activeDropdown}\n $dropdownItems={dropdownItems}\n $outlined={outlined}\n $secondary={secondary}\n $block={block}\n >\n <S.MainButtonContainer\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $block={block}\n >\n <S.Button\n ref={forwardedRef}\n onClick={onClickEffect}\n $border={border}\n $singleaction={singleAction}\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $block={block}\n size={size}\n disabled={disabled}\n className={className}\n aria-busy={disabled}\n $width={width}\n {...props}\n >\n <S.ButtonContent $loading={loadingState} size={size}>\n {icon}\n {children}\n </S.ButtonContent>\n <S.LoadingIndicator\n $loading={loadingState}\n style={{\n opacity: loadingState ? 1 : 0\n }}\n >\n <S.LoadingIndicatorSvg viewBox=\"22 22 44 44\">\n <S.LoadingIndicatorSvgCircle\n cx=\"44\"\n cy=\"44\"\n r=\"18\"\n fill=\"none\"\n strokeWidth=\"4\"\n stroke=\"currentColor\"\n style={{\n strokeDashoffset: `${loadingStep}px`\n }}\n />\n </S.LoadingIndicatorSvg>\n </S.LoadingIndicator>\n </S.Button>\n </S.MainButtonContainer>\n {(activeDropdown || dropdownItems) && (\n <S.DropdownButtonContainer\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n >\n <Popover\n content={<ContextMenu>{dropdownItems}</ContextMenu>}\n placement={'bottom-end'}\n arrow={false}\n contextMenu={true}\n onHide={handleDropdownClose}\n >\n <S.Button\n ref={forwardedRef}\n $singleaction={singleAction}\n $singleactiongap={singleActionGap}\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $border={border}\n $block={block}\n size={size}\n disabled={disabled}\n onClick={handleDropdownButtonClick}\n className={dropdownIsActive ? 'dropdown-is-active' : ''}\n $width={width}\n >\n <DropdownIcon />\n </S.Button>\n </Popover>\n </S.DropdownButtonContainer>\n )}\n </S.MainButtonWrapper>\n ) : (\n <>\n <S.MainButtonContainerSingle\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n className={className}\n >\n <S.DropdownButtonContainer $singleaction={singleAction}>\n <Popover\n content={<ContextMenu>{dropdownItems}</ContextMenu>}\n placement={'bottom-end'}\n arrow={false}\n contextMenu={true}\n onHide={handleDropdownClose}\n >\n <S.Button\n ref={forwardedRef}\n $singleaction={singleAction}\n $singleactiongap={singleActionGap}\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $border={border}\n $block={block}\n size={size}\n disabled={disabled}\n onClick={handleDropdownButtonClick}\n className={dropdownIsActive ? 'dropdown-is-active' : ''}\n $width={width}\n >\n <S.ButtonContent $loading={loadingState} size={size} $singleaction={singleAction}>\n {icon}\n {children}\n </S.ButtonContent>\n <DropdownIcon />\n </S.Button>\n </Popover>\n </S.DropdownButtonContainer>\n </S.MainButtonContainerSingle>\n </>\n )}\n </S.ButtonWrapper>\n );\n});\n\nButton.propTypes = {\n /**\n * On-click effect for the main button\n */\n onClickEffect: PropTypes.func,\n\n /**\n * Whether the button is a \"single action button\". For single action buttons,\n * the entire button opens the dropdown menu, not just the arrow.\n */\n singleAction: PropTypes.bool,\n\n /**\n * Whether the button must have an active dropdown menu.\n */\n activeDropdown: PropTypes.bool,\n\n /**\n * An array containing nodes of the `ContextMenuItem` component\n */\n dropdownItems: PropTypes.node,\n\n /**\n * Whether the button should be styled as a secondary button\n */\n secondary: PropTypes.bool,\n\n /**\n * Whether the button should be styled with borders\n */\n outlined: PropTypes.bool,\n\n /**\n * Whether the button should customize the border width\n */\n border: PropTypes.number,\n\n /**\n * Whether the button should be of 100% width\n */\n block: PropTypes.bool,\n\n /**\n * Optional icon to be displayed on the left side of the button\n */\n icon: PropTypes.element,\n\n /**\n * Which size variation should be used\n */\n size: PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),\n\n /**\n * Whether the button should be disabled\n */\n disabled: PropTypes.bool,\n\n /**\n * Whether the button should be initiated in a loading state\n */\n loading: PropTypes.bool,\n\n /**\n * Optional custom classnames for the HTML element\n */\n className: PropTypes.string,\n\n /**\n * Main content of the button\n */\n children: PropTypes.any.isRequired,\n /**\n * Gap between arrow and text in single action button\n */\n singleActionGap: PropTypes.number,\n\n /**\n * Custom min-width\n */\n width: PropTypes.number\n};\n\nexport default Button;\n"],"names":["Button","React","forwardRef","onClickEffect","singleAction","activeDropdown","dropdownItems","secondary","outlined","block","icon","size","disabled","loading","className","children","singleActionGap","width","border","props","forwardedRef","loadingState","setLoadingState","useState","loadingStep","setLoadingStep","loadingInterval","useRef","dropdownIsActive","setDropdownIsActive","enableLoading","current","setInterval","currentLoadingStep","newLoadingStep","Math","round","clearInterval","disableLoading","setTimeout","useEffect","handleDropdownButtonClick","handleDropdownClose","createElement","S","$activeDropdown","$dropdownItems","$outlined","$secondary","$block","_extends","ref","onClick","$border","$singleaction","$width","$loading","style","opacity","viewBox","cx","cy","r","fill","strokeWidth","stroke","strokeDashoffset","Popover","content","ContextMenu","placement","arrow","contextMenu","onHide","$singleactiongap","DropdownIcon","Fragment","propTypes","process","env","NODE_ENV","PropTypes","func","bool","node","number","element","oneOf","string","any","isRequired"],"mappings":";;;;;;;;AAoBMA,MAAAA,MAAM,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,MAAMA,CAC7C;EACEG,aAAa;AACbC,EAAAA,YAAY,GAAG,KAAK;AACpBC,EAAAA,cAAc,GAAG,KAAK;EACtBC,aAAa;EACbC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,KAAK;EACbC,IAAI;AACJC,EAAAA,IAAI,GAAG,QAAQ;EACfC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,QAAQ;AACRC,EAAAA,eAAe,GAAG,EAAE;EACpBC,KAAK;AACLC,EAAAA,MAAM,GAAG,CAAC;EACV,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAACV,OAAO,IAAI,KAAK,CAAC,CAAA;EAClE,MAAM,CAACW,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAAC,GAAG,CAAC,CAAA;AACnD,EAAA,MAAMG,eAAe,GAAGC,MAAM,CAAC,CAAC,CAAC,CAAA;EAEjC,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGN,QAAQ,CAAC,KAAK,CAAC,CAAA;EAE/D,MAAMO,aAAa,GAAGA,MAAM;AAC1BJ,IAAAA,eAAe,CAACK,OAAO,GAAGC,WAAW,CAAC,MAAM;MAC1CP,cAAc,CAACQ,kBAAkB,IAAI;AACnC,QAAA,MAAMC,cAAc,GAAGC,IAAI,CAACC,KAAK,CAACH,kBAAkB,GAAI,EAAE,GAAGA,kBAAkB,GAAI,GAAG,CAAC,CAAA;QAEvF,IAAIC,cAAc,KAAKD,kBAAkB,EAAE;AACzCI,UAAAA,aAAa,CAACX,eAAe,CAACK,OAAO,CAAC,CAAA;AACxC,SAAA;AAEA,QAAA,OAAOG,cAAc,CAAA;AACvB,OAAC,CAAC,CAAA;KACH,EAAE,GAAG,CAAC,CAAA;IAEPZ,eAAe,CAAC,IAAI,CAAC,CAAA;GACtB,CAAA;EAED,MAAMgB,cAAc,GAAGA,MAAM;AAC3BD,IAAAA,aAAa,CAACX,eAAe,CAACK,OAAO,CAAC,CAAA;IAEtCN,cAAc,CAAC,CAAC,CAAC,CAAA;AAEjBc,IAAAA,UAAU,CAAC,MAAM;MACfjB,eAAe,CAAC,KAAK,CAAC,CAAA;MACtBG,cAAc,CAAC,GAAG,CAAC,CAAA;KACpB,EAAE,GAAG,CAAC,CAAA;GACR,CAAA;AAEDe,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAI3B,OAAO,EAAE;AACXiB,MAAAA,aAAa,EAAE,CAAA;AACjB,KAAC,MAAM;AACLQ,MAAAA,cAAc,EAAE,CAAA;AAClB,KAAA;AAEA,IAAA,OAAO,MAAMD,aAAa,CAACX,eAAe,CAACK,OAAO,CAAC,CAAA;AACrD,GAAC,EAAE,CAAClB,OAAO,CAAC,CAAC,CAAA;EAEb,MAAM4B,yBAAyB,GAAGA,MAAM;IACtCZ,mBAAmB,CAAC,IAAI,CAAC,CAAA;GAC1B,CAAA;EAED,MAAMa,mBAAmB,GAAGA,MAAM;IAChCb,mBAAmB,CAAC,KAAK,CAAC,CAAA;GAC3B,CAAA;AAED,EAAA,OACE5B,cAAA,CAAA0C,aAAA,CAACC,aAAe,EAAA,IAAA,EACb,CAACxC,YAAY,GACZH,cAAA,CAAA0C,aAAA,CAACC,iBAAmB,EAAA;AAClBC,IAAAA,eAAe,EAAExC,cAAe;AAChCyC,IAAAA,cAAc,EAAExC,aAAc;AAC9ByC,IAAAA,SAAS,EAAEvC,QAAS;AACpBwC,IAAAA,UAAU,EAAEzC,SAAU;AACtB0C,IAAAA,MAAM,EAAExC,KAAAA;AAAM,GAAA,EAEdR,cAAA,CAAA0C,aAAA,CAACC,mBAAqB,EAAA;AACpBE,IAAAA,cAAc,EAAExC,aAAc;AAC9B0C,IAAAA,UAAU,EAAEzC,SAAU;AACtBwC,IAAAA,SAAS,EAAEvC,QAAS;AACpByC,IAAAA,MAAM,EAAExC,KAAAA;GAERR,EAAAA,cAAA,CAAA0C,aAAA,CAACC,QAAQ,EAAAM,QAAA,CAAA;AACPC,IAAAA,GAAG,EAAE/B,YAAa;AAClBgC,IAAAA,OAAO,EAAEjD,aAAc;AACvBkD,IAAAA,OAAO,EAAEnC,MAAO;AAChBoC,IAAAA,aAAa,EAAElD,YAAa;AAC5B0C,IAAAA,cAAc,EAAExC,aAAc;AAC9B0C,IAAAA,UAAU,EAAEzC,SAAU;AACtBwC,IAAAA,SAAS,EAAEvC,QAAS;AACpByC,IAAAA,MAAM,EAAExC,KAAM;AACdE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,WAAA,EAAWF,QAAS;AACpB2C,IAAAA,MAAM,EAAEtC,KAAAA;GACJE,EAAAA,KAAK,GAETlB,cAAA,CAAA0C,aAAA,CAACC,aAAe,EAAA;AAACY,IAAAA,QAAQ,EAAEnC,YAAa;AAACV,IAAAA,IAAI,EAAEA,IAAAA;GAC5CD,EAAAA,IAAI,EACJK,QACc,CAAC,EAClBd,cAAA,CAAA0C,aAAA,CAACC,gBAAkB,EAAA;AACjBY,IAAAA,QAAQ,EAAEnC,YAAa;AACvBoC,IAAAA,KAAK,EAAE;AACLC,MAAAA,OAAO,EAAErC,YAAY,GAAG,CAAC,GAAG,CAAA;AAC9B,KAAA;AAAE,GAAA,EAEFpB,cAAA,CAAA0C,aAAA,CAACC,mBAAqB,EAAA;AAACe,IAAAA,OAAO,EAAC,aAAA;AAAa,GAAA,EAC1C1D,cAAA,CAAA0C,aAAA,CAACC,yBAA2B,EAAA;AAC1BgB,IAAAA,EAAE,EAAC,IAAI;AACPC,IAAAA,EAAE,EAAC,IAAI;AACPC,IAAAA,CAAC,EAAC,IAAI;AACNC,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,WAAW,EAAC,GAAG;AACfC,IAAAA,MAAM,EAAC,cAAc;AACrBR,IAAAA,KAAK,EAAE;MACLS,gBAAgB,EAAE,GAAG1C,WAAW,CAAA,EAAA,CAAA;AAClC,KAAA;AAAE,GACH,CACoB,CACL,CACZ,CACW,CAAC,EACvB,CAACnB,cAAc,IAAIC,aAAa,KAC/BL,cAAA,CAAA0C,aAAA,CAACC,uBAAyB,EAAA;AACxBE,IAAAA,cAAc,EAAExC,aAAc;AAC9B0C,IAAAA,UAAU,EAAEzC,SAAU;AACtBwC,IAAAA,SAAS,EAAEvC,QAAAA;AAAS,GAAA,EAEpBP,cAAA,CAAA0C,aAAA,CAACwB,OAAO,EAAA;IACNC,OAAO,EAAEnE,cAAA,CAAA0C,aAAA,CAAC0B,WAAW,EAAA,IAAA,EAAE/D,aAA2B,CAAE;AACpDgE,IAAAA,SAAS,EAAE,YAAa;AACxBC,IAAAA,KAAK,EAAE,KAAM;AACbC,IAAAA,WAAW,EAAE,IAAK;AAClBC,IAAAA,MAAM,EAAE/B,mBAAAA;AAAoB,GAAA,EAE5BzC,cAAA,CAAA0C,aAAA,CAACC,QAAQ,EAAA;AACPO,IAAAA,GAAG,EAAE/B,YAAa;AAClBkC,IAAAA,aAAa,EAAElD,YAAa;AAC5BsE,IAAAA,gBAAgB,EAAE1D,eAAgB;AAClC8B,IAAAA,cAAc,EAAExC,aAAc;AAC9B0C,IAAAA,UAAU,EAAEzC,SAAU;AACtBwC,IAAAA,SAAS,EAAEvC,QAAS;AACpB6C,IAAAA,OAAO,EAAEnC,MAAO;AAChB+B,IAAAA,MAAM,EAAExC,KAAM;AACdE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBwC,IAAAA,OAAO,EAAEX,yBAA0B;AACnC3B,IAAAA,SAAS,EAAEc,gBAAgB,GAAG,oBAAoB,GAAG,EAAG;AACxD2B,IAAAA,MAAM,EAAEtC,KAAAA;GAERhB,EAAAA,cAAA,CAAA0C,aAAA,CAACgC,aAAY,EAAE,IAAA,CACP,CACH,CACgB,CAEV,CAAC,GAEtB1E,cAAA,CAAA0C,aAAA,CAAA1C,cAAA,CAAA2E,QAAA,EAAA,IAAA,EACE3E,cAAA,CAAA0C,aAAA,CAACC,yBAA2B,EAAA;AAC1BE,IAAAA,cAAc,EAAExC,aAAc;AAC9B0C,IAAAA,UAAU,EAAEzC,SAAU;AACtBwC,IAAAA,SAAS,EAAEvC,QAAS;AACpBM,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAErBb,cAAA,CAAA0C,aAAA,CAACC,uBAAyB,EAAA;AAACU,IAAAA,aAAa,EAAElD,YAAAA;AAAa,GAAA,EACrDH,cAAA,CAAA0C,aAAA,CAACwB,OAAO,EAAA;IACNC,OAAO,EAAEnE,cAAA,CAAA0C,aAAA,CAAC0B,WAAW,EAAA,IAAA,EAAE/D,aAA2B,CAAE;AACpDgE,IAAAA,SAAS,EAAE,YAAa;AACxBC,IAAAA,KAAK,EAAE,KAAM;AACbC,IAAAA,WAAW,EAAE,IAAK;AAClBC,IAAAA,MAAM,EAAE/B,mBAAAA;AAAoB,GAAA,EAE5BzC,cAAA,CAAA0C,aAAA,CAACC,QAAQ,EAAA;AACPO,IAAAA,GAAG,EAAE/B,YAAa;AAClBkC,IAAAA,aAAa,EAAElD,YAAa;AAC5BsE,IAAAA,gBAAgB,EAAE1D,eAAgB;AAClC8B,IAAAA,cAAc,EAAExC,aAAc;AAC9B0C,IAAAA,UAAU,EAAEzC,SAAU;AACtBwC,IAAAA,SAAS,EAAEvC,QAAS;AACpB6C,IAAAA,OAAO,EAAEnC,MAAO;AAChB+B,IAAAA,MAAM,EAAExC,KAAM;AACdE,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;AACnBwC,IAAAA,OAAO,EAAEX,yBAA0B;AACnC3B,IAAAA,SAAS,EAAEc,gBAAgB,GAAG,oBAAoB,GAAG,EAAG;AACxD2B,IAAAA,MAAM,EAAEtC,KAAAA;AAAM,GAAA,EAEdhB,cAAA,CAAA0C,aAAA,CAACC,aAAe,EAAA;AAACY,IAAAA,QAAQ,EAAEnC,YAAa;AAACV,IAAAA,IAAI,EAAEA,IAAK;AAAC2C,IAAAA,aAAa,EAAElD,YAAAA;AAAa,GAAA,EAC9EM,IAAI,EACJK,QACc,CAAC,EAClBd,cAAA,CAAA0C,aAAA,CAACgC,aAAY,MAAE,CACP,CACH,CACgB,CACA,CAC7B,CAEW,CAAC,CAAA;AAEtB,CAAC,EAAC;AAEF3E,MAAM,CAAC6E,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIjB7E,aAAa,EAAE8E,SAAS,CAACC,IAAI;EAM7B9E,YAAY,EAAE6E,SAAS,CAACE,IAAI;EAK5B9E,cAAc,EAAE4E,SAAS,CAACE,IAAI;EAK9B7E,aAAa,EAAE2E,SAAS,CAACG,IAAI;EAK7B7E,SAAS,EAAE0E,SAAS,CAACE,IAAI;EAKzB3E,QAAQ,EAAEyE,SAAS,CAACE,IAAI;EAKxBjE,MAAM,EAAE+D,SAAS,CAACI,MAAM;EAKxB5E,KAAK,EAAEwE,SAAS,CAACE,IAAI;EAKrBzE,IAAI,EAAEuE,SAAS,CAACK,OAAO;AAKvB3E,EAAAA,IAAI,EAAEsE,SAAS,CAACM,KAAK,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;EAK9D3E,QAAQ,EAAEqE,SAAS,CAACE,IAAI;EAKxBtE,OAAO,EAAEoE,SAAS,CAACE,IAAI;EAKvBrE,SAAS,EAAEmE,SAAS,CAACO,MAAM;AAK3BzE,EAAAA,QAAQ,EAAEkE,SAAS,CAACQ,GAAG,CAACC,UAAU;EAIlC1E,eAAe,EAAEiE,SAAS,CAACI,MAAM;EAKjCpE,KAAK,EAAEgE,SAAS,CAACI,MAAAA;AACnB,CAAC,GAAA,EAAA;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/inputs/Button/Button.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './Button.styled';\n\nimport Popover from '../../data/Popover';\nimport ContextMenu from '../../widgets/ContextMenu/ContextMenu';\n\nimport { ReactComponent as DropdownIcon } from '../../../icons/expand-more.svg';\n\n/**\n * Buttons communicate actions that users can take.\n *\n * ### Import\n *\n * ``` js\n * import { Button } from '@ntbjs/react-components/inputs'\n * // or\n * import Button from '@ntbjs/react-components/inputs/Button'\n * ```\n */\nconst Button = React.forwardRef(function Button(\n {\n onClickEffect,\n singleAction = false,\n activeDropdown = false,\n dropdownItems,\n secondary,\n outlined,\n block = false,\n icon,\n size = 'normal',\n disabled,\n loading,\n className,\n children,\n singleActionGap = 34,\n width,\n border = 2,\n ...props\n },\n forwardedRef\n) {\n const [loadingState, setLoadingState] = useState(loading || false);\n const [loadingStep, setLoadingStep] = useState(113);\n const loadingInterval = useRef(0);\n const loadingTimeout = useRef(0);\n const [dropdownIsActive, setDropdownIsActive] = useState(false);\n\n const isMounted = useRef(true);\n\n useEffect(() => {\n return () => {\n isMounted.current = false;\n clearInterval(loadingInterval.current);\n clearTimeout(loadingTimeout.current);\n };\n }, []);\n\n const enableLoading = () => {\n loadingInterval.current = setInterval(() => {\n setLoadingStep(currentLoadingStep => {\n const newLoadingStep = Math.round(currentLoadingStep - (15 * currentLoadingStep) / 100);\n\n if (newLoadingStep === currentLoadingStep) {\n clearInterval(loadingInterval.current);\n }\n\n return newLoadingStep;\n });\n }, 300);\n\n setLoadingState(true);\n };\n\n const disableLoading = () => {\n clearInterval(loadingInterval.current);\n setLoadingStep(0);\n\n loadingTimeout.current = setTimeout(() => {\n if (isMounted.current) {\n setLoadingState(false);\n setLoadingStep(113);\n }\n }, 500);\n };\n\n useEffect(() => {\n if (loading) {\n enableLoading();\n } else {\n disableLoading();\n }\n\n return () => {\n clearInterval(loadingInterval.current);\n clearTimeout(loadingTimeout.current);\n };\n }, [loading]);\n\n const handleDropdownButtonClick = () => {\n setDropdownIsActive(true);\n };\n\n const handleDropdownClose = () => {\n setDropdownIsActive(false);\n };\n\n return (\n <S.ButtonWrapper>\n {!singleAction ? (\n <S.MainButtonWrapper\n $activeDropdown={activeDropdown}\n $dropdownItems={dropdownItems}\n $outlined={outlined}\n $secondary={secondary}\n $block={block}\n >\n <S.MainButtonContainer\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $block={block}\n >\n <S.Button\n ref={forwardedRef}\n onClick={onClickEffect}\n $border={border}\n $singleaction={singleAction}\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $block={block}\n size={size}\n disabled={disabled}\n className={className}\n aria-busy={disabled}\n $width={width}\n {...props}\n >\n <S.ButtonContent $loading={loadingState} size={size}>\n {icon}\n {children}\n </S.ButtonContent>\n <S.LoadingIndicator\n $loading={loadingState}\n style={{\n opacity: loadingState ? 1 : 0\n }}\n >\n <S.LoadingIndicatorSvg viewBox=\"22 22 44 44\">\n <S.LoadingIndicatorSvgCircle\n cx=\"44\"\n cy=\"44\"\n r=\"18\"\n fill=\"none\"\n strokeWidth=\"4\"\n stroke=\"currentColor\"\n style={{\n strokeDashoffset: `${loadingStep}px`\n }}\n />\n </S.LoadingIndicatorSvg>\n </S.LoadingIndicator>\n </S.Button>\n </S.MainButtonContainer>\n {(activeDropdown || dropdownItems) && (\n <S.DropdownButtonContainer\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n >\n <Popover\n content={<ContextMenu>{dropdownItems}</ContextMenu>}\n placement={'bottom-end'}\n arrow={false}\n contextMenu={true}\n onHide={handleDropdownClose}\n >\n <S.Button\n ref={forwardedRef}\n $singleaction={singleAction}\n $singleactiongap={singleActionGap}\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $border={border}\n $block={block}\n size={size}\n disabled={disabled}\n onClick={handleDropdownButtonClick}\n className={dropdownIsActive ? 'dropdown-is-active' : ''}\n $width={width}\n >\n <DropdownIcon />\n </S.Button>\n </Popover>\n </S.DropdownButtonContainer>\n )}\n </S.MainButtonWrapper>\n ) : (\n <>\n <S.MainButtonContainerSingle\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n className={className}\n >\n <S.DropdownButtonContainer $singleaction={singleAction}>\n <Popover\n content={<ContextMenu>{dropdownItems}</ContextMenu>}\n placement={'bottom-end'}\n arrow={false}\n contextMenu={true}\n onHide={handleDropdownClose}\n >\n <S.Button\n ref={forwardedRef}\n $singleaction={singleAction}\n $singleactiongap={singleActionGap}\n $dropdownItems={dropdownItems}\n $secondary={secondary}\n $outlined={outlined}\n $border={border}\n $block={block}\n size={size}\n disabled={disabled}\n onClick={handleDropdownButtonClick}\n className={dropdownIsActive ? 'dropdown-is-active' : ''}\n $width={width}\n >\n <S.ButtonContent $loading={loadingState} size={size} $singleaction={singleAction}>\n {icon}\n {children}\n </S.ButtonContent>\n <DropdownIcon />\n </S.Button>\n </Popover>\n </S.DropdownButtonContainer>\n </S.MainButtonContainerSingle>\n </>\n )}\n </S.ButtonWrapper>\n );\n});\n\nButton.propTypes = {\n /**\n * On-click effect for the main button\n */\n onClickEffect: PropTypes.func,\n\n /**\n * Whether the button is a \"single action button\". For single action buttons,\n * the entire button opens the dropdown menu, not just the arrow.\n */\n singleAction: PropTypes.bool,\n\n /**\n * Whether the button must have an active dropdown menu.\n */\n activeDropdown: PropTypes.bool,\n\n /**\n * An array containing nodes of the `ContextMenuItem` component\n */\n dropdownItems: PropTypes.node,\n\n /**\n * Whether the button should be styled as a secondary button\n */\n secondary: PropTypes.bool,\n\n /**\n * Whether the button should be styled with borders\n */\n outlined: PropTypes.bool,\n\n /**\n * Whether the button should customize the border width\n */\n border: PropTypes.number,\n\n /**\n * Whether the button should be of 100% width\n */\n block: PropTypes.bool,\n\n /**\n * Optional icon to be displayed on the left side of the button\n */\n icon: PropTypes.element,\n\n /**\n * Which size variation should be used\n */\n size: PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),\n\n /**\n * Whether the button should be disabled\n */\n disabled: PropTypes.bool,\n\n /**\n * Whether the button should be initiated in a loading state\n */\n loading: PropTypes.bool,\n\n /**\n * Optional custom classnames for the HTML element\n */\n className: PropTypes.string,\n\n /**\n * Main content of the button\n */\n children: PropTypes.any.isRequired,\n /**\n * Gap between arrow and text in single action button\n */\n singleActionGap: PropTypes.number,\n\n /**\n * Custom min-width\n */\n width: PropTypes.number\n};\n\nexport default Button;\n"],"names":["Button","React","forwardRef","onClickEffect","singleAction","activeDropdown","dropdownItems","secondary","outlined","block","icon","size","disabled","loading","className","children","singleActionGap","width","border","props","forwardedRef","loadingState","setLoadingState","useState","loadingStep","setLoadingStep","loadingInterval","useRef","loadingTimeout","dropdownIsActive","setDropdownIsActive","isMounted","useEffect","current","clearInterval","clearTimeout","enableLoading","setInterval","currentLoadingStep","newLoadingStep","Math","round","disableLoading","setTimeout","handleDropdownButtonClick","handleDropdownClose","createElement","S","$activeDropdown","$dropdownItems","$outlined","$secondary","$block","_extends","ref","onClick","$border","$singleaction","$width","$loading","style","opacity","viewBox","cx","cy","r","fill","strokeWidth","stroke","strokeDashoffset","Popover","content","ContextMenu","placement","arrow","contextMenu","onHide","$singleactiongap","DropdownIcon","Fragment","propTypes","process","env","NODE_ENV","PropTypes","func","bool","node","number","element","oneOf","string","any","isRequired"],"mappings":"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"}
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
5
5
  import React__default, { useState, useMemo } from 'react';
6
6
  import '../../data/Alert/Alert.js';
7
7
  import '../../data/Badge/Badge.js';
8
+ import '../../data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js';
8
9
  import '../../data/Popover/Popover.js';
9
10
  import '../../data/Tab/Tab.js';
10
11
  import '../../data/Tabs/Tabs.js';
@@ -1 +1 @@
1
- {"version":3,"file":"CompactAutocompleteSelect.js","sources":["../../../src/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js"],"sourcesContent":["import { isEmpty } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\nimport { Tooltip } from '../../data';\n\nimport * as S from './CompactAutocompleteSelect.styled';\n\n/**\n * Select input control with autocomplete, async and creatable support.\n *\n * This control allows users to search through a predefined set of options, asynchronously load additional options,\n * and even create new options on-the-fly. It combines the benefits of autocomplete functionality,\n * asynchronous data fetching, and creatable option support.\n *\n * The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n *\n * <br /> ### Import\n *\n * ``` js\n * import { CompactAutocompleteSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactAutocompleteSelect from '@ntbjs/react-components/inputs/CompactAutocompleteSelect'\n * ```\n *\n * <br /> ## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n * The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n *\n * <br /> ## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n *\n * The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n *\n * <br />#### `action`\n * A `string` indicating what kind of update was made.\n *\n * The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n *\n * <br />#### `updatedOption`\n * Option `object`of the updated option:\n *\n * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n *\n *\n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n *\n * It will be passed two arguments:\n *\n * * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n *\n * The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n *\n * The `Promise` should return an `object` with the following keys:\n *\n * ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n *\n * `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n *\n * **Example:**\n *\n * ``` js\n *\n * const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n *\n * const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n *\n * const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n *\n * let filteredOptions;\n *\n * if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n *\n * const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n *\n * return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n *\n * const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n *\n * While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n *\n * <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n *\n * <br />\n */\n\nconst CompactAutocompleteSelect = React.forwardRef(function CompactAutocompleteSelect(\n {\n label,\n availableOptions,\n placeholder,\n selectedOption,\n loadOptions,\n noOptionsMessageFunc,\n createNewOptionMessageFunc,\n onUpdateCallback,\n loadingMessageFunc,\n creatable,\n readOnly,\n edit,\n disabled,\n hidden,\n type,\n descriptionToolTip,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOption);\n const [focused, setFocused] = useState(false);\n const [cacheUnique, setCacheUnique] = useState(0);\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n /**\n * Adds displayname to inner components\n */\n const Control = props => {\n return <S.Control className=\"select-control\" edit={edit} type={type} {...props} />;\n };\n\n const ValueContainer = useMemo(() => {\n const valueContainer = props => {\n return (\n <>\n <S.ValueContainer type={type} {...props} />\n </>\n );\n };\n valueContainer.displayName = 'ValueContainerWrapper';\n return valueContainer;\n }, [type]);\n\n const Input = useMemo(() => {\n const selectInput = props => {\n return <S.Input className=\"select-input\" {...props} />;\n };\n selectInput.displayName = 'InputWrapper';\n return selectInput;\n }, []);\n\n const Menu = useMemo(() => {\n const menu = props => {\n return <S.Menu className=\"select-menu\" {...props} />;\n };\n menu.displayName = 'MenuWrapper';\n return menu;\n }, []);\n\n const Placeholder = props => {\n return <S.Placeholder className=\"select-placeholder\" type={type} {...props} />;\n };\n\n const Option = props => {\n return !props.data.link ? (\n <S.Option className=\"menu-item\" {...props} />\n ) : (\n <S.Option {...props}>\n <a href={props.data.link}>\n {props.data.icon}\n {props.label}\n </a>\n </S.Option>\n );\n };\n\n const SingleValue = props => {\n return <S.SingleValue className=\"menu-value\" {...props} />;\n };\n\n Option.propTypes = {\n data: PropTypes.shape({\n icon: PropTypes.node,\n link: PropTypes.string\n }),\n label: PropTypes.string\n };\n\n const DropdownIndicator = props => {\n return (\n <S.DropdownIndicator className=\"dropdown-indicator\" {...props}>\n <S.DropdownIndicatorIcon />\n </S.DropdownIndicator>\n );\n };\n\n const ClearIndicator = props => {\n return (\n <S.ClearIndicator className=\"clear-indicator\" {...props}>\n <S.ClearIndicatorIcon />\n </S.ClearIndicator>\n );\n };\n\n const IndicatorSeparator = props => {\n return <S.IndicatorSeparator className=\"indicator-separator\" {...props} />;\n };\n\n /**\n * Adds classnames to inner components\n */\n const innerComponents = {\n Control,\n ValueContainer,\n DropdownIndicator,\n IndicatorSeparator,\n ClearIndicator,\n Option,\n SingleValue,\n Input,\n Placeholder,\n Menu\n };\n\n const sharedSelectProps = {\n ref: forwardedRef,\n options: loadOptions ? undefined : availableOptions,\n value: selected,\n loadOptions: loadOptions,\n loadingMessage: loadingMessageFunc,\n formatCreateLabel: createNewOptionMessageFunc,\n noOptionsMessage: input => {\n return noOptionsMessageFunc(input.inputValue);\n },\n onFocus: () => {\n setFocused(true);\n },\n onBlur: () => {\n setFocused(false);\n },\n focused: focused,\n isDisabled: disabled || readOnly,\n components: innerComponents,\n isClearable: true,\n isSearchable: true,\n placeholder: placeholder,\n id: uniqueId,\n cacheUniqs: loadOptions ? [cacheUnique] : undefined,\n onChange: (selected, actionMeta) => {\n switch (actionMeta.action) {\n case 'create-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n if (loadOptions) {\n setCacheUnique(cacheUnique + 1);\n }\n\n setSelected(selected);\n break;\n\n case 'select-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'remove-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'pop-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'deselect-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'clear':\n setSelected(selected);\n break;\n\n default:\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n }\n }\n };\n\n if (hidden) return null;\n\n const input = () => {\n return (\n <S.CompactAutocompleteSelect disabled={disabled}>\n <S.InputContainer>\n {label && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.Label>\n )}\n {loadOptions ? (\n creatable ? (\n <S.AsyncCreatableAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AsyncAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n )\n ) : creatable ? (\n <S.AutocompletCreatableSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AutocompletSelect $hasLabel={!isEmpty(label)} {...sharedSelectProps} {...props} />\n )}\n </S.InputContainer>\n </S.CompactAutocompleteSelect>\n );\n };\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nCompactAutocompleteSelect.propTypes = {\n /**\n * The label of the input field – leave `undefined` to hide the label\n */\n label: PropTypes.string,\n /**\n * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Search categories...\"\n */\n placeholder: PropTypes.string,\n /**\n * `Array` of `objects` that populate the select menu. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n *\n * **Note:**\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n */\n availableOptions: PropTypes.arrayOf(PropTypes.object),\n /**\n * `Array` of `objects` containing the selected options.\n */\n selectedOption: PropTypes.object,\n /**\n * Function with a `Promise` returning filtered options.\n *\n * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n *\n * **Note:**\n * <br />This will override the `availableOptions` prop if both props are set.\n */\n loadOptions: PropTypes.func,\n /**\n * Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n */\n loadingMessageFunc: PropTypes.func,\n /**\n * Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n */\n createNewOptionMessageFunc: PropTypes.func,\n /**\n * If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n */\n noOptionsMessageFunc: PropTypes.func,\n /**\n * Whether the value is read only\n */\n readOnly: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * There is an error present – 'error be prioritized over warnings if both are set to 'true'.\n */\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * There is a warning present.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n */\n onUpdateCallback: PropTypes.func,\n /**\n * Whether the user have permission to create new options\n */\n creatable: PropTypes.bool,\n /**\n * Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n */\n disabled: PropTypes.bool,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element\n};\n\nCompactAutocompleteSelect.defaultProps = {\n noOptionsMessageFunc: inputValue => {\n if (inputValue) {\n return `No matches for \"${inputValue}\"`;\n } else {\n return 'No available options';\n }\n },\n readOnly: false,\n disabled: false,\n creatable: true,\n edit: false,\n error: false,\n warning: false,\n hidden: false,\n type: '',\n descriptionToolTip: ''\n};\n\nexport default CompactAutocompleteSelect;\n"],"names":["CompactAutocompleteSelect","React","forwardRef","label","availableOptions","placeholder","selectedOption","loadOptions","noOptionsMessageFunc","createNewOptionMessageFunc","onUpdateCallback","loadingMessageFunc","creatable","readOnly","edit","disabled","hidden","type","descriptionToolTip","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","selected","setSelected","focused","setFocused","cacheUnique","setCacheUnique","memoizedDescriptionToolTip","useMemo","Control","createElement","S","_extends","className","ValueContainer","valueContainer","Fragment","displayName","Input","selectInput","Menu","menu","Placeholder","Option","data","link","href","icon","SingleValue","propTypes","process","env","NODE_ENV","PropTypes","shape","node","string","DropdownIndicator","ClearIndicator","IndicatorSeparator","innerComponents","sharedSelectProps","ref","options","undefined","value","loadingMessage","formatCreateLabel","noOptionsMessage","input","inputValue","onFocus","onBlur","isDisabled","components","isClearable","isSearchable","id","cacheUniqs","onChange","actionMeta","action","htmlFor","$hasLabel","isEmpty","Tooltip","content","key","placement","trigger","zIndex","arrayOf","object","func","bool","error","oneOfType","warning","oneOf","element","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"CompactAutocompleteSelect.js","sources":["../../../src/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js"],"sourcesContent":["import { isEmpty } from 'lodash';\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\nimport React, { useMemo, useState } from 'react';\nimport { Tooltip } from '../../data';\n\nimport * as S from './CompactAutocompleteSelect.styled';\n\n/**\n * Select input control with autocomplete, async and creatable support.\n *\n * This control allows users to search through a predefined set of options, asynchronously load additional options,\n * and even create new options on-the-fly. It combines the benefits of autocomplete functionality,\n * asynchronous data fetching, and creatable option support.\n *\n * The component uses [react-select](https://react-select.com/) for the main select functionality,\n * with [react-select-async-paginate](https://www.npmjs.com/package/react-select-async-paginate) for pagination.\n *\n * <br /> ### Import\n *\n * ``` js\n * import { CompactAutocompleteSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import CompactAutocompleteSelect from '@ntbjs/react-components/inputs/CompactAutocompleteSelect'\n * ```\n *\n * <br /> ## Option `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n * value: \"Example\",\n * label: \"Example\"\n * }\n * ```\n * The `label` is what will visible to the end-user. Whether `value` and `label`\n * should be different will depend on your use-case, but they are not required to.\n *\n * <br /> ## Update handling\n * Changes from the end-user to the selected/available options can be handled with a callback function\n * passed through the `onUpdateCallback` prop, which is triggered any time the selected values change.\n *\n * The callback function will be passed two arguments:\n * * `action: string`\n * * `updatedOption: object`\n *\n * <br />#### `action`\n * A `string` indicating what kind of update was made.\n *\n * The possible values of `action` are:\n * * `create-option`: an option that didn't exist in the original list of available options were added\n * * `select-option`: an option was selected\n * * `deselect-option`: an option was de-selected by clicking the X in the dropdown menu\n * * `remove-value`: an option was de-selected by clicking the X on the option label/box\n * * `pop-value`: an option was de-selected with backspace\n * * `clear`: all options were de-selected by clicking the clear indicator (not currently in use)\n *\n * <br />#### `updatedOption`\n * Option `object`of the updated option:\n *\n * In addition to the default `value` and `label` keys, an `__isNew__` flag will be present if the option was\n * not part of the original list of available options, i.e. created by the user in the current \"session\".\n * This is the case regardless of whether the list is provided through `availableOptions` or\n * asynchronously through `loadOptions`.\n *\n *\n * <br />## Asynchronous fetching/filtering with pagination\n * The list of available options can be fetched and filtered asynchronously with a `Promise`\n * passed through the `loadOptions` prop.\n *\n * It will be passed two arguments:\n *\n * * `inputValue: string`: current input value/search\n * * `prevOptions: Array`: previously loaded options for the current search\n *\n * The function is triggered and the first page is fetched when the dropdown menu opens.\n * Whenever the user scrolls down to the bottom of the list, `loadOptions` will\n * be triggered again to fetch the next page.\n *\n * The `Promise` should return an `object` with the following keys:\n *\n * ``` js\n * {\n * options: Array,\n * hasMore: boolean\n * }\n * ```\n *\n * `options` should contain the current page of options. It will be concatenated to the previous\n * set of options automatically. The `hasMore` flag indicates whether there is another page to be fetched.\n *\n * **Example:**\n *\n * ``` js\n *\n * const availableOptions = [\n * { value: \"Example 1\", label: \"Example 1\" },\n * ...\n * { value: \"Example N\", label: \"Example N\" }\n * ];\n *\n * const filterOptions = inputValue => {\n * return availableOptions.filter(option => {\n * return option.label.toLowerCase().includes(inputValue.toLowerCase());\n * });\n * };\n *\n * const loadOptionsFunc = (inputValue, prevOptions) => {\n * const currentLength = prevOptions.length;\n * const pageLength = 10;\n *\n * let filteredOptions;\n *\n * if (inputValue) {\n * filteredOptions = filterOptions(inputValue);\n * } else {\n * filteredOptions = availableOptions;\n * }\n *\n * const hasMore = filteredOptions.length > currentLength + pageLength;\n * const slicedOptions = filteredOptions.slice(currentLength, currentLength + pageLength);\n *\n * return {\n * options: slicedOptions,\n * hasMore\n * };\n * };\n *\n * const loadOptions = (inputValue, prevOptions) => {\n * return new Promise(resolve => {\n * resolve(loadOptionsFunc(inputValue, prevOptions));\n * });\n * };\n * ```\n *\n * While waiting for the `Promise` to resolve, the component will be in a loading state.\n * The loading state is showcased in the \"Primary With Fetching Timeout\" Story.\n *\n * <br />#### Without asynchronous fetching/filtering\n * If you wish to not use asynchronous fetching/filtering, leave the `loadOptions` prop undefined\n * and pass the `Array` of all available options to the `availableOptions` prop instead.\n * The component will use the built-in filtering on `label` from `react-select`, and the options\n * will not be paginated.\n *\n * <br />\n */\n\nconst CompactAutocompleteSelect = React.forwardRef(function CompactAutocompleteSelect(\n {\n label,\n availableOptions,\n placeholder,\n selectedOption,\n loadOptions,\n noOptionsMessageFunc,\n createNewOptionMessageFunc,\n onUpdateCallback,\n loadingMessageFunc,\n creatable,\n readOnly,\n edit,\n disabled,\n hidden,\n type,\n descriptionToolTip,\n loadingIcon,\n successIcon,\n ...props\n },\n forwardedRef\n) {\n const [uniqueId] = useState(nanoid());\n const [selected, setSelected] = useState(selectedOption);\n const [focused, setFocused] = useState(false);\n const [cacheUnique, setCacheUnique] = useState(0);\n\n const memoizedDescriptionToolTip = useMemo(() => {\n return descriptionToolTip;\n }, [descriptionToolTip]);\n\n /**\n * Adds displayname to inner components\n */\n const Control = props => {\n return <S.Control className=\"select-control\" edit={edit} type={type} {...props} />;\n };\n\n const ValueContainer = useMemo(() => {\n const valueContainer = props => {\n return (\n <>\n <S.ValueContainer type={type} {...props} />\n </>\n );\n };\n valueContainer.displayName = 'ValueContainerWrapper';\n return valueContainer;\n }, [type]);\n\n const Input = useMemo(() => {\n const selectInput = props => {\n return <S.Input className=\"select-input\" {...props} />;\n };\n selectInput.displayName = 'InputWrapper';\n return selectInput;\n }, []);\n\n const Menu = useMemo(() => {\n const menu = props => {\n return <S.Menu className=\"select-menu\" {...props} />;\n };\n menu.displayName = 'MenuWrapper';\n return menu;\n }, []);\n\n const Placeholder = props => {\n return <S.Placeholder className=\"select-placeholder\" type={type} {...props} />;\n };\n\n const Option = props => {\n return !props.data.link ? (\n <S.Option className=\"menu-item\" {...props} />\n ) : (\n <S.Option {...props}>\n <a href={props.data.link}>\n {props.data.icon}\n {props.label}\n </a>\n </S.Option>\n );\n };\n\n const SingleValue = props => {\n return <S.SingleValue className=\"menu-value\" {...props} />;\n };\n\n Option.propTypes = {\n data: PropTypes.shape({\n icon: PropTypes.node,\n link: PropTypes.string\n }),\n label: PropTypes.string\n };\n\n const DropdownIndicator = props => {\n return (\n <S.DropdownIndicator className=\"dropdown-indicator\" {...props}>\n <S.DropdownIndicatorIcon />\n </S.DropdownIndicator>\n );\n };\n\n const ClearIndicator = props => {\n return (\n <S.ClearIndicator className=\"clear-indicator\" {...props}>\n <S.ClearIndicatorIcon />\n </S.ClearIndicator>\n );\n };\n\n const IndicatorSeparator = props => {\n return <S.IndicatorSeparator className=\"indicator-separator\" {...props} />;\n };\n\n /**\n * Adds classnames to inner components\n */\n const innerComponents = {\n Control,\n ValueContainer,\n DropdownIndicator,\n IndicatorSeparator,\n ClearIndicator,\n Option,\n SingleValue,\n Input,\n Placeholder,\n Menu\n };\n\n const sharedSelectProps = {\n ref: forwardedRef,\n options: loadOptions ? undefined : availableOptions,\n value: selected,\n loadOptions: loadOptions,\n loadingMessage: loadingMessageFunc,\n formatCreateLabel: createNewOptionMessageFunc,\n noOptionsMessage: input => {\n return noOptionsMessageFunc(input.inputValue);\n },\n onFocus: () => {\n setFocused(true);\n },\n onBlur: () => {\n setFocused(false);\n },\n focused: focused,\n isDisabled: disabled || readOnly,\n components: innerComponents,\n isClearable: true,\n isSearchable: true,\n placeholder: placeholder,\n id: uniqueId,\n cacheUniqs: loadOptions ? [cacheUnique] : undefined,\n onChange: (selected, actionMeta) => {\n switch (actionMeta.action) {\n case 'create-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n if (loadOptions) {\n setCacheUnique(cacheUnique + 1);\n }\n\n setSelected(selected);\n break;\n\n case 'select-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'remove-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'pop-value':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'deselect-option':\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n\n case 'clear':\n setSelected(selected);\n break;\n\n default:\n if (onUpdateCallback) {\n onUpdateCallback(actionMeta.action, selected.value);\n }\n\n setSelected(selected);\n break;\n }\n }\n };\n\n if (hidden) return null;\n\n const input = () => {\n return (\n <S.CompactAutocompleteSelect disabled={disabled}>\n <S.InputContainer>\n {label && (\n <S.Label htmlFor={uniqueId} disabled={disabled}>\n {label}\n <S.SuccessContainer>\n {type === 'loading' && loadingIcon}\n {type === 'success' && successIcon}\n </S.SuccessContainer>\n </S.Label>\n )}\n {loadOptions ? (\n creatable ? (\n <S.AsyncCreatableAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AsyncAutocompleteSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n )\n ) : creatable ? (\n <S.AutocompletCreatableSelect\n $hasLabel={!isEmpty(label)}\n {...sharedSelectProps}\n {...props}\n />\n ) : (\n <S.AutocompletSelect $hasLabel={!isEmpty(label)} {...sharedSelectProps} {...props} />\n )}\n </S.InputContainer>\n </S.CompactAutocompleteSelect>\n );\n };\n\n return (\n <>\n {!memoizedDescriptionToolTip && input()}\n {memoizedDescriptionToolTip && (\n <div>\n <Tooltip\n content={memoizedDescriptionToolTip}\n key=\"tooltipTextArea1\"\n placement=\"bottom-end\"\n trigger={'mouseenter'}\n zIndex={999999}\n >\n {input()}\n </Tooltip>\n </div>\n )}\n </>\n );\n});\n\nCompactAutocompleteSelect.propTypes = {\n /**\n * The label of the input field – leave `undefined` to hide the label\n */\n label: PropTypes.string,\n /**\n * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Search categories...\"\n */\n placeholder: PropTypes.string,\n /**\n * `Array` of `objects` that populate the select menu. This is only needed\n * when asynchronous option fetching with the `loadOptions` prop is not used.\n *\n * **Note:**\n * <br />This will be overridden by the `loadOptions` prop if both props are set.\n */\n availableOptions: PropTypes.arrayOf(PropTypes.object),\n /**\n * `Array` of `objects` containing the selected options.\n */\n selectedOption: PropTypes.object,\n /**\n * Function with a `Promise` returning filtered options.\n *\n * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n * for details.\n *\n * **Note:**\n * <br />This will override the `availableOptions` prop if both props are set.\n */\n loadOptions: PropTypes.func,\n /**\n * Function for custom \"Loading...\" message while waiting for the first page\n * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n */\n loadingMessageFunc: PropTypes.func,\n /**\n * Callback function for formatting the message displayed in the dropdown when there\n * are no matching options, and the user has permission to create new options.\n * The callback function will be given the current input value as an argument.\n */\n createNewOptionMessageFunc: PropTypes.func,\n /**\n * If the list of options is empty, or if the current input value doesn't match\n * any of the available options and the user doesn't have permission to add options,\n * this function will be called and passed the current input value as an argument.\n */\n noOptionsMessageFunc: PropTypes.func,\n /**\n * Whether the value is read only\n */\n readOnly: PropTypes.bool,\n /**\n * Displays a grey background to show that value is editable\n */\n edit: PropTypes.bool,\n /**\n * Whether the component is hidden or visible.\n */\n hidden: PropTypes.bool,\n /**\n * There is an error present – 'error be prioritized over warnings if both are set to 'true'.\n */\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * There is a warning present.\n */\n warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n /**\n * Callback function for sending updates to the backend whenever the selected values are updated.\n * See [Update handling](#update-handling) for details.\n */\n onUpdateCallback: PropTypes.func,\n /**\n * Whether the user have permission to create new options\n */\n creatable: PropTypes.bool,\n /**\n * Whether the multi-select should be disabled.\n * The user will not be able to trigger the on-click effect of the selected options.\n */\n disabled: PropTypes.bool,\n /**\n * Define the type based on error, warning, loading and success.\n */\n type: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),\n /**\n * Description ToolTip text.\n */\n descriptionToolTip: PropTypes.string,\n /**\n * Icon element – E.g: `icon={<Spinner />}`\n */\n loadingIcon: PropTypes.element,\n /**\n * Icon element – E.g: `icon={<Check />}`\n */\n successIcon: PropTypes.element\n};\n\nCompactAutocompleteSelect.defaultProps = {\n noOptionsMessageFunc: inputValue => {\n if (inputValue) {\n return `No matches for \"${inputValue}\"`;\n } else {\n return 'No available options';\n }\n },\n readOnly: false,\n disabled: false,\n creatable: true,\n edit: false,\n error: false,\n warning: false,\n hidden: false,\n type: '',\n descriptionToolTip: ''\n};\n\nexport default CompactAutocompleteSelect;\n"],"names":["CompactAutocompleteSelect","React","forwardRef","label","availableOptions","placeholder","selectedOption","loadOptions","noOptionsMessageFunc","createNewOptionMessageFunc","onUpdateCallback","loadingMessageFunc","creatable","readOnly","edit","disabled","hidden","type","descriptionToolTip","loadingIcon","successIcon","props","forwardedRef","uniqueId","useState","nanoid","selected","setSelected","focused","setFocused","cacheUnique","setCacheUnique","memoizedDescriptionToolTip","useMemo","Control","createElement","S","_extends","className","ValueContainer","valueContainer","Fragment","displayName","Input","selectInput","Menu","menu","Placeholder","Option","data","link","href","icon","SingleValue","propTypes","process","env","NODE_ENV","PropTypes","shape","node","string","DropdownIndicator","ClearIndicator","IndicatorSeparator","innerComponents","sharedSelectProps","ref","options","undefined","value","loadingMessage","formatCreateLabel","noOptionsMessage","input","inputValue","onFocus","onBlur","isDisabled","components","isClearable","isSearchable","id","cacheUniqs","onChange","actionMeta","action","htmlFor","$hasLabel","isEmpty","Tooltip","content","key","placement","trigger","zIndex","arrayOf","object","func","bool","error","oneOfType","warning","oneOf","element","defaultProps"],"mappings":"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"}
@@ -5,6 +5,7 @@ import { ReactComponent as SvgStarFilled } from '../../icons/star-filled.svg.js'
5
5
  import { ReactComponent as SvgStar } from '../../icons/star.svg.js';
6
6
  import '../../data/Alert/Alert.js';
7
7
  import '../../data/Badge/Badge.js';
8
+ import '../../data/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js';
8
9
  import '../../data/Popover/Popover.js';
9
10
  import '../../data/Tab/Tab.js';
10
11
  import '../../data/Tabs/Tabs.js';