@digitransit-component/digitransit-component-favourite-editing-modal 7.0.0 → 8.0.0

package/lib/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { ReactSortable } from 'react-sortablejs';
@@ -8,6 +8,7 @@ import DialogModal from '@digitransit-component/digitransit-component-dialog-mod
 import { FlexColumn, Text, FlexRow } from '@hsl-fi/layout-primitives';
 import Icon from '@digitransit-component/digitransit-component-icon';
 import { createInstance } from 'i18next';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6181,71 +6182,83 @@ function FavouriteListItem({
   });
   const iconId = getIconId(favourite.selectedIconId);
   const [name, address] = formatFavouritePlaceLabel(favourite.name, favourite.address);
-  return /*#__PURE__*/React.createElement("li", {
-    className: styles.item
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.dragHandle
-  }, onMoveUp && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles.arrow,
-    "aria-label": t('up', {
-      lng: lang
-    }),
-    onClick: onMoveUp
-  }, "\u2191"), onMoveDown && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles.arrow,
-    "aria-label": t('down', {
-      lng: lang
-    }),
-    onClick: onMoveDown
-  }, "\u2193"), /*#__PURE__*/React.createElement("span", {
-    className: styles.ellipsis
-  }, /*#__PURE__*/React.createElement(Icon, {
-    img: "ellipsis",
-    color: "currentColor"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: styles.placeIcon
-  }, /*#__PURE__*/React.createElement(Icon, {
-    img: iconId,
-    color: "currentColor"
-  }))), /*#__PURE__*/React.createElement(FlexColumn, {
-    className: styles.text
-  }, /*#__PURE__*/React.createElement(Text, {
-    variant: "text-xs-bold",
-    as: "p",
-    className: styles.name
-  }, name), /*#__PURE__*/React.createElement(Text, {
-    variant: "text-xs",
-    as: "p",
-    color: "weak",
-    className: styles.address
-  }, address)), /*#__PURE__*/React.createElement(FlexRow, {
-    alignItems: "center",
-    flexShrink: 0
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles.actionButton,
-    "aria-label": t('edit-place-name', {
-      lng: lang,
-      favourite
-    }),
-    onClick: onEdit
-  }, /*#__PURE__*/React.createElement(Icon, {
-    img: "edit",
-    color: "currentColor"
-  })), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles.actionButton,
-    "aria-label": t('delete-place-name', {
-      lng: lang,
-      favourite
-    }),
-    onClick: onDelete
-  }, /*#__PURE__*/React.createElement(Icon, {
-    img: "trash",
-    color: "currentColor"
-  }))));
+  return /*#__PURE__*/jsxs("li", {
+    className: styles.item,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: styles.dragHandle,
+      children: [onMoveUp && /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: styles.arrow,
+        "aria-label": t('up', {
+          lng: lang
+        }),
+        onClick: onMoveUp,
+        children: "\u2191"
+      }), onMoveDown && /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: styles.arrow,
+        "aria-label": t('down', {
+          lng: lang
+        }),
+        onClick: onMoveDown,
+        children: "\u2193"
+      }), /*#__PURE__*/jsx("span", {
+        className: styles.ellipsis,
+        children: /*#__PURE__*/jsx(Icon, {
+          img: "ellipsis",
+          color: "currentColor"
+        })
+      }), /*#__PURE__*/jsx("span", {
+        className: styles.placeIcon,
+        children: /*#__PURE__*/jsx(Icon, {
+          img: iconId,
+          color: "currentColor"
+        })
+      })]
+    }), /*#__PURE__*/jsxs(FlexColumn, {
+      className: styles.text,
+      children: [/*#__PURE__*/jsx(Text, {
+        variant: "text-xs-bold",
+        as: "p",
+        className: styles.name,
+        children: name
+      }), /*#__PURE__*/jsx(Text, {
+        variant: "text-xs",
+        as: "p",
+        color: "weak",
+        className: styles.address,
+        children: address
+      })]
+    }), /*#__PURE__*/jsxs(FlexRow, {
+      alignItems: "center",
+      flexShrink: 0,
+      children: [/*#__PURE__*/jsx("button", {
+        type: "button",
+        className: styles.actionButton,
+        "aria-label": t('edit-place-name', {
+          lng: lang,
+          favourite
+        }),
+        onClick: onEdit,
+        children: /*#__PURE__*/jsx(Icon, {
+          img: "edit",
+          color: "currentColor"
+        })
+      }), /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: styles.actionButton,
+        "aria-label": t('delete-place-name', {
+          lng: lang,
+          favourite
+        }),
+        onClick: onDelete,
+        children: /*#__PURE__*/jsx(Icon, {
+          img: "trash",
+          color: "currentColor"
+        })
+      })]
+    })]
+  });
 }
 process.env.NODE_ENV !== "production" ? FavouriteListItem.propTypes = {
   favourite: PropTypes.shape({
@@ -6260,24 +6273,6 @@ process.env.NODE_ENV !== "production" ? FavouriteListItem.propTypes = {
   onMoveDown: PropTypes.func
 } : void 0;
 
-/**
- * A dialog for reordering, editing and deleting favourite places, built on
- * the HSL design system's Modal. Colors, typography and the mobile/desktop
- * layout are handled by the design system, so the dialog follows the active
- * deployment's theme.
- *
- * @example
- * <FavouriteEditingModal
- *   isModalOpen={modalOpen}
- *   handleClose={handleClose}
- *   favourites={favourites}
- *   updateFavourites={onUpdateFavourites}
- *   deleteFavourite={onDeleteFavourite}
- *   onEditSelected={onEditSelected}
- *   isLoading={false}
- *   lang="fi"
- * />
- */
 function FavouriteEditingModal({
   isModalOpen,
   handleClose,
@@ -6331,65 +6326,71 @@ function FavouriteEditingModal({
     }
   };
   const closeDeleteDialog = () => setSelectedFavourite(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogModal, {
-    headerText: t('delete-place-header', {
-      lng: lang
-    }),
-    handleClose: () => {
-      closeDeleteDialog();
-      handleClose();
-    },
-    isModalOpen: selectedFavourite !== null,
-    dialogContent: selectedFavourite ? `${selectedFavourite.name}: ${selectedFavourite.address}` : '',
-    primaryButtonText: t('delete', {
-      lng: lang
-    }),
-    primaryButtonOnClick: () => {
-      deleteFavourite(selectedFavourite);
-      closeDeleteDialog();
-    },
-    secondaryButtonText: t('cancel', {
-      lng: lang
-    }),
-    secondaryButtonOnClick: closeDeleteDialog,
-    lang: lang
-  }), /*#__PURE__*/React.createElement(Modal, {
-    open: isModalOpen && selectedFavourite === null,
-    onOpenChange: open => {
-      if (!open) {
-        closeModal();
-      }
-    }
-  }, /*#__PURE__*/React.createElement(ModalContent, {
-    lang: lang,
-    title: t('edit-places', {
-      lng: lang
-    }),
-    className: styles.modalContent,
-    "aria-describedby": undefined
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.listContainer
-  }, /*#__PURE__*/React.createElement(ReactSortable, {
-    className: styles.list,
-    tag: "ul",
-    list: items,
-    setList: setList,
-    animation: 200,
-    handle: `.${DRAG_HANDLE_CLASS}`,
-    forceFallback: true,
-    ghostClass: styles.ghost,
-    fallbackClass: styles.fallback
-  }, items.map((favourite, index) => /*#__PURE__*/React.createElement(FavouriteListItem, {
-    key: favourite.favouriteId,
-    favourite: favourite,
-    lang: lang,
-    onMoveUp: index > 0 ? () => move(index, -1) : null,
-    onMoveDown: index < items.length - 1 ? () => move(index, 1) : null,
-    onEdit: () => onEditSelected(favourite),
-    onDelete: () => setSelectedFavourite(favourite)
-  }))), isLoading && /*#__PURE__*/React.createElement("div", {
-    className: styles.overlay
-  }, /*#__PURE__*/React.createElement(Spinner, null))))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(DialogModal, {
+      headerText: t('delete-place-header', {
+        lng: lang
+      }),
+      handleClose: () => {
+        closeDeleteDialog();
+        handleClose();
+      },
+      isModalOpen: selectedFavourite !== null,
+      dialogContent: selectedFavourite ? `${selectedFavourite.name}: ${selectedFavourite.address}` : '',
+      primaryButtonText: t('delete', {
+        lng: lang
+      }),
+      primaryButtonOnClick: () => {
+        deleteFavourite(selectedFavourite);
+        closeDeleteDialog();
+      },
+      secondaryButtonText: t('cancel', {
+        lng: lang
+      }),
+      secondaryButtonOnClick: closeDeleteDialog,
+      lang: lang
+    }), /*#__PURE__*/jsx(Modal, {
+      open: isModalOpen && selectedFavourite === null,
+      onOpenChange: open => {
+        if (!open) {
+          closeModal();
+        }
+      },
+      children: /*#__PURE__*/jsx(ModalContent, {
+        lang: lang,
+        title: t('edit-places', {
+          lng: lang
+        }),
+        className: styles.modalContent,
+        "aria-describedby": undefined,
+        children: /*#__PURE__*/jsxs("div", {
+          className: styles.listContainer,
+          children: [/*#__PURE__*/jsx(ReactSortable, {
+            className: styles.list,
+            tag: "ul",
+            list: items,
+            setList: setList,
+            animation: 200,
+            handle: `.${DRAG_HANDLE_CLASS}`,
+            forceFallback: true,
+            ghostClass: styles.ghost,
+            fallbackClass: styles.fallback,
+            children: items.map((favourite, index) => /*#__PURE__*/jsx(FavouriteListItem, {
+              favourite: favourite,
+              lang: lang,
+              onMoveUp: index > 0 ? () => move(index, -1) : null,
+              onMoveDown: index < items.length - 1 ? () => move(index, 1) : null,
+              onEdit: () => onEditSelected(favourite),
+              onDelete: () => setSelectedFavourite(favourite)
+            }, favourite.favouriteId))
+          }), isLoading && /*#__PURE__*/jsx("div", {
+            className: styles.overlay,
+            children: /*#__PURE__*/jsx(Spinner, {})
+          })]
+        })
+      })
+    })]
+  });
 }
 process.env.NODE_ENV !== "production" ? FavouriteEditingModal.propTypes = {
   /** Required. Whether the dialog is open.