@laerdal/life-react-components 2.3.1-dev.9 → 3.0.0

package/dist/Dropdown/DropdownFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.cjs","names":["DropdownFilter","React","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","useFocusVisibleRef","inputRef","clearButtonRef","useRef","useActionWithin","useImperativeHandle","current","containerRef","useClickOutsideRef","useFocusOutsideRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin,\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          ellipsis\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {!isOpen ? <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n            {input}\n          </TooltipOverflow> : null}\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <SystemIcons.ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <SystemIcons.Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownFilter.cjs","names":["DropdownFilter","React","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","overflowTooltipPosition","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","useFocusVisibleRef","inputRef","clearButtonRef","useRef","useActionWithin","useImperativeHandle","current","containerRef","useClickOutsideRef","useFocusOutsideRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  overflowTooltipPosition?: 'top' | 'bottom';\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin,\n                                            loading,\n                                            onFocus,\n                                            overflowTooltipPosition,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          ellipsis\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {!isOpen ? <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n            {input}\n          </TooltipOverflow> : null}\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <SystemIcons.ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <SystemIcons.Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownFilter.d.ts

@@ -16,6 +16,7 @@ interface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<H
     activeValidationMessage?: string;
     autofilledMessage?: string;
     size?: Size.Small | Size.Medium;
+    overflowTooltipPosition?: 'top' | 'bottom';
     buttonFontSize?: string;
     margin?: string;
     scrollable?: boolean;

package/dist/Dropdown/DropdownFilter.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "margin", "loading", "onFocus", "onBlur", "dataTestId"];
+var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "margin", "loading", "onFocus", "overflowTooltipPosition", "onBlur", "dataTestId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
@@ -39,6 +39,7 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     margin = _ref.margin,
     loading = _ref.loading,
     _onFocus = _ref.onFocus,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
     _onBlur = _ref.onBlur,
     dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -200,12 +201,12 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         disabled: disabled || false,
         "data-testid": dataTestId
       }, rest)), !isOpen ? /*#__PURE__*/_jsx(TooltipOverflow, {
+        position: overflowTooltipPosition,
         input: inputRef,
         withArrow: true,
         maxWidth: "100%",
         size: size,
         align: "end",
-        position: "bottom",
         children: input
       }) : null, input && !readOnly && !disabled && !loading && /*#__PURE__*/_jsx(IconButton, {
         action: handleInputClear,
@@ -311,6 +312,7 @@ DropdownFilter.propTypes = {
   messageOnNoResults: _pt.string,
   activeValidationMessage: _pt.string,
   autofilledMessage: _pt.string,
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
   buttonFontSize: _pt.string,
   margin: _pt.string,
   scrollable: _pt.bool

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.js","names":["React","COLORS","SystemIcons","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","TooltipOverflow","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin,\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          ellipsis\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {!isOpen ? <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n            {input}\n          </TooltipOverflow> : null}\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <SystemIcons.ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <SystemIcons.Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownFilter.js","names":["React","COLORS","SystemIcons","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","TooltipOverflow","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","overflowTooltipPosition","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { SystemIcons } from '../icons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  overflowTooltipPosition?: 'top' | 'bottom';\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin,\n                                            loading,\n                                            onFocus,\n                                            overflowTooltipPosition,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\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        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          ellipsis\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {!isOpen ? <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n            {input}\n          </TooltipOverflow> : null}\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <SystemIcons.ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <SystemIcons.ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <SystemIcons.Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}

package/dist/Footer/Components/FooterBottomLinks.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface Link {
     label: string;
     to: string;

package/dist/Footer/Components/FooterDropdownLinks.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavSection } from '../../types';
 interface FooterNavSectionProps {
     navSection: NavSection;

package/dist/Footer/Components/FooterNavSection.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NavOptions } from '../../types';
 interface FooterNavSectionProps {
     navOptions: NavOptions;

package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}
+{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}

package/dist/Footer/Components/FooterNewsletterAndSocialSection.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface FooterNewsletterAndSocialSection {
     actionOnNewsletterSignup?: (email: string) => void;
     newsletterLabel: string;

package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}
+{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","SystemIcons","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {SystemIcons} from '../../icons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles';\nimport {InputFieldStyling} from '../../InputFields';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <SystemIcons.Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,EAAEC,MAAM,EAAeC,mBAAmB,QAAO,cAAc;AAClF,SAAQC,SAAS,QAAO,mBAAmB;AAC3C,SAAQC,WAAW,QAAO,aAAa;AACvC,SAAQC,UAAU,QAAO,cAAc;AACvC,SACEC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,mBAAmB,QACd,cAAc;AACrB,SAAQC,iBAAiB,QAAO,mBAAmB;AAAC;AAAA;AAEpD,IAAMC,mBAAmB,GAAGZ,MAAM,CAACa,OAAO,wLAKtCZ,WAAW,CAACa,MAAM,CAGrB;AAED,IAAMC,sBAAsB,GAAGf,MAAM,CAACgB,GAAG,uXAIrCf,WAAW,CAACa,MAAM,EAMhBJ,mBAAmB,CAACF,kBAAkB,CAACS,OAAO,EAAEf,MAAM,CAACgB,KAAK,CAAC,EAK7DjB,WAAW,CAACa,MAAM,CAQvB;AAED,IAAMK,eAAe,GAAGnB,MAAM,CAACgB,GAAG,4QAK9Bf,WAAW,CAACa,MAAM,EAKlBH,iBAAiB,EAEbR,mBAAmB,CAG1B;AAED,IAAMiB,gBAAgB,GAAGpB,MAAM,CAACqB,MAAM,gYAIhBnB,MAAM,CAACgB,KAAK,EAK9BX,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAEpB,MAAM,CAACgB,KAAK,CAAC,EAExDjB,WAAW,CAACa,MAAM,EAUhBX,mBAAmB,CAExB;AAED,IAAMoB,WAAW,GAAGvB,MAAM,CAACgB,GAAG,mWACnBd,MAAM,CAACgB,KAAK,EAYjBT,kBAAkB,CAACD,kBAAkB,CAACS,OAAO,EAAE,SAAS,CAAC,EAG3DhB,WAAW,CAACa,MAAM,CAMrB;AAED,IAAMU,kBAAkB,GAAGxB,MAAM,CAACgB,GAAG,umBAOxBd,MAAM,CAACgB,KAAK,EAIXhB,MAAM,CAACgB,KAAK,EAEVhB,MAAM,CAACgB,KAAK,EAQFhB,MAAM,CAACgB,KAAK,EACvBhB,MAAM,CAACuB,WAAW,EAGPvB,MAAM,CAACwB,WAAW,EAC7BxB,MAAM,CAACyB,WAAW,EAKzBxB,mBAAmB,EAIvBF,WAAW,CAACa,MAAM,CAGrB;AAQD,IAAMc,gCAAgC,GAAG,SAAnCA,gCAAgC,OAA0G;EAAA,IAApGC,wBAAwB,QAAxBA,wBAAwB;IAAEC,eAAe,QAAfA,eAAe;IAAEC,gBAAgB,QAAhBA,gBAAgB;EACrG,sBAAoChC,KAAK,CAACiC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAvDC,UAAU;IAAEC,aAAa;EAChC,oBACE,MAAC,mBAAmB;IAAA,wBAClB,MAAC,sBAAsB;MAAA,wBACrB;QAAA,UAAQJ;MAAe,EAAS,eAChC,MAAC,eAAe;QAAA,wBACd,KAAC,SAAS;UAAC,EAAE,EAAC,iBAAiB;UAAC,aAAa,EAAE,IAAK;UAAC,WAAW,EAAEC,gBAAiB;UAAC,KAAK,EAAEE,UAAW;UAAC,QAAQ,EAAE,kBAACE,KAAa;YAAA,OAAKD,aAAa,CAACC,KAAK,CAAC;UAAA;QAAC,EAAG,eAC5J,KAAC,gBAAgB;UAAC,eAAa,SAAU;UAAC,OAAO,EAAE,iBAACC,CAAM;YAAA,OAAKP,wBAAwB,IAAIA,wBAAwB,CAACO,CAAC,CAACC,MAAM,CAACF,KAAK,CAAC;UAAA,CAAC;UAAA,UAAC;QAAO,EAAmB;MAAA,EAC/I;IAAA,EACK,eACzB,MAAC,WAAW;MAAA,wBACV;QAAA,UAAI;MAAyB,EAAK,eAClC,MAAC,kBAAkB;QAAA,wBACjB;UAAG,IAAI,EAAC,0CAA0C;UAAC,MAAM,EAAC,QAAQ;UAAC,GAAG,EAAC,qBAAqB;UAAA,uBAC1F,KAAC,UAAU;YAAC,OAAO,EAAC,WAAW;YAAC,MAAM,EAAE,kBAAM,CAAC,CAAE;YAAC,QAAQ,EAAE,CAAC,CAAE;YAAA,uBAC7D,KAAC,WAAW,CAAC,QAAQ;UAAG;QACb,EACX,eACJ;UAAG,IAAI,EAAC,oCAAoC;UAAC,MAAM,EAAC,QAAQ;UAAC,GAAG,EAAC,qBAAqB;UAAA,uBACpF,KAAC,UAAU;YAAC,OAAO,EAAC,WAAW;YAAC,MAAM,EAAE,kBAAM,CAAC,CAAE;YAAC,QAAQ,EAAE,CAAC,CAAE;YAAA,uBAC7D,KAAC,WAAW,CAAC,OAAO;UAAG;QACZ,EACX,eACJ;UAAG,IAAI,EAAC,6CAA6C;UAAC,MAAM,EAAC,QAAQ;UAAC,GAAG,EAAC,qBAAqB;UAAA,uBAC7F,KAAC,UAAU;YAAC,OAAO,EAAC,WAAW;YAAC,MAAM,EAAE,kBAAM,CAAC,CAAE;YAAC,QAAQ,EAAE,CAAC,CAAE;YAAA,uBAC7D,KAAC,WAAW,CAAC,OAAO;UAAG;QACZ,EACX;MAAA,EACe;IAAA,EACT;EAAA,EACM;AAE1B,CAAC;AAAC;EAtCAN,wBAAwB;EACxBC,eAAe;EACfC,gBAAgB;AAAA;AAsClB,eAAeH,gCAAgC"}

package/dist/Footer/Components/FooterTop.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface FooterTopProps {
     sitename?: string;
     showBetaTag?: boolean;

package/dist/Footer/Footer.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Footer: ({ children }: any) => JSX.Element;
 export default Footer;

package/dist/GlobalNavigationBar/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,2YAS5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,gbAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAO9D,UAACZ,KAAK;EAAA,OACNA,KAAK,CAACa,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAK,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAc,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMY,OAAO,GAAGpB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACmB,eAAe,IAAIR,cAAM,CAACS,WAAW;AAAA,GAOxE,UAACpB,KAAK;EAAA,OAAK,IAAAiB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAErB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACW,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKjB,cAAM,CAACW,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA;MAAA,EAGxE;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}
+{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,2YAS5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,gbAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAO9D,UAACZ,KAAK;EAAA,OACNA,KAAK,CAACa,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAK,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAc,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEhB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMY,OAAO,GAAGpB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACmB,eAAe,IAAIR,cAAM,CAACS,WAAW;AAAA,GAOxE,UAACpB,KAAK;EAAA,OAAK,IAAAiB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAErB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACW,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKjB,cAAM,CAACW,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA,UAAC;MAExE,EACD;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}

package/dist/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":"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"}
+{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 200px;\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs

@@ -117,6 +117,8 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    role: "toolbar",
+    "aria-label": "Toolbar",
     children: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (item, index) {
       return renderItem(item, index);
     })

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","ProfileWrapper","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
+{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","ProfileWrapper","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper role=\"toolbar\" aria-label=\"Toolbar\">\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.js

@@ -110,6 +110,8 @@ var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   return /*#__PURE__*/_jsx(Wrapper, {
+    role: "toolbar",
+    "aria-label": "Toolbar",
     children: buttons === null || buttons === void 0 ? void 0 : buttons.map(function (item, index) {
       return renderItem(item, index);
     })

package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","MEDIUM","ProfileWrapper","DesktopActions","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
+{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","MEDIUM","ProfileWrapper","DesktopActions","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.MEDIUM} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SystemIcons.SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper role=\"toolbar\" aria-label=\"Toolbar\">\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs

@@ -20,7 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var flowDown = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 exports.flowDown = flowDown;
-var Menu = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n"])), _styles.COLORS.white, flowDown, flowDown, _styles.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM);
+var Menu = _styledComponents.default.ul(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: -8px;\n  min-width: 300px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  z-index: ", ";\n\n  top: 12px;\n  ", " {\n    top: 18px;\n  }\n  ", " {\n    top: 24px;\n  }\n\n  .open & {\n    display: block;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), _styles.COLORS.white, flowDown, flowDown, _styles.Z_INDEXES.dropdown, _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.MEDIUM, _styles.focusStyles);
 exports.Menu = Menu;
 var MenuSection = _styledComponents.default.li(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n"])), _styles.COLORS.neutral_100);
 exports.MenuSection = MenuSection;