@pushwoosh/dumb-components 1.1.180 → 1.1.182

package/Banner/Banner.js

@@ -42,7 +42,7 @@ export function Banner(props) {
   }, [onClose]);
   const handleAction = useCallback(() => {
     setIsActionPressed(true);
-    action === null || action === void 0 || action.onClick();
+    action?.onClick();
   }, [action]);
   if (!type) {
     console.error(`[Banner]: required prop type "${type}" is not set`);

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -79,12 +79,11 @@ export const CalendarDropdown = props => {
     if (isOpen) closePopover();
   });
   const onChangeHandler = val => {
-    var _props$onChange;
     setValue(val);
-    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, val);
+    props.onChange?.(val);
   };
   const presets = 'presets' in props ? props.presets : undefined;
-  const noValue = isRangePicker ? ((value === null || value === void 0 ? void 0 : value.length) ?? 0) === 0 : !value;
+  const noValue = isRangePicker ? (value?.length ?? 0) === 0 : !value;
   let buttonText;
   if (noValue) {
     buttonText = isRangePicker ? lang({
@@ -192,7 +191,7 @@ export const CalendarDropdown = props => {
               let isInvalid;
               if (isRangePicker) {
                 const range = value;
-                const length = (range === null || range === void 0 ? void 0 : range.length) ?? 0;
+                const length = range?.length ?? 0;
                 isInvalid = allowEmpty ? length === 1 : length !== 2;
               } else {
                 isInvalid = allowEmpty ? false : !value;

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.js

@@ -147,6 +147,6 @@ export const CalendarMonthSlider = ({
         onClick: animateForward,
         isDisabled: inTransition
       })
-    }), renderAfter === null || renderAfter === void 0 ? void 0 : renderAfter()]
+    }), renderAfter?.()]
   });
 };

package/Calendar/CalendarSuperForm/components/CalendarTimeInput.js

@@ -10,7 +10,7 @@ export const CalendarTimeInput = ({
   const defaultHour = endPeriod ? 23 : 0;
   const defaultMinute = endPeriod ? 59 : 0;
   return _jsx(NativeTimeInput, {
-    value: `${formatTwoDigitNumber((value === null || value === void 0 ? void 0 : value.hour) ?? defaultHour)}:${formatTwoDigitNumber((value === null || value === void 0 ? void 0 : value.minute) ?? defaultMinute)}`,
+    value: `${formatTwoDigitNumber(value?.hour ?? defaultHour)}:${formatTwoDigitNumber(value?.minute ?? defaultMinute)}`,
     onChange: e => {
       const [hour, minute] = e.target.value.split(':').map(Number);
       onChange({

package/Calendar/helpers.js

@@ -144,7 +144,6 @@ export const structToDate = (ds, tzOffsetMinutes) => {
 };
 /** Returns the offset in minutes (east of UTC) for an IANA `timezoneName` at the given instant `at`. */
 export function getTimezoneOffset(timezoneName, at = new Date()) {
-  var _parts$find, _parts$find2, _parts$find3, _parts$find4, _parts$find5, _parts$find6;
   const dtf = new Intl.DateTimeFormat('en-US', {
     timeZone: timezoneName,
     hour12: false,
@@ -156,12 +155,12 @@ export function getTimezoneOffset(timezoneName, at = new Date()) {
     second: '2-digit'
   });
   const parts = dtf.formatToParts(at);
-  const y = Number((_parts$find = parts.find(p => p.type === 'year')) === null || _parts$find === void 0 ? void 0 : _parts$find.value);
-  const mo = Number((_parts$find2 = parts.find(p => p.type === 'month')) === null || _parts$find2 === void 0 ? void 0 : _parts$find2.value) - 1;
-  const d = Number((_parts$find3 = parts.find(p => p.type === 'day')) === null || _parts$find3 === void 0 ? void 0 : _parts$find3.value);
-  const h = Number((_parts$find4 = parts.find(p => p.type === 'hour')) === null || _parts$find4 === void 0 ? void 0 : _parts$find4.value);
-  const mi = Number((_parts$find5 = parts.find(p => p.type === 'minute')) === null || _parts$find5 === void 0 ? void 0 : _parts$find5.value);
-  const s = Number((_parts$find6 = parts.find(p => p.type === 'second')) === null || _parts$find6 === void 0 ? void 0 : _parts$find6.value);
+  const y = Number(parts.find(p => p.type === 'year')?.value);
+  const mo = Number(parts.find(p => p.type === 'month')?.value) - 1;
+  const d = Number(parts.find(p => p.type === 'day')?.value);
+  const h = Number(parts.find(p => p.type === 'hour')?.value);
+  const mi = Number(parts.find(p => p.type === 'minute')?.value);
+  const s = Number(parts.find(p => p.type === 'second')?.value);
   const asUTC = Date.UTC(y, mo, d, h, mi, s);
   return Math.round((asUTC - at.getTime()) / 60000);
 }

package/CardMetric/CardMetric.js

@@ -29,7 +29,7 @@ export function CardMetric({
   ...otherProps
 }) {
   const [visibleInfo, setVisibleInfo] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(!!(collapse !== null && collapse !== void 0 && collapse.isCollapsed));
+  const [isCollapsed, setIsCollapsed] = useState(!!collapse?.isCollapsed);
   const onMouseOver = () => setVisibleInfo(true);
   const onMouseOut = () => setVisibleInfo(false);
   return _jsxs(CardContainer, {

package/Checkbox/Checkbox.js

@@ -53,7 +53,7 @@ export function Checkbox(props) {
         checked: isChecked,
         disabled: isDisabled,
         "$type": type,
-        onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.checked)
+        onChange: event => onChange?.(event.currentTarget.checked)
       })
     }), label && _jsx("span", {
       children: label

package/Combobox/Combobox.js

@@ -116,11 +116,10 @@ function FreeCombobox({
     onClose: close,
     showClear: !!(clearable && value),
     onClear: () => {
-      var _inputRef$current;
       onChange('', {
         source: 'input'
       });
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      inputRef.current?.focus();
     },
     dropdownItems: dropdownItems,
     emptyText: resolveDropdownText(emptyText, value),
@@ -210,12 +209,11 @@ function SelectCombobox({
     setQuery('');
   }, []);
   const commit = useCallback(item => {
-    var _inputRef$current2;
     onChange(item);
     setIsOpen(false);
     setQuery('');
     setActiveIndex(0);
-    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+    inputRef.current?.blur();
   }, [onChange, setActiveIndex]);
   const onInputKeyDown = useListNavigation({
     isOpen,
@@ -269,9 +267,8 @@ function SelectCombobox({
     showChevron: true,
     onToggle: toggleOpen,
     onClear: () => {
-      var _inputRef$current3;
       onChange(null);
-      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
+      inputRef.current?.focus();
     },
     dropdownItems: dropdownItems,
     emptyText: resolveDropdownText(emptyText, query),

package/ComboboxMulti/ComboboxMulti.js

@@ -94,7 +94,6 @@ export function ComboboxMulti({
     setQuery('');
   }, []);
   const toggle = useCallback(item => {
-    var _inputRef$current;
     const key = getKey(item);
     if (selectedKeys.has(key)) {
       onChange(value.filter(v => getKey(v) !== key));
@@ -103,7 +102,7 @@ export function ComboboxMulti({
     if (maxValues !== undefined && value.length >= maxValues) return;
     onChange([...value, item]);
     setIsOpen(true);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    inputRef.current?.focus();
   }, [value, getKey, selectedKeys, onChange, maxValues]);
   const create = useCallback(() => {
     const trimmed = query.trim();

package/Drawer/components/Drawer/Drawer.js

@@ -38,13 +38,12 @@ export function Drawer({
     zIndex
   });
   useEffect(() => {
-    var _document$body$lastCh;
-    (_document$body$lastCh = document.body.lastChild) === null || _document$body$lastCh === void 0 || _document$body$lastCh.after(element);
+    document.body.lastChild?.after(element);
     return () => element.remove();
   }, [element]);
   const handleClose = useCallback(event => {
     if (event.target === event.currentTarget) {
-      onClose === null || onClose === void 0 || onClose();
+      onClose?.();
     }
   }, [onClose]);
   const handleClickOutside = useCallback(event => {

package/Drawer/components/Drawer/styles.js

@@ -20,20 +20,20 @@ export const DrawerInner = styled.div.withConfig({
   componentId: "sc-n2uxwd-1"
 })(["display:flex;justify-content:flex-end;width:100vw;height:100vh;padding-top:", ";padding-right:", ";padding-bottom:", ";padding-left:", ";", "{", "}", "{", "}"], ({
   $padding
-}) => ($padding === null || $padding === void 0 ? void 0 : $padding.top) || '0px', ({
+}) => $padding?.top || '0px', ({
   $padding
-}) => ($padding === null || $padding === void 0 ? void 0 : $padding.right) || '0px', ({
+}) => $padding?.right || '0px', ({
   $padding
-}) => ($padding === null || $padding === void 0 ? void 0 : $padding.bottom) || '0px', ({
+}) => $padding?.bottom || '0px', ({
   $padding
-}) => ($padding === null || $padding === void 0 ? void 0 : $padding.left) || '280px', DrawerBody, ({
+}) => $padding?.left || '280px', DrawerBody, ({
   $padding
-}) => ($padding === null || $padding === void 0 ? void 0 : $padding.bottom) && `
+}) => $padding?.bottom && `
         border-bottom-left-radius: ${ShapeRadius.SECTION};
         border-bottom-right-radius: ${ShapeRadius.SECTION};
       `, DrawerHeader, ({
   $padding
-}) => ($padding === null || $padding === void 0 ? void 0 : $padding.top) && `
+}) => $padding?.top && `
       border-top-left-radius: ${ShapeRadius.SECTION};
       border-top-right-radius: ${ShapeRadius.SECTION};
     `);

package/Drawer/components/DrawerDocs/DrawerDocs.js

@@ -24,8 +24,7 @@ export function DrawerDocs(props) {
   const iframeRef = useRef(null);
   useEffect(() => {
     const updateDrawerWidth = () => {
-      var _drawerDocsRef$curren;
-      if ((_drawerDocsRef$curren = drawerDocsRef.current) !== null && _drawerDocsRef$curren !== void 0 && _drawerDocsRef$curren.parentElement) {
+      if (drawerDocsRef.current?.parentElement) {
         setDrawerWidth(drawerDocsRef.current.parentElement.getBoundingClientRect().width);
       }
     };

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -35,7 +35,7 @@ export const DropdownMenu = ({
   const [width, setWidth] = useState(windowWidth);
   const handleClose = useCallback(() => {
     setIsOpen(false);
-    onClose === null || onClose === void 0 || onClose();
+    onClose?.();
   }, [onClose]);
   const {
     zIndex: resolvedZIndex
@@ -64,8 +64,7 @@ export const DropdownMenu = ({
   useEffect(() => {
     if (isOpen) {
       const handleClickListener = e => {
-        var _refs$floating$curren, _refs$reference$curre;
-        if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !((_refs$reference$curre = refs.reference.current) !== null && _refs$reference$curre !== void 0 && _refs$reference$curre.contains(e.target))) {
+        if (!refs.floating.current?.contains(e.target) && !refs.reference.current?.contains(e.target)) {
           handleClose();
         }
       };

package/DropdownMenu/components/DropdownMenuItem/DropdownMenuItem.js

@@ -29,7 +29,7 @@ export const DropdownMenuItem = ({
     "$danger": isDanger,
     onClick: () => {
       if (closeOnClick) {
-        onClickContext === null || onClickContext === void 0 || onClickContext(false);
+        onClickContext?.(false);
       }
       onClick();
     },

package/DropdownMenu/components/DropdownMenuSubmenu/DropdownMenuSubmenu.js

@@ -66,7 +66,7 @@ export const DropdownMenuSubmenu = ({
   const closeChain = useCallback(() => {
     openedByClick.current = false;
     setIsOpen(false);
-    parentClose === null || parentClose === void 0 || parentClose(false);
+    parentClose?.(false);
   }, [parentClose]);
   return _jsx(DropdownContext.Provider, {
     value: closeChain,

package/EmojiPicker/EmojiPicker.js

@@ -14,8 +14,7 @@ export const EmojiPicker = props => {
         ...props
       });
     } else {
-      var _window;
-      const PickerElement = (_window = window) === null || _window === void 0 ? void 0 : _window.customElements.get('em-emoji-picker');
+      const PickerElement = window?.customElements.get('em-emoji-picker');
       instance.current = new (PickerElement || Picker)({
         data,
         ...props,

package/FrequencyCapping/FrequencyCappingReadonly.js

@@ -18,7 +18,7 @@ export function FrequencyCappingReadonly({
   isInJourney = false
 }) {
   const lang = useLang();
-  const cappingOption = getCappingOption(capping === null || capping === void 0 ? void 0 : capping.enabled, capping === null || capping === void 0 ? void 0 : capping.ignoreGlobalCapping);
+  const cappingOption = getCappingOption(capping?.enabled, capping?.ignoreGlobalCapping);
   const isGlobalCappingDisabled = globalCapping.count === 0 && globalCapping.days === 0;
   const globalCappingLinkText = getGlobalCappingLinkText(lang, isGlobalCappingDisabled);
   const label = getReadonlyCappingLabel(cappingOption, isGlobalCappingDisabled, capping, globalCapping, isInJourney, lang);

package/FrequencyCapping/components/Settings/EditInAppCappingSettings.js

@@ -6,7 +6,6 @@ import { Checkbox } from '../../../Checkbox';
 import { NumberPicker } from '../../../NumberPicker';
 import { Lang } from '../../polyglot';
 export function EditInAppCappingSettings(props) {
-  var _capping$total, _capping$perDays, _capping$perDays2, _capping$leastDays;
   const {
     capping,
     onChange
@@ -106,7 +105,7 @@ export function EditInAppCappingSettings(props) {
         isChecked: hasTotal,
         onChange: onTotalToggle
       }), _jsx(NumberPicker, {
-        value: ((_capping$total = capping.total) === null || _capping$total === void 0 ? void 0 : _capping$total.count) ?? 1,
+        value: capping.total?.count ?? 1,
         minValue: 1,
         maxValue: 1000,
         isDisabled: !hasTotal,
@@ -128,7 +127,7 @@ export function EditInAppCappingSettings(props) {
         isChecked: hasPerDays,
         onChange: onPerDaysToggle
       }), _jsx(NumberPicker, {
-        value: ((_capping$perDays = capping.perDays) === null || _capping$perDays === void 0 ? void 0 : _capping$perDays.count) ?? 1,
+        value: capping.perDays?.count ?? 1,
         minValue: 1,
         maxValue: 1000,
         isDisabled: !hasPerDays,
@@ -138,7 +137,7 @@ export function EditInAppCappingSettings(props) {
           message: "DUMB.FREQUENCY_CAPPING.INAPP.IMPRESSIONS_IN"
         })
       }), _jsx(NumberPicker, {
-        value: ((_capping$perDays2 = capping.perDays) === null || _capping$perDays2 === void 0 ? void 0 : _capping$perDays2.days) ?? 1,
+        value: capping.perDays?.days ?? 1,
         minValue: 1,
         maxValue: 366,
         isDisabled: !hasPerDays,
@@ -160,7 +159,7 @@ export function EditInAppCappingSettings(props) {
         isChecked: hasLeastDays,
         onChange: onLeastDaysToggle
       }), _jsx(NumberPicker, {
-        value: ((_capping$leastDays = capping.leastDays) === null || _capping$leastDays === void 0 ? void 0 : _capping$leastDays.count) ?? 1,
+        value: capping.leastDays?.count ?? 1,
         minValue: 1,
         maxValue: 366,
         isDisabled: !hasLeastDays,

package/InputFile/InputFile.js

@@ -31,8 +31,7 @@ export function InputFile({
 }) {
   const fieldRef = useRef(null);
   const uploadFile = event => {
-    var _event$target$files;
-    const file = ((_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files.length) && event.target.files[0];
+    const file = event.target.files?.length && event.target.files[0];
     if (!file) {
       return;
     }
@@ -48,10 +47,9 @@ export function InputFile({
     }
     const reader = new FileReader();
     reader.onload = upload => {
-      var _upload$target;
       const result = {
         file,
-        [name]: (_upload$target = upload.target) === null || _upload$target === void 0 ? void 0 : _upload$target.result
+        [name]: upload.target?.result
       };
       onChange(result);
     };
@@ -85,10 +83,7 @@ export function InputFile({
           size: "field",
           view: "shape",
           isDisabled: disabled,
-          onClick: () => {
-            var _fieldRef$current;
-            return fieldRef === null || fieldRef === void 0 || (_fieldRef$current = fieldRef.current) === null || _fieldRef$current === void 0 ? void 0 : _fieldRef$current.click();
-          },
+          onClick: () => fieldRef?.current?.click(),
           icon: _jsx(AttachmentIcon, {
             size: "medium",
             view: "lined"

package/Modal/components/Modal/Modal.js

@@ -37,12 +37,11 @@ export function Modal(props) {
   });
   const handleClose = useCallback(event => {
     if (event.target === event.currentTarget) {
-      onClose === null || onClose === void 0 || onClose();
+      onClose?.();
     }
   }, [onClose]);
   useEffect(() => {
-    var _document$body$lastCh;
-    (_document$body$lastCh = document.body.lastChild) === null || _document$body$lastCh === void 0 || _document$body$lastCh.after(element);
+    document.body.lastChild?.after(element);
     return () => element.remove();
   }, [element]);
   return createPortal(_jsx(ModalBoxTrans, {

package/Modal/components/ModalConfirm/ModalConfirm.js

@@ -44,10 +44,10 @@ export function ModalConfirm(props) {
     try {
       setIsLoading(true);
       setErrorMessage('');
-      await (callback === null || callback === void 0 ? void 0 : callback());
+      await callback?.();
       await onAccept();
     } catch (error) {
-      setErrorMessage((error === null || error === void 0 ? void 0 : error.message) || lang({
+      setErrorMessage(error?.message || lang({
         message: 'DUMB.MODAL.UNEXPECTED_ERROR'
       }));
     } finally {

package/NativeRichMediaPreview/NativeRichMediaPreview.js

@@ -65,9 +65,8 @@ function renderBackdrop(config, activeIndex) {
       return renderCoverBackdrop(config.video.poster, '#000');
     case 'stories':
       {
-        var _items$clampIndex;
         const items = config.stories.items;
-        return renderCoverBackdrop((_items$clampIndex = items[clampIndex(activeIndex, items.length)]) === null || _items$clampIndex === void 0 ? void 0 : _items$clampIndex.image, '#000');
+        return renderCoverBackdrop(items[clampIndex(activeIndex, items.length)]?.image, '#000');
       }
     default:
       return null;

package/NativeRichMediaPreview/resolveLocalization.js

@@ -1,17 +1,16 @@
 const PLACEHOLDER_RE = /^\{\{([^|}]+)\|[^|}]*(?:\|([^}]*))?\}\}$/;
 function resolveValue(value, localization, language) {
-  var _localization$languag, _localization$default;
   const match = PLACEHOLDER_RE.exec(value);
   if (!match) {
     return value;
   }
   const key = match[1];
   const fallback = match[2] ?? key;
-  const languageValue = language ? localization === null || localization === void 0 || (_localization$languag = localization[language]) === null || _localization$languag === void 0 ? void 0 : _localization$languag[key] : undefined;
+  const languageValue = language ? localization?.[language]?.[key] : undefined;
   if (typeof languageValue === 'string') {
     return languageValue;
   }
-  const defaultValue = localization === null || localization === void 0 || (_localization$default = localization.default) === null || _localization$default === void 0 ? void 0 : _localization$default[key];
+  const defaultValue = localization?.default?.[key];
   if (typeof defaultValue === 'string') {
     return defaultValue;
   }

package/NativeRichMediaPreview/views/NativeRichMediaSpinwheelView/NativeRichMediaSpinwheelView.js

@@ -45,10 +45,10 @@ export function NativeRichMediaSpinwheelView(props) {
           }, `spin-segment-${i}`);
         })
       }), _jsx(Pointer, {}), _jsx(Hub, {
-        "$background": spinButton === null || spinButton === void 0 ? void 0 : spinButton.background,
-        "$color": spinButton === null || spinButton === void 0 ? void 0 : spinButton.text.color,
-        "$borderColor": spinButton === null || spinButton === void 0 ? void 0 : spinButton.border.color,
-        children: (spinButton === null || spinButton === void 0 ? void 0 : spinButton.text.text) || 'SPIN'
+        "$background": spinButton?.background,
+        "$color": spinButton?.text.color,
+        "$borderColor": spinButton?.border.color,
+        children: spinButton?.text.text || 'SPIN'
       })]
     }), block.showClose && _jsx(NativeRichMediaCloseChip, {
       top: 16,

package/NotificationInbox/NotificationInbox.js

@@ -38,7 +38,7 @@ export function NotificationInbox({
     if (!notification.isRead && onMarkAsRead) {
       onMarkAsRead(notification.id);
     }
-    onNotificationClick === null || onNotificationClick === void 0 || onNotificationClick(notification);
+    onNotificationClick?.(notification);
   }, [onMarkAsRead, onNotificationClick]);
   const loadMoreRef = useInfiniteScroll({
     hasMore,
@@ -169,9 +169,8 @@ export function NotificationInbox({
               children: [notification.actionButton && _jsx(NotificationActionLink, {
                 "$isPrimary": true,
                 onClick: e => {
-                  var _notification$actionB;
                   e.stopPropagation();
-                  (_notification$actionB = notification.actionButton) === null || _notification$actionB === void 0 || _notification$actionB.onClick();
+                  notification.actionButton?.onClick();
                 },
                 children: notification.actionButton.label
               }), showExpandButton && _jsx(NotificationActionLink, {

package/NotificationInbox/useInfiniteScroll.js

@@ -14,13 +14,12 @@ export function useInfiniteScroll({
     elementRef.current = node;
   }, []);
   useEffect(() => {
-    var _observerRef$current;
     const el = elementRef.current;
     if (!enabled || !el || !hasMore || !onLoadMore) return;
     const resolvedRoot = root ?? el.closest('[data-notification-list]');
-    (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
+    observerRef.current?.disconnect();
     observerRef.current = new IntersectionObserver(([entry]) => {
-      if (entry !== null && entry !== void 0 && entry.isIntersecting && !isLoading && hasMore) {
+      if (entry?.isIntersecting && !isLoading && hasMore) {
         onLoadMore();
       }
     }, {
@@ -30,8 +29,7 @@ export function useInfiniteScroll({
     });
     observerRef.current.observe(el);
     return () => {
-      var _observerRef$current2;
-      (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.disconnect();
+      observerRef.current?.disconnect();
       observerRef.current = null;
     };
   }, [enabled, hasMore, isLoading, onLoadMore, root, rootMargin, threshold]);

package/PageHeader/components/AutosizeInput/AutosizeInput.js

@@ -26,7 +26,7 @@ export function AutosizeInput(props) {
   useEffect(() => {
     if (!defaultValue.current) {
       defaultValue.current = DEFAULT_EMPTY_VALUE;
-      onChange === null || onChange === void 0 || onChange(DEFAULT_EMPTY_VALUE);
+      onChange?.(DEFAULT_EMPTY_VALUE);
     }
   }, [defaultValue, onChange]);
   useEffect(() => {
@@ -39,35 +39,30 @@ export function AutosizeInput(props) {
   }, [value]);
   const onKeyDown = event => {
     if (event.key === 'Enter') {
-      var _inputRef$current;
       event.preventDefault();
-      inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+      inputRef?.current?.blur();
     }
     if (event.key === 'Escape') {
-      var _inputRef$current2;
       event.preventDefault();
-      onChange === null || onChange === void 0 || onChange(defaultValue.current);
+      onChange?.(defaultValue.current);
       setWidth(defaultValue.current.length);
-      inputRef === null || inputRef === void 0 || (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+      inputRef?.current?.blur();
     }
   };
   const onChangeHandler = event => {
     const formattedValue = maxLength ? event.currentTarget.value.slice(0, maxLength) : event.currentTarget.value;
-    onChange === null || onChange === void 0 || onChange(formattedValue.replace(/\n/g, ''));
+    onChange?.(formattedValue.replace(/\n/g, ''));
   };
   const onFocus = () => {
     if (value === DEFAULT_EMPTY_VALUE) {
-      onChange === null || onChange === void 0 || onChange('');
+      onChange?.('');
     }
   };
   const onBlur = () => {
     if (value === '') {
-      onChange === null || onChange === void 0 || onChange(defaultValue.current);
+      onChange?.(defaultValue.current);
     }
-    setTimeout(() => {
-      var _inputRef$current3;
-      return onComplete === null || onComplete === void 0 ? void 0 : onComplete(inputRef === null || inputRef === void 0 || (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value);
-    }, 100);
+    setTimeout(() => onComplete?.(inputRef?.current?.value), 100);
   };
   return _jsxs(RootBox, {
     children: [_jsxs(InputBox, {
@@ -88,10 +83,7 @@ export function AutosizeInput(props) {
         children: placeholder
       })]
     }), _jsx(PromptBox, {
-      onClick: () => {
-        var _inputRef$current4;
-        return (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
-      },
+      onClick: () => inputRef.current?.focus(),
       children: _jsx(EditIcon, {
         size: "small",
         view: "filled"

package/PushPreview/PushPreview.js

@@ -22,10 +22,10 @@ export function PushPreview({
   isLoading = false,
   width
 }) {
-  const title = getLocalizedContent((pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.title) || (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.localizedTitle), language) || appTitle;
-  const subtitle = getLocalizedContent((pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.subtitle) || (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.localizedSubtitle), language);
-  const content = getLocalizedContent((pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.content) || (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.localizedContent), language);
-  const icon = (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.icon) || appIcon || PREVIEW_ICON_URL;
+  const title = getLocalizedContent(pushPreset?.title || pushPreset?.localizedTitle, language) || appTitle;
+  const subtitle = getLocalizedContent(pushPreset?.subtitle || pushPreset?.localizedSubtitle, language);
+  const content = getLocalizedContent(pushPreset?.content || pushPreset?.localizedContent, language);
+  const icon = pushPreset?.icon || appIcon || PREVIEW_ICON_URL;
   if (isLoading) {
     return _jsx(PushBox, {
       view: view,

package/PushPreview/helpers.js

@@ -7,4 +7,4 @@ export const getDefaultLanguage = properties => {
   }
   return Object.keys(properties)[0];
 };
-export const getLocalizedContent = (value, language) => (value === null || value === void 0 ? void 0 : value[language || getDefaultLanguage(value)]) || '';
+export const getLocalizedContent = (value, language) => value?.[language || getDefaultLanguage(value)] || '';

package/Radio/Radio.js

@@ -50,7 +50,7 @@ export function Radio(props) {
         disabled: isDisabled,
         "$size": size,
         "$type": type,
-        onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value),
+        onChange: event => onChange?.(event.currentTarget.value),
         onBlur: onBlur
       })
     }), label && _jsx("span", {

package/ReCaptcha/hooks.js

@@ -6,9 +6,8 @@ import { asyncScriptLoad } from './helpers';
  * element, and returns `{ isRecaptchaReady, recaptchaErrorCode, getRecaptchaToken }`.
  */
 export function useRecaptcha() {
-  var _window;
   const promiseRef = useRef({});
-  const [isRecaptchaLoaded, setRecaptchaLoaded] = useState(!!((_window = window) !== null && _window !== void 0 && (_window = _window.grecaptcha) !== null && _window !== void 0 && _window.render));
+  const [isRecaptchaLoaded, setRecaptchaLoaded] = useState(!!window?.grecaptcha?.render);
   const [widgetID, setWidgetID] = useState(null);
   const [isRecaptchaReady, setRecaptchaReady] = useState(!!(isRecaptchaLoaded && widgetID));
   const [recaptchaErrorCode, setRecaptchaErrorCode] = useState(''); // RIEXXX - ReCaptcha Internal Error
@@ -20,8 +19,7 @@ export function useRecaptcha() {
   // Set interval while library download and initialize
   useEffect(() => {
     const newInterval = window.setInterval(() => {
-      var _window2;
-      if ((_window2 = window) !== null && _window2 !== void 0 && (_window2 = _window2.grecaptcha) !== null && _window2 !== void 0 && _window2.render) {
+      if (window?.grecaptcha?.render) {
         setRecaptchaLoaded(true);
       }
     }, 500);
@@ -38,10 +36,7 @@ export function useRecaptcha() {
         const widget = window.grecaptcha.render(RECAPTCHA_CONTAINER_ID, {
           sitekey: RECAPTCHA_KEY,
           size: 'invisible',
-          callback: token => {
-            var _promiseRef$current;
-            return (_promiseRef$current = promiseRef.current) === null || _promiseRef$current === void 0 ? void 0 : _promiseRef$current.resolve(token);
-          }
+          callback: token => promiseRef.current?.resolve(token)
           // 'expired-callback': () => {},
           // 'error-callback': () => {},
         });

package/RichMessageEditor/RichMessageEditor.js

@@ -82,7 +82,7 @@ export const RichMessageEditor = ({
   };
   const clickAwayHandler = usePersistentFunction(() => {
     onClose();
-    onBlur === null || onBlur === void 0 || onBlur();
+    onBlur?.();
   });
   useEffect(() => {
     if (!isFocused) {
@@ -100,76 +100,73 @@ export const RichMessageEditor = ({
     onSelectionChange: onSelectionChange,
     children: ({
       editor
-    }) => {
-      var _getDcByPath, _middlewareData$arrow, _middlewareData$arrow2;
-      return _jsxs(FieldBox, {
-        title: title,
-        boxRef: refs.setReference,
-        error: error,
-        actions: _jsx(Collapse, {
-          expanded: isFocused,
-          children: _jsxs(Horizontal, {
-            "$gap": 8,
-            children: [canUsePersonalization && _jsxs(ImSpan, {
-              onClick: () => setShowDrop({
-                type: 'personalization'
-              }),
-              children: [_jsx(PersonalizationIcon, {}), "Personalization"]
-            }), canUseEmoji && _jsxs(ImSpan, {
-              onClick: () => setShowDrop({
-                type: 'emoji'
-              }),
-              children: [_jsx(EmojiIcon, {}), "Emoji"]
-            })]
-          })
-        }),
-        children: [_jsx(SlateEditable, {
-          minHeight: minHeight,
-          onFocus: () => {
-            setIsFocused(true);
-            const {
-              selection
-            } = editor;
-            if (selection) {
-              onSelectionChange(selection);
-            }
-          },
-          onDelete: () => {
-            setShowDrop(undefined);
+    }) => _jsxs(FieldBox, {
+      title: title,
+      boxRef: refs.setReference,
+      error: error,
+      actions: _jsx(Collapse, {
+        expanded: isFocused,
+        children: _jsxs(Horizontal, {
+          "$gap": 8,
+          children: [canUsePersonalization && _jsxs(ImSpan, {
+            onClick: () => setShowDrop({
+              type: 'personalization'
+            }),
+            children: [_jsx(PersonalizationIcon, {}), "Personalization"]
+          }), canUseEmoji && _jsxs(ImSpan, {
+            onClick: () => setShowDrop({
+              type: 'emoji'
+            }),
+            children: [_jsx(EmojiIcon, {}), "Emoji"]
+          })]
+        })
+      }),
+      children: [_jsx(SlateEditable, {
+        minHeight: minHeight,
+        onFocus: () => {
+          setIsFocused(true);
+          const {
+            selection
+          } = editor;
+          if (selection) {
+            onSelectionChange(selection);
           }
-        }), showDrop && _jsxs(DropArea, {
-          style: floatingStyles,
-          ref: refs.setFloating,
-          children: [showDrop.type === 'personalization' && _jsx(DropContent, {
-            children: renderDynamicContent === null || renderDynamicContent === void 0 ? void 0 : renderDynamicContent({
-              dc: showDrop.path ? (_getDcByPath = getDcByPath(editor.children, showDrop.path)) === null || _getDcByPath === void 0 ? void 0 : _getDcByPath.dc : undefined,
-              onChange: newDC => {
-                if (showDrop.path) {
-                  Transforms.setNodes(editor, {
-                    dc: newDC
-                  }, {
-                    at: showDrop.path
-                  });
-                } else {
-                  insertDynamicContent(editor, newDC);
-                }
-              },
-              onClose,
-              update
-            })
-          }), showDrop.type === 'emoji' && _jsx(EditorEmojiPicker, {
-            onEmojiSelect: s => editor.insertText(s)
-          }), _jsx(Arrow, {
-            "$direction": placementToDirection(placement),
-            ref: arrowRef,
-            style: {
-              left: (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x,
-              top: (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y
+        },
+        onDelete: () => {
+          setShowDrop(undefined);
+        }
+      }), showDrop && _jsxs(DropArea, {
+        style: floatingStyles,
+        ref: refs.setFloating,
+        children: [showDrop.type === 'personalization' && _jsx(DropContent, {
+          children: renderDynamicContent?.({
+            dc: showDrop.path ? getDcByPath(editor.children, showDrop.path)?.dc : undefined,
+            onChange: newDC => {
+              if (showDrop.path) {
+                Transforms.setNodes(editor, {
+                  dc: newDC
+                }, {
+                  at: showDrop.path
+                });
+              } else {
+                insertDynamicContent(editor, newDC);
+              }
             },
-            children: _jsx(ArrowIcon, {})
-          })]
-        }, showDrop.type)]
-      });
-    }
+            onClose,
+            update
+          })
+        }), showDrop.type === 'emoji' && _jsx(EditorEmojiPicker, {
+          onEmojiSelect: s => editor.insertText(s)
+        }), _jsx(Arrow, {
+          "$direction": placementToDirection(placement),
+          ref: arrowRef,
+          style: {
+            left: middlewareData.arrow?.x,
+            top: middlewareData.arrow?.y
+          },
+          children: _jsx(ArrowIcon, {})
+        })]
+      }, showDrop.type)]
+    })
   });
 };

package/RichMessageEditor/slate/DynamicContentElement.js

@@ -28,8 +28,7 @@ const DynamicContentElementComponent = ({
         at: [paragraphIndex, elementIndex]
       });
       if (selected) {
-        var _editor$children$para;
-        const prevOffset = ((_editor$children$para = editor.children[paragraphIndex].children[elementIndex - 1]) === null || _editor$children$para === void 0 ? void 0 : _editor$children$para.text.length) || 0;
+        const prevOffset = editor.children[paragraphIndex].children[elementIndex - 1]?.text.length || 0;
         const point = {
           path: [paragraphIndex, elementIndex - 1],
           offset: prevOffset

package/RichMessageEditor/slate/SlateEditor.styled.d.ts

@@ -8,7 +8,7 @@ export declare const EditableStyled: import("styled-components").StyledComponent
     renderElement?: ((props: import("slate-react").RenderElementProps) => React.JSX.Element) | undefined;
     renderChunk?: ((props: import("slate-react").RenderChunkProps) => React.JSX.Element) | undefined;
     renderLeaf?: ((props: import("slate-react").RenderLeafProps) => React.JSX.Element) | undefined;
-    renderText?: ((props: import("slate-react/dist/components/editable").RenderTextProps) => React.JSX.Element) | undefined;
+    renderText?: ((props: import("slate-react").RenderTextProps) => React.JSX.Element) | undefined;
     renderPlaceholder?: ((props: import("slate-react").RenderPlaceholderProps) => React.JSX.Element) | undefined;
     scrollSelectionIntoView?: ((editor: import("slate-react").ReactEditor, domRange: Range) => void) | undefined;
     as?: React.ElementType<any> | undefined;

package/RichmediaPreview/components/Template/Template.js

@@ -15,8 +15,7 @@ export class Template {
     return str.replace(/<head[^>]*>/i, founded => `${founded}<base href="${this.baseUrl}" />`);
   }
   getParamValue(varName) {
-    var _this$vars$varName;
-    return this.params && Object.prototype.hasOwnProperty.call(this.params, varName) ? this.params[varName] : (_this$vars$varName = this.vars[varName]) === null || _this$vars$varName === void 0 ? void 0 : _this$vars$varName.defaults;
+    return this.params && Object.prototype.hasOwnProperty.call(this.params, varName) ? this.params[varName] : this.vars[varName]?.defaults;
   }
   parseHtml(html) {
     const replacers = [];

package/SandboxedHtmlFrame/SandboxedHtmlFrame.js

@@ -34,11 +34,10 @@ export function SandboxedHtmlFrame(props) {
     setIsReady(true);
   }, []);
   useEffect(() => {
-    var _$ref$current;
     if (!isReady || !onReady) {
       return undefined;
     }
-    const frameDocument = (_$ref$current = $ref.current) === null || _$ref$current === void 0 ? void 0 : _$ref$current.contentDocument;
+    const frameDocument = $ref.current?.contentDocument;
     if (!frameDocument) {
       return undefined;
     }

package/Tabs/components/Tab/Tab.js

@@ -23,7 +23,7 @@ export const Tab = forwardRef((props, ref) => {
     onClick: () => {
       if (!rest.isDisabled) {
         setActiveTabCode(code);
-        onActivate === null || onActivate === void 0 || onActivate(code);
+        onActivate?.(code);
       }
     },
     ...rest,

package/Tooltip/Tooltip.js

@@ -50,7 +50,7 @@ export function Tooltip({
     setReferenceEl(node);
     assignRef(originalRef, node);
   }, [originalRef]);
-  const externalReferenceEl = (reference === null || reference === void 0 ? void 0 : reference.current) ?? null;
+  const externalReferenceEl = reference?.current ?? null;
   useEffect(() => {
     if (reference) {
       setReferenceEl(externalReferenceEl);

package/hooks/useLayer.js

@@ -27,7 +27,6 @@ function notify() {
   getState().subscribers.forEach(subscriber => subscriber());
 }
 function handleKeydown(event) {
-  var _top$close;
   if (event.key !== 'Escape') {
     return;
   }
@@ -35,7 +34,7 @@ function handleKeydown(event) {
     stack
   } = getState();
   const top = stack[stack.length - 1];
-  top === null || top === void 0 || (_top$close = top.close) === null || _top$close === void 0 || _top$close.call(top);
+  top?.close?.();
 }
 function ensureKeydownListener() {
   const state = getState();
@@ -112,10 +111,7 @@ export function useLayer({
     }
     registerLayer({
       id,
-      close: () => {
-        var _onCloseRef$current;
-        return (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef);
-      },
+      close: () => onCloseRef.current?.(),
       baseZIndex: zIndexRef.current
     });
     forceRender(value => value + 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.180",
+  "version": "1.1.182",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -24,7 +24,7 @@
     "npm": ">= 7"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.0.0",
+    "@pushwoosh/frontend-builder-engine": "^3.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -62,9 +62,9 @@
     "polished": "^4.3.1",
     "react-select": "^5.10.0",
     "react-transition-group": "^4.4.5",
-    "slate": "^0.124.0",
+    "slate": "^0.126.0",
     "slate-history": "^0.113.1",
-    "slate-react": "^0.124.0"
+    "slate-react": "^0.126.0"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^18.3.1",

package/polyglot/liquid/parser.js

@@ -345,7 +345,7 @@ export function stringToAst(template) {
     if (token.type === 'Text') {
       // eslint-disable-next-line no-nested-ternary
       const prevControl = tokens[index - 1] && tokens[index - 1].type === 'ControlArg' ? tokens[index - 2] : tokens[index - 1] && tokens[index - 1].type === 'Control' ? tokens[index - 1] : undefined;
-      const leftTrim = prevControl === null || prevControl === void 0 ? void 0 : prevControl.trimRight;
+      const leftTrim = prevControl?.trimRight;
       const rightTrim = tokens[index + 1] && tokens[index + 1].trimLeft;
       if (leftTrim || rightTrim) {
         const newValue = leftTrim ? token.value.trimStart() : token.value;

package/shared/dropdownField/FieldShell.js

@@ -55,13 +55,12 @@ export function FieldShell({
     onClose
   });
   const onShellBlur = event => {
-    var _floatingRef$current;
     if (!isOpen) return;
     const next = event.relatedTarget;
     if (!next) return;
     if (event.currentTarget.contains(next)) return;
-    if ((_floatingRef$current = floatingRef.current) !== null && _floatingRef$current !== void 0 && _floatingRef$current.contains(next)) return;
-    onClose === null || onClose === void 0 || onClose();
+    if (floatingRef.current?.contains(next)) return;
+    onClose?.();
   };
   return _jsxs(_Fragment, {
     children: [_jsxs(Shell, {
@@ -83,7 +82,7 @@ export function FieldShell({
           onMouseDown: e => {
             e.preventDefault();
             e.stopPropagation();
-            onClear === null || onClear === void 0 || onClear();
+            onClear?.();
           },
           "aria-label": clearLabel,
           children: _jsx(CloseIcon, {
@@ -95,7 +94,7 @@ export function FieldShell({
           onMouseDown: e => {
             e.preventDefault();
             e.stopPropagation();
-            onToggle === null || onToggle === void 0 || onToggle();
+            onToggle?.();
           },
           children: _jsx(ChevronIcon, {
             direction: isOpen ? 'up' : 'down',

package/shared/dropdownField/SuggestionsDropdown.js

@@ -32,11 +32,10 @@ export function SuggestionsDropdown({
     if (el.scrollHeight - el.scrollTop - el.clientHeight <= LOAD_MORE_THRESHOLD) onLoadMore();
   };
   const activeItem = items.find(item => item.active);
-  const activeKey = createActive ? CREATE_KEY : (activeItem === null || activeItem === void 0 ? void 0 : activeItem.key) ?? null;
+  const activeKey = createActive ? CREATE_KEY : activeItem?.key ?? null;
   useEffect(() => {
-    var _activeItemRef$curren;
     if (activeKey === null) return;
-    (_activeItemRef$curren = activeItemRef.current) === null || _activeItemRef$curren === void 0 || _activeItemRef$curren.scrollIntoView({
+    activeItemRef.current?.scrollIntoView({
       block: 'nearest'
     });
   }, [activeKey]);
@@ -63,7 +62,7 @@ export function SuggestionsDropdown({
       "$active": createActive,
       onMouseDown: e => {
         e.preventDefault();
-        onCreate === null || onCreate === void 0 || onCreate();
+        onCreate?.();
       },
       children: _jsx(CreateItemLabel, {
         children: createLabel
@@ -76,9 +75,8 @@ export function SuggestionsDropdown({
       "$active": item.active,
       "$selected": item.selected,
       onMouseDown: e => {
-        var _item$onSelect;
         e.preventDefault();
-        (_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item);
+        item.onSelect?.();
       },
       children: item.label
     }, item.key)), !loading && loadingMore && _jsx(DropdownLoadingMore, {

package/shared/dropdownField/shared.js

@@ -17,25 +17,22 @@ export function defaultLabelFilter(item, query, getLabel) {
  */
 export function useShellMouseDown(inputRef, isOpen, open) {
   return useCallback(event => {
-    var _inputRef$current;
     const target = event.target;
     if (target instanceof HTMLInputElement) return;
     if (target.closest('button')) return;
     event.preventDefault();
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    inputRef.current?.focus();
     if (!isOpen) open();
   }, [inputRef, isOpen, open]);
 }
 export function useToggleOpen(inputRef, isOpen, open, close) {
   return useCallback(() => {
     if (isOpen) {
-      var _inputRef$current2;
       close();
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+      inputRef.current?.blur();
     } else {
-      var _inputRef$current3;
       open();
-      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
+      inputRef.current?.focus();
     }
   }, [inputRef, isOpen, open, close]);
 }

package/shared/dropdownField/useDropdownPosition.js

@@ -39,7 +39,7 @@ export function useDropdownPosition({
     whileElementsMounted: autoUpdate
   });
   useOnClickOutside([refs.reference, refs.floating], () => {
-    if (isOpen) onClickOutside === null || onClickOutside === void 0 || onClickOutside();
+    if (isOpen) onClickOutside?.();
   });
   return {
     setReference: refs.setReference,

package/shared/dropdownField/useFieldOpenEffects.js

@@ -14,16 +14,14 @@ export function useFieldOpenEffects({
   onCloseRef.current = onClose;
   const wasOpenRef = useRef(isOpen);
   useEffect(() => {
-    var _onCloseRef$current;
-    if (wasOpenRef.current && !isOpen) (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
+    if (wasOpenRef.current && !isOpen) onCloseRef.current?.();
     wasOpenRef.current = isOpen;
   }, [isOpen]);
   const didAutoFocusRef = useRef(false);
   useEffect(() => {
-    var _inputRef$current;
     if (!autoFocus || didAutoFocusRef.current) return;
     didAutoFocusRef.current = true;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    inputRef.current?.focus();
     open();
   }, [autoFocus, open, inputRef]);
 }

package/shared/dropdownField/useListNavigation.js

@@ -30,7 +30,7 @@ export function useListNavigation({
       if (total > 0) {
         const next = activeIndex >= total - 1 ? 0 : activeIndex + 1;
         setActiveIndex(next);
-        if (next > 0 && next >= total - 1) onReachEnd === null || onReachEnd === void 0 || onReachEnd();
+        if (next > 0 && next >= total - 1) onReachEnd?.();
       }
       return;
     }
@@ -49,7 +49,7 @@ export function useListNavigation({
         return;
       }
       event.preventDefault();
-      if (hasExtraRow && activeIndex === 0) onSelectExtra === null || onSelectExtra === void 0 || onSelectExtra();else onSelectIndex(hasExtraRow ? activeIndex - 1 : activeIndex);
+      if (hasExtraRow && activeIndex === 0) onSelectExtra?.();else onSelectIndex(hasExtraRow ? activeIndex - 1 : activeIndex);
       return;
     }
     if (event.key === 'Escape') {