fix: Added support for SSR, typo fixes

Author: bilta-keyvalue

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Francisco Hodge
+Copyright (c) 2023 KeyValue Software Systems
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -22,6 +22,8 @@ npm install  @keyvaluesystems/react-multi-selection-ui-component
 
 You’ll need to install React separately since it isn't included in the package.
 
+Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
+
 ## Usage
 
 React Multi Selection UI can run in a very basic mode by just providing the `options` like given below:
@@ -276,9 +278,9 @@ To customize the style of various components, you can use the following prop nam
 
 You can utilize the provided prop names to customize the style of individual items in the chip or each item in the menu. This can be achieved by passing a function that returns the desired style for each element.
 
-- `ChipComponent` - overrides the chip style
-- `SelectedMenuItem` - overrides the selected menu item styles
-- `UnSelectedMenuItem` - overrides the non selected item styles
+- `ChipComponent` - Overrides the chip style
+- `SelectedMenuItem` - Overrides the selected menu item styles
+- `UnSelectedMenuItem` - Overrides the non selected item styles
 
 ## Icon Customizations
 
@@ -297,7 +299,7 @@ The following code displays the icons that can be customized
 />
 ```
 
-- `Arrow` - override the down arrow(right)
-- `ChipClose` - overrides the chip close icon
-- `Checked` - override the checkbox checked icon
-- `Search` - override the search icon
+- `Arrow` - Overrides the down arrow(right)
+- `ChipClose` - Overrides the chip close icon
+- `Checked` - Overrides the checkbox checked icon
+- `Search` - Overrides the search icon

package-lock.json

@@ -24,12 +24,13 @@
     "url": "https://github.com/KeyValueSoftwareSystems/react-multi-selection-ui"
   },
   "author": "Keyvalue",
-  "license": "",
+  "license": "MIT",
   "homepage": "https://github.com/KeyValueSoftwareSystems/react-multi-selection-ui",
   "keywords": [
     "library",
     "starter",
-    "es6"
+    "es6",
+    "nextjs"
   ],
   "devDependencies": {
     "@babel/cli": "^7.20.7",

package.json

@@ -44,7 +44,7 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
   //ref for the modal
   const modalRef = useRef<HTMLDivElement>(null);
   // ref for the container having chips,search bar and arrow
-  const interactableAreaRef = useRef<HTMLDivElement>(null);
+  const intractableAreaRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setList(options);
@@ -55,12 +55,11 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
   }, [options]);
 
   useEffect(() => {
-    if (typeof document !== undefined) {
+    if (typeof document!== undefined) {
       document.addEventListener("mouseup", onMouseUp);
-
       return () => document.removeEventListener("mouseup", onMouseUp);
     }
-  }, [document]);
+  }, []);
 
   const handleSearch = (value: string): void => {
     if (onSearch) {
@@ -114,12 +113,11 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
     if (
       event.target instanceof Node &&
       !modalRef?.current?.contains(event.target) &&
-      !interactableAreaRef?.current?.contains(event.target)
+      !intractableAreaRef?.current?.contains(event.target)
     ) {
       // to close the dropdown modal on clicking outside the modal and the search bar
       setIsModalVisible(false);
       setShowAllChips(false);
-      return;
     }
   };
 
@@ -137,11 +135,12 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
     <div className={classes.container} style={styles[Elements.Container]}>
       <div
         className={`${classes.box} ${hasError && classes.errorBorder}`}
-        ref={interactableAreaRef}
+        ref={intractableAreaRef}
         style={styles[Elements.InputBox]}
         onClick={(): void => {
           setShowAllChips(true);
         }}
+        role="presentation"
       >
         <div className={classes.headSection}>
           {showChips && (
@@ -176,7 +175,7 @@ const MultiSelect = (props: MultiSelectPropType): JSX.Element => {
           id="down-arrow"
         >
           <img
-            src={Arrow || DownArrow}
+            src={Arrow ?? DownArrow}
             className={classes.rotation}
             style={{
               transform: `rotate(${isModalVisible ? "180deg" : "0deg"})`,

src/lib/multi-select/multiSelect.tsx

@@ -32,7 +32,8 @@ module.exports = {
     path: path.resolve(__dirname, 'build'),
     library: "Multi Select Component",
     libraryTarget: 'umd',
-    clean: true
+    clean: true,
+    globalObject: 'this',
   },
   optimization: {
     minimize: true,