@laerdal/life-react-components 1.10.3-dev.15.full → 1.10.3-dev.17
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.
- package/dist/Dropdown/BasicDropdown.cjs +2 -1
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.d.ts +1 -1
- package/dist/Dropdown/BasicDropdown.js +2 -1
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +3 -5
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.js +3 -6
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs +1 -1
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.js +1 -1
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/package.json +1 -1
|
@@ -39,7 +39,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
39
39
|
|
|
40
40
|
var _BasicDropdown$propTy;
|
|
41
41
|
|
|
42
|
-
var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur"];
|
|
42
|
+
var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur", "onSelect"];
|
|
43
43
|
|
|
44
44
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
45
45
|
|
|
@@ -77,6 +77,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
77
77
|
minWidth = props.minWidth,
|
|
78
78
|
className = props.className,
|
|
79
79
|
onBlur = props.onBlur,
|
|
80
|
+
onSelect = props.onSelect,
|
|
80
81
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
81
82
|
|
|
82
83
|
var _React$useState = React.useState(false),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","React","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","rest","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","onSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n readOnly?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n multiSelect: true;\n value?: string[];\n onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n multiSelect?: false;\n value?: string;\n onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n const {\n id,\n list,\n placeholder,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n scrollable = true,\n maxHeight,\n disabled,\n readOnly,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n minWidth,\n className,\n onBlur,\n ...rest\n } = props;\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n const resetDropdown = () => {\n setIsOpen(false);\n setFocused(null);\n };\n\n const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n setIsOpen(!isOpen);\n setKeyboardNavigated(true);\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setInput(values.join(', '));\n\n if (props.multiSelect === true) {\n props.onSelect(values);\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n props.onSelect(values[0]);\n }\n\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || props.multiSelect) return;\n\n if (keyboardNavigated) {\n styledFieldRef.current?.focus({focusVisible: true} as any);\n }\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (props.value) {\n if (props.multiSelect) {\n setInput(props.value.join(', '));\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n setInput(props.value);\n }\n } else {\n setInput('');\n }\n }, [props.value, props.multiSelect]);\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n\n const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n \n return (\n <>\n <Dropdown ref={containerRef}\n isButton={isButton || false}\n className={size ? size : ''}\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onBlur={handleBlur}\n minWidth={minWidth}>\n <StyledField\n ref={styledFieldRef}\n className={cls}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => {\n if (!readOnly && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n if (isOpen) {\n inputRef.current?.blur();\n } else {\n inputRef.current?.focus();\n }\n }\n }}\n tabIndex={disabled || readOnly ? -1 : 0}\n disabled={disabled || false}\n readOnly={readOnly || false}\n isPlaceholder={!input}\n placeholder={placeholder}\n showValidationMessage={!!activeValidationMessage}\n onKeyDown={handleKeyDown}\n minWidth={minWidth}\n {...rest}>\n <InputField\n ref={inputRef}\n type=\"search\"\n readOnly\n placeholder={placeholder}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n tabIndex={-1}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n <div className={'icon dropdown-arrow'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n </div>\n </StyledField>\n {!readOnly && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: props.multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n outline={keyboardNavigated}\n isButton={isButton || false}\n selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n setSelectedValues={handleValueSelect}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{activeValidationMessage}</span>\n </ErrorMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information color={COLORS.neutral_600}/>\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n});\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","React","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n readOnly?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n multiSelect: true;\n value?: string[];\n onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n multiSelect?: false;\n value?: string;\n onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n const {\n id,\n list,\n placeholder,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n scrollable = true,\n maxHeight,\n disabled,\n readOnly,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n minWidth,\n className,\n onBlur,\n onSelect,\n ...rest\n } = props;\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n const resetDropdown = () => {\n setIsOpen(false);\n setFocused(null);\n };\n\n const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n setIsOpen(!isOpen);\n setKeyboardNavigated(true);\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setInput(values.join(', '));\n\n if (props.multiSelect === true) {\n props.onSelect(values);\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n props.onSelect(values[0]);\n }\n\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || props.multiSelect) return;\n\n if (keyboardNavigated) {\n styledFieldRef.current?.focus({focusVisible: true} as any);\n }\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (props.value) {\n if (props.multiSelect) {\n setInput(props.value.join(', '));\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n setInput(props.value);\n }\n } else {\n setInput('');\n }\n }, [props.value, props.multiSelect]);\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n\n const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n \n return (\n <>\n <Dropdown ref={containerRef}\n isButton={isButton || false}\n className={size ? size : ''}\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onBlur={handleBlur}\n minWidth={minWidth}>\n <StyledField\n ref={styledFieldRef}\n className={cls}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => {\n if (!readOnly && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n if (isOpen) {\n inputRef.current?.blur();\n } else {\n inputRef.current?.focus();\n }\n }\n }}\n tabIndex={disabled || readOnly ? -1 : 0}\n disabled={disabled || false}\n readOnly={readOnly || false}\n isPlaceholder={!input}\n placeholder={placeholder}\n showValidationMessage={!!activeValidationMessage}\n onKeyDown={handleKeyDown}\n minWidth={minWidth}\n {...rest}>\n <InputField\n ref={inputRef}\n type=\"search\"\n readOnly\n placeholder={placeholder}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n tabIndex={-1}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n <div className={'icon dropdown-arrow'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n </div>\n </StyledField>\n {!readOnly && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: props.multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n outline={keyboardNavigated}\n isButton={isButton || false}\n selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n setSelectedValues={handleValueSelect}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{activeValidationMessage}</span>\n </ErrorMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information color={COLORS.neutral_600}/>\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n});\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DropdownItem } from './DropdownContent';
|
|
3
3
|
import { Size } from '../types';
|
|
4
|
-
interface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
|
|
4
|
+
interface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
|
|
5
5
|
list: DropdownItem[];
|
|
6
6
|
itemsType?: 'normal' | 'checkbox' | 'radio';
|
|
7
7
|
action?: () => void;
|
|
@@ -5,7 +5,7 @@ import _pt from "prop-types";
|
|
|
5
5
|
|
|
6
6
|
var _BasicDropdown$propTy;
|
|
7
7
|
|
|
8
|
-
var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur"];
|
|
8
|
+
var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur", "onSelect"];
|
|
9
9
|
|
|
10
10
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
11
11
|
|
|
@@ -52,6 +52,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
52
52
|
minWidth = props.minWidth,
|
|
53
53
|
className = props.className,
|
|
54
54
|
onBlur = props.onBlur,
|
|
55
|
+
onSelect = props.onSelect,
|
|
55
56
|
rest = _objectWithoutProperties(props, _excluded);
|
|
56
57
|
|
|
57
58
|
var _React$useState = React.useState(false),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","rest","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","onSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n readOnly?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n multiSelect: true;\n value?: string[];\n onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n multiSelect?: false;\n value?: string;\n onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n const {\n id,\n list,\n placeholder,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n scrollable = true,\n maxHeight,\n disabled,\n readOnly,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n minWidth,\n className,\n onBlur,\n ...rest\n } = props;\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n const resetDropdown = () => {\n setIsOpen(false);\n setFocused(null);\n };\n\n const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n setIsOpen(!isOpen);\n setKeyboardNavigated(true);\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setInput(values.join(', '));\n\n if (props.multiSelect === true) {\n props.onSelect(values);\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n props.onSelect(values[0]);\n }\n\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || props.multiSelect) return;\n\n if (keyboardNavigated) {\n styledFieldRef.current?.focus({focusVisible: true} as any);\n }\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (props.value) {\n if (props.multiSelect) {\n setInput(props.value.join(', '));\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n setInput(props.value);\n }\n } else {\n setInput('');\n }\n }, [props.value, props.multiSelect]);\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n\n const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n \n return (\n <>\n <Dropdown ref={containerRef}\n isButton={isButton || false}\n className={size ? size : ''}\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onBlur={handleBlur}\n minWidth={minWidth}>\n <StyledField\n ref={styledFieldRef}\n className={cls}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => {\n if (!readOnly && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n if (isOpen) {\n inputRef.current?.blur();\n } else {\n inputRef.current?.focus();\n }\n }\n }}\n tabIndex={disabled || readOnly ? -1 : 0}\n disabled={disabled || false}\n readOnly={readOnly || false}\n isPlaceholder={!input}\n placeholder={placeholder}\n showValidationMessage={!!activeValidationMessage}\n onKeyDown={handleKeyDown}\n minWidth={minWidth}\n {...rest}>\n <InputField\n ref={inputRef}\n type=\"search\"\n readOnly\n placeholder={placeholder}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n tabIndex={-1}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n <div className={'icon dropdown-arrow'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n </div>\n </StyledField>\n {!readOnly && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: props.multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n outline={keyboardNavigated}\n isButton={isButton || false}\n selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n setSelectedValues={handleValueSelect}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{activeValidationMessage}</span>\n </ErrorMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information color={COLORS.neutral_600}/>\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n});\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n list: DropdownItem[];\n itemsType?: 'normal' | 'checkbox' | 'radio';\n action?: () => void;\n actionLabel?: string;\n actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n actionIcon?: React.ReactNode;\n actionLoading?: boolean;\n actionDisabled?: boolean;\n pinTopItem?: boolean;\n scrollable?: boolean;\n maxHeight?: string;\n placeholder?: string;\n disableSorting?: boolean;\n messageOnNoResults?: string;\n disabled?: boolean;\n readOnly?: boolean;\n isButton?: boolean;\n activeValidationMessage?: string;\n autofilledMessage?: string;\n size?: Size.Small | Size.Medium;\n margin?: string;\n minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n multiSelect: true;\n value?: string[];\n onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n multiSelect?: false;\n value?: string;\n onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n const {\n id,\n list,\n placeholder,\n messageOnNoResults,\n itemsType = 'normal',\n action,\n actionLabel,\n actionVariant,\n actionIcon,\n actionLoading,\n actionDisabled,\n pinTopItem,\n scrollable = true,\n maxHeight,\n disabled,\n readOnly,\n isButton,\n activeValidationMessage,\n autofilledMessage,\n size,\n margin = '4px 0',\n minWidth,\n className,\n onBlur,\n onSelect,\n ...rest\n } = props;\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const [isLoading, setIsLoading] = React.useState<boolean>(false);\n const [input, setInput] = React.useState<string>('');\n const [focused, setFocused] = React.useState<number | null>(null);\n const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n const resetDropdown = () => {\n setIsOpen(false);\n setFocused(null);\n };\n\n const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n setIsOpen(!isOpen);\n setKeyboardNavigated(true);\n }\n };\n\n const handleValueSelect = (values: string[]) => {\n setInput(values.join(', '));\n\n if (props.multiSelect === true) {\n props.onSelect(values);\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n props.onSelect(values[0]);\n }\n\n //don't close dropdown on item select if have custom action or multiselect\n if (actionLabel || props.multiSelect) return;\n\n if (keyboardNavigated) {\n styledFieldRef.current?.focus({focusVisible: true} as any);\n }\n setIsOpen(false);\n setFocused(null);\n };\n\n React.useEffect(() => {\n if (props.value) {\n if (props.multiSelect) {\n setInput(props.value.join(', '));\n } else if (props.multiSelect === false || props.multiSelect === undefined) {\n setInput(props.value);\n }\n } else {\n setInput('');\n }\n }, [props.value, props.multiSelect]);\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [input]);\n\n React.useEffect(() => {\n !isOpen && setKeyboardNavigated(false);\n }, [isOpen]);\n\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n const customSetIsOpen = (isOpen: boolean) => {\n setIsOpen(isOpen);\n };\n\n const getDisplayItems = () => {\n const values = input.split(',').map((val) => val.trim());\n const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n return listDisplayLabels.join(', ');\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n // @ts-ignore\n if (!e.currentTarget.contains(e.relatedTarget)) {\n onBlur && onBlur(e);\n }\n };\n\n const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n \n return (\n <>\n <Dropdown ref={containerRef}\n isButton={isButton || false}\n className={size ? size : ''}\n readOnly={readOnly}\n disabled={disabled}\n margin={margin}\n onBlur={handleBlur}\n minWidth={minWidth}>\n <StyledField\n ref={styledFieldRef}\n className={cls}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => {\n if (!readOnly && !disabled) {\n e.stopPropagation();\n setIsOpen(!isOpen);\n if (isOpen) {\n inputRef.current?.blur();\n } else {\n inputRef.current?.focus();\n }\n }\n }}\n tabIndex={disabled || readOnly ? -1 : 0}\n disabled={disabled || false}\n readOnly={readOnly || false}\n isPlaceholder={!input}\n placeholder={placeholder}\n showValidationMessage={!!activeValidationMessage}\n onKeyDown={handleKeyDown}\n minWidth={minWidth}\n {...rest}>\n <InputField\n ref={inputRef}\n type=\"search\"\n readOnly\n placeholder={placeholder}\n value={getDisplayItems()}\n className={size ? `${size} value` : 'value'}\n tabIndex={-1}\n disabled={disabled || false}\n />\n {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n <div className={'icon dropdown-arrow'}>\n {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n </div>\n </StyledField>\n {!readOnly && !disabled && (\n <DropdownContent\n customizationProps={{\n itemsType: itemsType,\n action: action ?? (() => {\n }),\n actionLabel: actionLabel,\n actionVariant: actionVariant,\n actionDisabled: actionDisabled,\n scrollable: scrollable,\n onValueUpdate: handleValueSelect,\n items: list,\n multiSelect: props.multiSelect,\n pinTopItem: pinTopItem,\n maxHeight: maxHeight,\n actionIcon: actionIcon,\n actionLoading: actionLoading,\n }}\n focused={focused}\n setFocused={setFocused}\n size={size ?? Size.Small}\n filter={''}\n isOpen={isOpen}\n setIsOpen={customSetIsOpen}\n messageOnNoResults={messageOnNoResults ?? ''}\n outline={keyboardNavigated}\n isButton={isButton || false}\n selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n setSelectedValues={handleValueSelect}\n id={`${id}_dropdowncontent`}\n />\n )}\n </Dropdown>\n {activeValidationMessage && (\n <ErrorMessage>\n <TechnicalWarning color={COLORS.critical_400}/>\n <span>{activeValidationMessage}</span>\n </ErrorMessage>\n )}\n {autofilledMessage && (\n <AutofilledMessage>\n <Information color={COLORS.neutral_600}/>\n <span>{autofilledMessage}</span>\n </AutofilledMessage>\n )}\n </>\n );\n});\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
|
|
@@ -147,7 +147,7 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
147
147
|
};
|
|
148
148
|
|
|
149
149
|
var ModalTitle = function ModalTitle(title, size) {
|
|
150
|
-
if (typeof
|
|
150
|
+
if (typeof title === 'string') {
|
|
151
151
|
switch (size) {
|
|
152
152
|
case _types.Size.Small:
|
|
153
153
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentM, {
|
|
@@ -174,9 +174,7 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
174
174
|
});
|
|
175
175
|
}
|
|
176
176
|
} else {
|
|
177
|
-
return
|
|
178
|
-
children: title
|
|
179
|
-
});
|
|
177
|
+
return title;
|
|
180
178
|
}
|
|
181
179
|
};
|
|
182
180
|
|
|
@@ -342,7 +340,7 @@ var ModalDialog = function ModalDialog(_ref) {
|
|
|
342
340
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalTitleSection, {
|
|
343
341
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.FlexContainer, {
|
|
344
342
|
children: [!(topImage || topImageWithFallbacksProps) && ModalBackButton(), title && ModalTitle(title, size)]
|
|
345
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalHeaderActions, {
|
|
343
|
+
}), (tooltip || !(topImage || topImageWithFallbacksProps)) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalStyles.ModalHeaderActions, {
|
|
346
344
|
children: [tooltip && ModalTootip(tooltip), !(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)]
|
|
347
345
|
})]
|
|
348
346
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalStyles.ModalBody, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof size === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return <>{title}</>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Size","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","ComponentTextStyle","Bold","ModalTootip","XSmall","COLORS","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","React","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof title === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return title;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n )}\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.cjs"}
|
|
@@ -10,7 +10,6 @@ import { ModalNote } from './ModalNote';
|
|
|
10
10
|
import { TooltipWrapper } from '../Tooltips';
|
|
11
11
|
import { HyperLink, ImageWithFallbacks } from '..';
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
14
|
export var ModalDialog = function ModalDialog(_ref) {
|
|
16
15
|
var size = _ref.size,
|
|
@@ -128,7 +127,7 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
128
127
|
};
|
|
129
128
|
|
|
130
129
|
var ModalTitle = function ModalTitle(title, size) {
|
|
131
|
-
if (typeof
|
|
130
|
+
if (typeof title === 'string') {
|
|
132
131
|
switch (size) {
|
|
133
132
|
case Size.Small:
|
|
134
133
|
return /*#__PURE__*/_jsx(ComponentM, {
|
|
@@ -155,9 +154,7 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
155
154
|
});
|
|
156
155
|
}
|
|
157
156
|
} else {
|
|
158
|
-
return
|
|
159
|
-
children: title
|
|
160
|
-
});
|
|
157
|
+
return title;
|
|
161
158
|
}
|
|
162
159
|
};
|
|
163
160
|
|
|
@@ -323,7 +320,7 @@ export var ModalDialog = function ModalDialog(_ref) {
|
|
|
323
320
|
}), /*#__PURE__*/_jsxs(ModalTitleSection, {
|
|
324
321
|
children: [/*#__PURE__*/_jsxs(FlexContainer, {
|
|
325
322
|
children: [!(topImage || topImageWithFallbacksProps) && ModalBackButton(), title && ModalTitle(title, size)]
|
|
326
|
-
}), /*#__PURE__*/_jsxs(ModalHeaderActions, {
|
|
323
|
+
}), (tooltip || !(topImage || topImageWithFallbacksProps)) && /*#__PURE__*/_jsxs(ModalHeaderActions, {
|
|
327
324
|
children: [tooltip && ModalTootip(tooltip), !(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)]
|
|
328
325
|
})]
|
|
329
326
|
}), /*#__PURE__*/_jsx(ModalBody, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof size === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return <>{title}</>;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalDialog.tsx"],"names":["React","Button","IconButton","ArrowLineLeft","Close","Help","COLORS","ComponentL","ComponentM","ComponentTextStyle","ComponentXL","Size","ModalContainer","BackButtonWrapper","CloseButtonWrapper","Column","FlexContainer","ModalBody","ModalFooter","ModalHeaderActions","ModalHeaderActionsWithImage","ModalTitleSection","StyledModalHeader","ModalHoverModifier","ImageOverlay","ImageContainer","ModalNote","TooltipWrapper","HyperLink","ImageWithFallbacks","ModalDialog","size","isModalOpen","closeModalAndClearInput","title","topImage","topImageWithFallbacksProps","topImageGrayscale","buttons","leftFooterAction","backButton","closeAction","submitAction","tooltip","children","note","state","icon","zIndex","contentOverflow","width","hasContentBorders","getMinWidth","Small","Large","Medium","getMaxWidth","getImageHeight","getMarginBottom","getPadding","getMaxHeight","ModalTitle","Bold","ModalTootip","XSmall","neutral_600","ModalCloseButton","onClick","black","ModalBackButton","getLeftActionIconElement","cloneElement","LeftFooterAction","text","actionType","disabled","action","type","loading","variant","order","marginRight","href","e","preventDefault","display","flexDirection","maxHeight","loader","alt","fallbacks","src","map","b","i","id"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, IconButton } from '../Button';\nimport { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';\nimport { Size } from '../types';\nimport ModalContainer from './ModalContainer';\nimport {\n BackButtonWrapper,\n CloseButtonWrapper,\n Column,\n FlexContainer,\n ModalBody,\n ModalFooter,\n ModalHeaderActions,\n ModalHeaderActionsWithImage,\n ModalTitleSection,\n StyledModalHeader,\n ModalHoverModifier,\n ImageOverlay,\n ImageContainer,\n} from './ModalStyles';\n\nimport { ModalNote } from './ModalNote';\nimport { TooltipWrapper } from '../Tooltips';\nimport { ButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink } from './ModalTypes';\nimport { HyperLink, ImageWithFallbacks } from '..';\nimport { ImageWithFallbacksProps } from '../Image/ImageWithFallbacks';\n\ninterface NewModalProps {\n size?: Size;\n isModalOpen: boolean;\n closeModalAndClearInput: any;\n title?: string | React.ReactNode;\n topImage?: any;\n topImageWithFallbacksProps?: ImageWithFallbacksProps;\n topImageGrayscale?: boolean;\n buttons?: ButtonAction[];\n leftFooterAction?: LeftFooterAction;\n tooltip?: string;\n backButton?: () => void;\n closeAction: () => void;\n submitAction: (event?: React.FormEvent<HTMLFormElement> | undefined) => void;\n note?: string | React.ReactNode;\n state?: string;\n icon?: React.ReactNode;\n zIndex?: number;\n contentOverflow?: string;\n width?: string;\n hasContentBorders?: boolean;\n}\n\nexport const ModalDialog: React.FunctionComponent<NewModalProps> = ({\n size,\n isModalOpen,\n closeModalAndClearInput,\n title,\n topImage,\n topImageWithFallbacksProps,\n topImageGrayscale,\n buttons,\n leftFooterAction,\n backButton,\n closeAction,\n submitAction,\n tooltip,\n children,\n note,\n state,\n icon,\n zIndex,\n contentOverflow,\n width,\n hasContentBorders,\n}) => {\n const getMinWidth = () => {\n switch (size) {\n case Size.Small:\n return '320px';\n case Size.Large:\n return '640px';\n case Size.Medium:\n default:\n return '480px';\n }\n };\n\n const getMaxWidth = () => {\n switch (size) {\n case Size.Small:\n return '480px';\n case Size.Large:\n return '720px';\n case Size.Medium:\n default:\n return '640px';\n }\n };\n\n const getImageHeight = () => {\n switch (size) {\n case Size.Small:\n return 160;\n case Size.Medium:\n return 200;\n case Size.Large:\n return 240;\n default:\n return 200;\n }\n };\n\n const getMarginBottom = () => {\n switch (size) {\n case Size.Small:\n return '16px';\n case Size.Medium:\n return '24px';\n case Size.Large:\n return '32px';\n default:\n return '24px';\n }\n };\n\n const getPadding = () => {\n switch (size) {\n case Size.Small:\n return '16px 16px 8px';\n case Size.Medium:\n return '24px 24px 20px';\n case Size.Large:\n return '32px';\n default:\n return '24px 24px 16px';\n }\n };\n\n const getMaxHeight = () => {\n switch (size) {\n case Size.Small:\n return 'calc(100vh - 56px)';\n case Size.Medium:\n return 'calc(100vh - 76px)';\n case Size.Large:\n return 'calc(100vh - 96px)';\n default:\n return 'calc(100vh - 72px)';\n }\n };\n\n const ModalTitle = (title: string | React.ReactNode, size?: Size) => {\n if (typeof title === 'string') {\n switch (size) {\n case Size.Small:\n return <ComponentM textStyle={ComponentTextStyle.Bold}>{title}</ComponentM>;\n case Size.Medium:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n case Size.Large:\n return <ComponentXL textStyle={ComponentTextStyle.Bold}>{title}</ComponentXL>;\n default:\n return <ComponentL textStyle={ComponentTextStyle.Bold}>{title}</ComponentL>;\n }\n } else {\n return title;\n }\n };\n\n const ModalTootip = (tooltip: string) => {\n return (\n <ModalHoverModifier>\n <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"top\" withArrow={false} label={tooltip}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => {}}>\n <Help size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n </TooltipWrapper>\n </ModalHoverModifier>\n );\n };\n\n const ModalCloseButton = (onClick: any) => {\n return (\n <CloseButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => onClick()} borderRadius={48}>\n <Close size=\"24px\" color={COLORS.black} />\n </IconButton>\n </CloseButtonWrapper>\n );\n };\n\n const ModalBackButton = () => {\n if (backButton) {\n return (\n <BackButtonWrapper hasImage={!!topImage || !!topImageWithFallbacksProps} size={size}>\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => backButton()} borderRadius={48}>\n <ArrowLineLeft size=\"24px\" color={COLORS.black} />\n </IconButton>\n </BackButtonWrapper>\n );\n }\n };\n\n const getLeftActionIconElement = (icon: React.ReactNode) => {\n return React.cloneElement(icon as React.ReactElement, { size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px' });\n };\n\n const LeftFooterAction = (leftFooterAction: LeftFooterAction) => {\n const { text, actionType, disabled, icon, action } = leftFooterAction;\n switch (actionType) {\n case 'button':\n return (\n <Button\n id={'left-action-button'}\n type={(leftFooterAction as LeftFooterButton)?.type}\n disabled={disabled}\n loading={(leftFooterAction as LeftFooterButton)?.loading}\n icon={icon}\n size={size}\n onClick={action}\n variant={(leftFooterAction as LeftFooterButton)?.variant ?? 'secondary'}\n style={{ order: -1, marginRight: 'auto' }}>\n {text}\n </Button>\n );\n case 'hyperlink':\n return (\n <HyperLink\n id=\"left-action-hyperlink\"\n className=\"footer-action\"\n href={(leftFooterAction as LeftFooterHyperlink).href}\n disabled={disabled}\n variant=\"default\"\n onClick={(e) => {\n if (action) {\n e.preventDefault();\n action(e);\n }\n }}>\n {icon && getLeftActionIconElement(icon)}\n {text}\n </HyperLink>\n );\n case 'note':\n return (\n <div className=\"footer-action note\">\n {icon && getLeftActionIconElement(icon)}\n <span>{text}</span>\n </div>\n );\n }\n };\n\n return (\n <ModalContainer\n showModal={isModalOpen}\n closeModal={closeModalAndClearInput}\n minWidth={getMinWidth()}\n maxWidth={getMaxWidth()}\n height=\"auto\"\n padding={getPadding()}\n zIndex={zIndex}\n width={width}>\n <Column>\n <form onSubmit={submitAction} style={{ display: 'flex', flexDirection: 'column', maxHeight: getMaxHeight() }}>\n {(topImage || topImageWithFallbacksProps) && (\n <StyledModalHeader size={size} $height={getImageHeight()} marginBottom={getMarginBottom()}>\n <ImageContainer $height={getImageHeight()}>\n {topImageGrayscale && <ImageOverlay $height={getImageHeight()} />}\n {topImage && <img src={topImage} alt=\"Modal top\" />}\n {!topImage && topImageWithFallbacksProps && (\n <ImageWithFallbacks\n loader={topImageWithFallbacksProps.loader}\n alt={topImageWithFallbacksProps.alt}\n fallbacks={topImageWithFallbacksProps.fallbacks}\n src={topImageWithFallbacksProps.src}\n />\n )}\n </ImageContainer>\n <ModalHeaderActionsWithImage hasBackButton={!!backButton}>\n {ModalBackButton()}\n {ModalCloseButton(closeAction)}\n </ModalHeaderActionsWithImage>\n </StyledModalHeader>\n )}\n <ModalTitleSection>\n <FlexContainer>\n {!(topImage || topImageWithFallbacksProps) && ModalBackButton()}\n {title && ModalTitle(title, size)}\n </FlexContainer>\n {(tooltip || !(topImage || topImageWithFallbacksProps)) && (\n <ModalHeaderActions>\n {tooltip && ModalTootip(tooltip)}\n {!(topImage || topImageWithFallbacksProps) && ModalCloseButton(closeAction)}\n </ModalHeaderActions>\n )}\n </ModalTitleSection>\n\n <ModalBody size={size} overflow={contentOverflow} hasContentBorders={hasContentBorders}>\n {children}\n </ModalBody>\n\n {note && <ModalNote note={note} state={state} size={size} icon={icon} />}\n\n <ModalFooter size={size}>\n {leftFooterAction && LeftFooterAction(leftFooterAction)}\n {buttons?.map((b, i) => (\n <Button key={b.id || i} icon={b.icon} id={b.id} disabled={b.disabled} loading={b.loading} size={size} onClick={b.action} type={b.type} variant={b.variant}>\n {b.text}\n </Button>\n ))}\n </ModalFooter>\n </form>\n </Column>\n </ModalContainer>\n );\n};\n\nexport default ModalDialog;\n"],"file":"ModalDialog.js"}
|
|
@@ -72,7 +72,7 @@ var ModalHeaderActions = _styledComponents.default.div(_templateObject8 || (_tem
|
|
|
72
72
|
|
|
73
73
|
exports.ModalHeaderActions = ModalHeaderActions;
|
|
74
74
|
|
|
75
|
-
var FlexContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
|
|
75
|
+
var FlexContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 100%;\n"])));
|
|
76
76
|
|
|
77
77
|
exports.FlexContainer = FlexContainer;
|
|
78
78
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","$height","size","ImageContainer","div","ImageOverlay","Column","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","COLORS","neutral_100","Size","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; $height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.$height ? `${props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.$height}px`};\n object-fit: cover;\n border-radius: 8px 8px 0 0;\n }\n`;\n\nexport const ImageContainer = styled.div<{ $height: number }>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: ${(props) => `${props.$height}px`};\n\n #imgWithFallbackLoadingIndicator {\n position: absolute;\n left: 50%;\n top: 0;\n }\n`;\n\nexport const ImageOverlay = styled.div<{ $height: number }>`\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: ${(props) => `${props.$height}px`};\n width: 100%;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 8px 8px 0 0;\n\n :after {\n position: absolute;\n height: ${(props) => `${props.$height}px`};\n border-radius: 8px 8px 0 0;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n background: #888888;\n mix-blend-mode: saturation;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["ModalHeader","styled","section","props","marginBottom","StyledModalHeader","$height","size","ImageContainer","div","ImageOverlay","Column","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","css","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","COLORS","neutral_100","Size","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; $height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.$height ? `${props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.$height}px`};\n object-fit: cover;\n border-radius: 8px 8px 0 0;\n }\n`;\n\nexport const ImageContainer = styled.div<{ $height: number }>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: ${(props) => `${props.$height}px`};\n\n #imgWithFallbackLoadingIndicator {\n position: absolute;\n left: 50%;\n top: 0;\n }\n`;\n\nexport const ImageOverlay = styled.div<{ $height: number }>`\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: ${(props) => `${props.$height}px`};\n width: 100%;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 8px 8px 0 0;\n\n :after {\n position: absolute;\n height: ${(props) => `${props.$height}px`};\n border-radius: 8px 8px 0 0;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n background: #888888;\n mix-blend-mode: saturation;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.cjs"}
|
|
@@ -32,7 +32,7 @@ export var ModalHeaderActionsWithImage = styled.div(_templateObject7 || (_templa
|
|
|
32
32
|
return !props.hasBackButton ? 'row-reverse' : 'row';
|
|
33
33
|
});
|
|
34
34
|
export var ModalHeaderActions = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n margin: -12px -12px 0 0;\n"])));
|
|
35
|
-
export var FlexContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
35
|
+
export var FlexContainer = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n"])));
|
|
36
36
|
export var ModalHoverModifier = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n button:hover {\n cursor: help !important;\n }\n"])));
|
|
37
37
|
export var CloseButtonWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n button {\n ", "\n }\n"])), function (props) {
|
|
38
38
|
return props.hasImage ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n margin: -12px -12px 0 0 !important;\n "]))) : css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n left: unset;\n "])));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","$height","size","ImageContainer","div","ImageOverlay","Column","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","neutral_100","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; $height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.$height ? `${props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.$height}px`};\n object-fit: cover;\n border-radius: 8px 8px 0 0;\n }\n`;\n\nexport const ImageContainer = styled.div<{ $height: number }>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: ${(props) => `${props.$height}px`};\n\n #imgWithFallbackLoadingIndicator {\n position: absolute;\n left: 50%;\n top: 0;\n }\n`;\n\nexport const ImageOverlay = styled.div<{ $height: number }>`\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: ${(props) => `${props.$height}px`};\n width: 100%;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 8px 8px 0 0;\n\n :after {\n position: absolute;\n height: ${(props) => `${props.$height}px`};\n border-radius: 8px 8px 0 0;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n background: #888888;\n mix-blend-mode: saturation;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","scrollBarStyling","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","$height","size","ImageContainer","div","ImageOverlay","Column","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","overflow","hasContentBorders","neutral_100","Small","ModalFooter","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { scrollBarStyling } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; $height?: number }>`\n flex: 1 0 calc(50% - 5px);\n flex-direction: column;\n flex-basis: auto;\n position: relative;\n text-align: left;\n height: ${(props) => (props.$height ? `${props.$height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.$height}px`};\n object-fit: cover;\n border-radius: 8px 8px 0 0;\n }\n`;\n\nexport const ImageContainer = styled.div<{ $height: number }>`\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: ${(props) => `${props.$height}px`};\n\n #imgWithFallbackLoadingIndicator {\n position: absolute;\n left: 50%;\n top: 0;\n }\n`;\n\nexport const ImageOverlay = styled.div<{ $height: number }>`\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: ${(props) => `${props.$height}px`};\n width: 100%;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 8px 8px 0 0;\n\n :after {\n position: absolute;\n height: ${(props) => `${props.$height}px`};\n border-radius: 8px 8px 0 0;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n background: #888888;\n mix-blend-mode: saturation;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n width: 100%;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string; overflow?: string; hasContentBorders?: boolean }>`\n flex: 1 1 auto;\n overflow: ${(props) => props?.overflow ?? 'unset'};\n margin: ${(props) => (props?.size === 'small' ? `8px 0` : props?.size === 'large' ? '16px 0' : '12px 0')};\n\n border-top: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n border-bottom: ${(props) => (props?.hasContentBorders ? `1px solid ${COLORS.neutral_100}` : 'none')};\n\n ${scrollBarStyling(Size.Small)}\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.js"}
|