@mekari/pixel-autocomplete - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

dist/mekari-pixel-autocomplete.cjs.dev.js

@@ -12,2 +12,3 @@ 'use strict';
 var pixelButton = require('@mekari/pixel-button');
+var pixelFlex = require('@mekari/pixel-flex');
 var pixelUtils = require('@mekari/pixel-utils');
@@ -27,3 +28,18 @@
 }
+/**
+ * groupBy
+ * @param {Array} arr
+ * @param {String} key
+ * @returns {Array}
+ */
 
+function groupBy(arr, key) {
+  const initialValue = {};
+  return arr.reduce((acc, cval) => {
+    const myAttribute = cval[key];
+    acc[myAttribute] = [...(acc[myAttribute] || []), cval];
+    return acc;
+  }, initialValue);
+}
+
 /**
@@ -55,2 +71,4 @@ * Exported autocomplete properties.
  * @prop {boolean} buttonActionText - Text in autocomplete button action.
+ * @prop {boolean} isGroupSuggestions - If true, autocomplete suggestions list will showed up as group.
+ * @prop {boolean} groupKey - Prop to define key. Autocomplete suggestions list will group by defined key.
  */
@@ -127,2 +145,10 @@ const useAutocompleteProps = {
     default: 'Button'
+  },
+  isGroupSuggestions: {
+    type: Boolean,
+    default: false
+  },
+  groupKey: {
+    type: String,
+    default: 'group'
   }
@@ -209,2 +235,26 @@ };
       });
+    },
+
+    getGroupSuggestions() {
+      const mapped = this.getSuggestions.map(item => {
+        const groupKey = item[this.groupKey];
+
+        const isUncategorized = value => {
+          if (pixelUtils.isUndef(value) || value === '') return true;
+          return false;
+        };
+
+        return { ...item,
+          [this.groupKey]: isUncategorized(groupKey) ? 'UNCATEGORIZED' : groupKey
+        };
+      });
+      const grouped = groupBy(mapped, this.groupKey);
+      const keys = Object.keys(grouped);
+      const results = keys.map(item => {
+        return {
+          key: item,
+          values: grouped[item]
+        };
+      });
+      return results;
     }
@@ -257,7 +307,10 @@
       this.isFocused = true;
-      this.handleOpenPopover();
-      this.$emit('focus', e);
 
-      if (this.isInfinityScroll) {
-        this.handleActiveObserver();
+      if (!this.isPopoverOpen) {
+        this.handleOpenPopover();
+        this.$emit('focus', e);
+
+        if (this.isInfinityScroll) {
+          this.handleActiveObserver();
+        }
       }
@@ -348,2 +401,70 @@ },
       this.handleClosePopover();
+    },
+
+    handleForceInputFocus(e) {
+      const inputNode = pixelUtils.getElementById(this.getId);
+      inputNode.focus();
+    },
+
+    renderSuggestions(h) {
+      if (!this.isGroupSuggestions) {
+        return this.getSuggestions.map((item, index) => {
+          return h(pixelPopover.MpPopoverListItem, {
+            props: {
+              isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
+            },
+            attrs: {
+              backgroundColor: this.handleBackgroundSuggestion(item, index)
+            },
+            on: {
+              click: e => {
+                this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
+              }
+            }
+          }, this.$scopedSlots.default ? this.$scopedSlots.default({
+            item
+          }) : item[this.labelProp] || item);
+        });
+      }
+
+      if (this.isGroupSuggestions) {
+        return this.getGroupSuggestions.map((item, index) => {
+          return h(pixelFlex.MpFlex, {
+            key: index,
+            props: {
+              direction: 'column',
+              align: 'start'
+            },
+            attrs: {
+              width: 'full'
+            }
+          }, [h(pixelText.MpText, {
+            props: {
+              fontSize: 'sm'
+            },
+            attrs: {
+              width: 'full',
+              color: 'gray.600',
+              py: '2',
+              px: '3'
+            }
+          }, item.key), item.values.map((item, index) => {
+            return h(pixelPopover.MpPopoverListItem, {
+              props: {
+                isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
+              },
+              attrs: {
+                backgroundColor: this.handleBackgroundSuggestion(item, index)
+              },
+              on: {
+                click: e => {
+                  this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
+                }
+              }
+            }, this.$scopedSlots.default ? this.$scopedSlots.default({
+              item
+            }) : item[this.labelProp] || item);
+          })]);
+        });
+      }
     }
@@ -434,3 +555,3 @@
       nativeOn: {
-        click: this.handleFocus
+        click: this.handleForceInputFocus
       }
@@ -449,2 +570,6 @@ })])])])]), h(pixelPopover.MpPopoverContent, {
         ...this.contentStyle
+      },
+      nativeOn: { ...(this.isPopoverOpen && {
+          click: this.handleForceInputFocus
+        })
       }
@@ -462,19 +587,3 @@ }, [h(pixelPopover.MpPopoverList, {}, [this.getSuggestions.length === 0 ? h(pixelText.MpText, {
       }
-    }, this.emptyText) : this.getSuggestions.map((item, index) => {
-      return h(pixelPopover.MpPopoverListItem, {
-        props: {
-          isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
-        },
-        attrs: {
-          backgroundColor: this.handleBackgroundSuggestion(item, index)
-        },
-        on: {
-          click: e => {
-            this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
-          }
-        }
-      }, this.$scopedSlots.default ? this.$scopedSlots.default({
-        item
-      }) : item[this.labelProp] || item);
-    }), this.isContentLoading && h(pixelPopover.MpPopoverListItem, {
+    }, this.emptyText) : this.renderSuggestions(h), this.isContentLoading && h(pixelPopover.MpPopoverListItem, {
       attrs: {
@@ -481,0 +590,0 @@ _hover: {

dist/mekari-pixel-autocomplete.cjs.prod.js

@@ -12,2 +12,3 @@ 'use strict';
 var pixelButton = require('@mekari/pixel-button');
+var pixelFlex = require('@mekari/pixel-flex');
 var pixelUtils = require('@mekari/pixel-utils');
@@ -27,3 +28,18 @@
 }
+/**
+ * groupBy
+ * @param {Array} arr
+ * @param {String} key
+ * @returns {Array}
+ */
 
+function groupBy(arr, key) {
+  const initialValue = {};
+  return arr.reduce((acc, cval) => {
+    const myAttribute = cval[key];
+    acc[myAttribute] = [...(acc[myAttribute] || []), cval];
+    return acc;
+  }, initialValue);
+}
+
 /**
@@ -55,2 +71,4 @@ * Exported autocomplete properties.
  * @prop {boolean} buttonActionText - Text in autocomplete button action.
+ * @prop {boolean} isGroupSuggestions - If true, autocomplete suggestions list will showed up as group.
+ * @prop {boolean} groupKey - Prop to define key. Autocomplete suggestions list will group by defined key.
  */
@@ -127,2 +145,10 @@ const useAutocompleteProps = {
     default: 'Button'
+  },
+  isGroupSuggestions: {
+    type: Boolean,
+    default: false
+  },
+  groupKey: {
+    type: String,
+    default: 'group'
   }
@@ -209,2 +235,26 @@ };
       });
+    },
+
+    getGroupSuggestions() {
+      const mapped = this.getSuggestions.map(item => {
+        const groupKey = item[this.groupKey];
+
+        const isUncategorized = value => {
+          if (pixelUtils.isUndef(value) || value === '') return true;
+          return false;
+        };
+
+        return { ...item,
+          [this.groupKey]: isUncategorized(groupKey) ? 'UNCATEGORIZED' : groupKey
+        };
+      });
+      const grouped = groupBy(mapped, this.groupKey);
+      const keys = Object.keys(grouped);
+      const results = keys.map(item => {
+        return {
+          key: item,
+          values: grouped[item]
+        };
+      });
+      return results;
     }
@@ -257,7 +307,10 @@
       this.isFocused = true;
-      this.handleOpenPopover();
-      this.$emit('focus', e);
 
-      if (this.isInfinityScroll) {
-        this.handleActiveObserver();
+      if (!this.isPopoverOpen) {
+        this.handleOpenPopover();
+        this.$emit('focus', e);
+
+        if (this.isInfinityScroll) {
+          this.handleActiveObserver();
+        }
       }
@@ -348,2 +401,70 @@ },
       this.handleClosePopover();
+    },
+
+    handleForceInputFocus(e) {
+      const inputNode = pixelUtils.getElementById(this.getId);
+      inputNode.focus();
+    },
+
+    renderSuggestions(h) {
+      if (!this.isGroupSuggestions) {
+        return this.getSuggestions.map((item, index) => {
+          return h(pixelPopover.MpPopoverListItem, {
+            props: {
+              isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
+            },
+            attrs: {
+              backgroundColor: this.handleBackgroundSuggestion(item, index)
+            },
+            on: {
+              click: e => {
+                this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
+              }
+            }
+          }, this.$scopedSlots.default ? this.$scopedSlots.default({
+            item
+          }) : item[this.labelProp] || item);
+        });
+      }
+
+      if (this.isGroupSuggestions) {
+        return this.getGroupSuggestions.map((item, index) => {
+          return h(pixelFlex.MpFlex, {
+            key: index,
+            props: {
+              direction: 'column',
+              align: 'start'
+            },
+            attrs: {
+              width: 'full'
+            }
+          }, [h(pixelText.MpText, {
+            props: {
+              fontSize: 'sm'
+            },
+            attrs: {
+              width: 'full',
+              color: 'gray.600',
+              py: '2',
+              px: '3'
+            }
+          }, item.key), item.values.map((item, index) => {
+            return h(pixelPopover.MpPopoverListItem, {
+              props: {
+                isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
+              },
+              attrs: {
+                backgroundColor: this.handleBackgroundSuggestion(item, index)
+              },
+              on: {
+                click: e => {
+                  this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
+                }
+              }
+            }, this.$scopedSlots.default ? this.$scopedSlots.default({
+              item
+            }) : item[this.labelProp] || item);
+          })]);
+        });
+      }
     }
@@ -434,3 +555,3 @@
       nativeOn: {
-        click: this.handleFocus
+        click: this.handleForceInputFocus
       }
@@ -449,2 +570,6 @@ })])])])]), h(pixelPopover.MpPopoverContent, {
         ...this.contentStyle
+      },
+      nativeOn: { ...(this.isPopoverOpen && {
+          click: this.handleForceInputFocus
+        })
       }
@@ -462,19 +587,3 @@ }, [h(pixelPopover.MpPopoverList, {}, [this.getSuggestions.length === 0 ? h(pixelText.MpText, {
       }
-    }, this.emptyText) : this.getSuggestions.map((item, index) => {
-      return h(pixelPopover.MpPopoverListItem, {
-        props: {
-          isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
-        },
-        attrs: {
-          backgroundColor: this.handleBackgroundSuggestion(item, index)
-        },
-        on: {
-          click: e => {
-            this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
-          }
-        }
-      }, this.$scopedSlots.default ? this.$scopedSlots.default({
-        item
-      }) : item[this.labelProp] || item);
-    }), this.isContentLoading && h(pixelPopover.MpPopoverListItem, {
+    }, this.emptyText) : this.renderSuggestions(h), this.isContentLoading && h(pixelPopover.MpPopoverListItem, {
       attrs: {
@@ -481,0 +590,0 @@ _hover: {

dist/mekari-pixel-autocomplete.esm.js

 import { MpInputGroup, MpInput, MpInputRightAddon } from '@mekari/pixel-input';
-import { MpPopover, MpPopoverTrigger, MpPopoverContent, MpPopoverList, MpPopoverListItem } from '@mekari/pixel-popover';
+import { MpPopoverListItem, MpPopover, MpPopoverTrigger, MpPopoverContent, MpPopoverList } from '@mekari/pixel-popover';
 import { MpBox } from '@mekari/pixel-box';
@@ -8,2 +8,3 @@ import { MpText } from '@mekari/pixel-text';
 import { MpButton } from '@mekari/pixel-button';
+import { MpFlex } from '@mekari/pixel-flex';
 import { createStyledAttrsMixin, isUndef, isNonNullObject, useId, getElementById } from '@mekari/pixel-utils';
@@ -23,3 +24,18 @@
 }
+/**
+ * groupBy
+ * @param {Array} arr
+ * @param {String} key
+ * @returns {Array}
+ */
 
+function groupBy(arr, key) {
+  const initialValue = {};
+  return arr.reduce((acc, cval) => {
+    const myAttribute = cval[key];
+    acc[myAttribute] = [...(acc[myAttribute] || []), cval];
+    return acc;
+  }, initialValue);
+}
+
 /**
@@ -51,2 +67,4 @@ * Exported autocomplete properties.
  * @prop {boolean} buttonActionText - Text in autocomplete button action.
+ * @prop {boolean} isGroupSuggestions - If true, autocomplete suggestions list will showed up as group.
+ * @prop {boolean} groupKey - Prop to define key. Autocomplete suggestions list will group by defined key.
  */
@@ -123,2 +141,10 @@ const useAutocompleteProps = {
     default: 'Button'
+  },
+  isGroupSuggestions: {
+    type: Boolean,
+    default: false
+  },
+  groupKey: {
+    type: String,
+    default: 'group'
   }
@@ -205,2 +231,26 @@ };
       });
+    },
+
+    getGroupSuggestions() {
+      const mapped = this.getSuggestions.map(item => {
+        const groupKey = item[this.groupKey];
+
+        const isUncategorized = value => {
+          if (isUndef(value) || value === '') return true;
+          return false;
+        };
+
+        return { ...item,
+          [this.groupKey]: isUncategorized(groupKey) ? 'UNCATEGORIZED' : groupKey
+        };
+      });
+      const grouped = groupBy(mapped, this.groupKey);
+      const keys = Object.keys(grouped);
+      const results = keys.map(item => {
+        return {
+          key: item,
+          values: grouped[item]
+        };
+      });
+      return results;
     }
@@ -253,7 +303,10 @@
       this.isFocused = true;
-      this.handleOpenPopover();
-      this.$emit('focus', e);
 
-      if (this.isInfinityScroll) {
-        this.handleActiveObserver();
+      if (!this.isPopoverOpen) {
+        this.handleOpenPopover();
+        this.$emit('focus', e);
+
+        if (this.isInfinityScroll) {
+          this.handleActiveObserver();
+        }
       }
@@ -344,2 +397,70 @@ },
       this.handleClosePopover();
+    },
+
+    handleForceInputFocus(e) {
+      const inputNode = getElementById(this.getId);
+      inputNode.focus();
+    },
+
+    renderSuggestions(h) {
+      if (!this.isGroupSuggestions) {
+        return this.getSuggestions.map((item, index) => {
+          return h(MpPopoverListItem, {
+            props: {
+              isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
+            },
+            attrs: {
+              backgroundColor: this.handleBackgroundSuggestion(item, index)
+            },
+            on: {
+              click: e => {
+                this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
+              }
+            }
+          }, this.$scopedSlots.default ? this.$scopedSlots.default({
+            item
+          }) : item[this.labelProp] || item);
+        });
+      }
+
+      if (this.isGroupSuggestions) {
+        return this.getGroupSuggestions.map((item, index) => {
+          return h(MpFlex, {
+            key: index,
+            props: {
+              direction: 'column',
+              align: 'start'
+            },
+            attrs: {
+              width: 'full'
+            }
+          }, [h(MpText, {
+            props: {
+              fontSize: 'sm'
+            },
+            attrs: {
+              width: 'full',
+              color: 'gray.600',
+              py: '2',
+              px: '3'
+            }
+          }, item.key), item.values.map((item, index) => {
+            return h(MpPopoverListItem, {
+              props: {
+                isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
+              },
+              attrs: {
+                backgroundColor: this.handleBackgroundSuggestion(item, index)
+              },
+              on: {
+                click: e => {
+                  this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
+                }
+              }
+            }, this.$scopedSlots.default ? this.$scopedSlots.default({
+              item
+            }) : item[this.labelProp] || item);
+          })]);
+        });
+      }
     }
@@ -430,3 +551,3 @@
       nativeOn: {
-        click: this.handleFocus
+        click: this.handleForceInputFocus
       }
@@ -445,2 +566,6 @@ })])])])]), h(MpPopoverContent, {
         ...this.contentStyle
+      },
+      nativeOn: { ...(this.isPopoverOpen && {
+          click: this.handleForceInputFocus
+        })
       }
@@ -458,19 +583,3 @@ }, [h(MpPopoverList, {}, [this.getSuggestions.length === 0 ? h(MpText, {
       }
-    }, this.emptyText) : this.getSuggestions.map((item, index) => {
-      return h(MpPopoverListItem, {
-        props: {
-          isActive: (item.value || item.value === '' ? item.value : item) === this.currentValue
-        },
-        attrs: {
-          backgroundColor: this.handleBackgroundSuggestion(item, index)
-        },
-        on: {
-          click: e => {
-            this.handleSelect(item.value || item.value === '' ? item.value : item, item, e);
-          }
-        }
-      }, this.$scopedSlots.default ? this.$scopedSlots.default({
-        item
-      }) : item[this.labelProp] || item);
-    }), this.isContentLoading && h(MpPopoverListItem, {
+    }, this.emptyText) : this.renderSuggestions(h), this.isContentLoading && h(MpPopoverListItem, {
       attrs: {
@@ -477,0 +586,0 @@ _hover: {

package.json

 {
   "name": "@mekari/pixel-autocomplete",
   "description": "Mekari Pixel | Selecting items in a list from a text input component",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "homepage": "https://mekari.design/",
@@ -35,3 +35,4 @@ "repository": {
     "@mekari/pixel-utils": "^0.2.0",
-    "@mekari/pixel-button": "^0.1.9"
+    "@mekari/pixel-button": "^0.1.9",
+    "@mekari/pixel-flex": "^0.0.8"
   },
@@ -38,0 +39,0 @@ "devDependencies": {

src/autocomplete.js

@@ -14,2 +14,3 @@ import { MpInput, MpInputGroup, MpInputRightAddon } from '@mekari/pixel-input'
 import { MpButton } from '@mekari/pixel-button'
+import { MpFlex } from '@mekari/pixel-flex'
 import {
@@ -22,3 +23,3 @@ createStyledAttrsMixin,
 } from '@mekari/pixel-utils'
-import { isObject } from './utils/autocomplete.utils'
+import { isObject, groupBy } from './utils/autocomplete.utils'
 import { useAutocompleteProps } from './utils/autocomplete.props'
@@ -104,2 +105,27 @@
       })
+    },
+    getGroupSuggestions() {
+      const mapped = this.getSuggestions.map((item) => {
+        const groupKey = item[this.groupKey]
+        const isUncategorized = (value) => {
+          if (isUndef(value) || value === '') return true
+          return false
+        }
+
+        return {
+          ...item,
+          [this.groupKey]: isUncategorized(groupKey) ? 'UNCATEGORIZED' : groupKey
+        }
+      })
+
+      const grouped = groupBy(mapped, this.groupKey)
+      const keys = Object.keys(grouped)
+      const results = keys.map((item) => {
+        return {
+          key: item,
+          values: grouped[item]
+        }
+      })
+
+      return results
     }
@@ -146,7 +172,10 @@ },
       this.isFocused = true
-      this.handleOpenPopover()
-      this.$emit('focus', e)
 
-      if (this.isInfinityScroll) {
-        this.handleActiveObserver()
+      if (!this.isPopoverOpen) {
+        this.handleOpenPopover()
+        this.$emit('focus', e)
+
+        if (this.isInfinityScroll) {
+          this.handleActiveObserver()
+        }
       }
@@ -226,2 +255,93 @@ },
       this.handleClosePopover()
+    },
+    handleForceInputFocus(e) {
+      const inputNode = getElementById(this.getId)
+      inputNode.focus()
+    },
+    renderSuggestions(h) {
+      if (!this.isGroupSuggestions) {
+        return this.getSuggestions.map((item, index) => {
+          return h(
+            MpPopoverListItem,
+            {
+              props: {
+                isActive:
+                  (item.value || item.value === '' ? item.value : item) === this.currentValue
+              },
+              attrs: {
+                backgroundColor: this.handleBackgroundSuggestion(item, index)
+              },
+              on: {
+                click: (e) => {
+                  this.handleSelect(item.value || item.value === '' ? item.value : item, item, e)
+                }
+              }
+            },
+            this.$scopedSlots.default
+              ? this.$scopedSlots.default({ item })
+              : item[this.labelProp] || item
+          )
+        })
+      }
+
+      if (this.isGroupSuggestions) {
+        return this.getGroupSuggestions.map((item, index) => {
+          return h(
+            MpFlex,
+            {
+              key: index,
+              props: {
+                direction: 'column',
+                align: 'start'
+              },
+              attrs: {
+                width: 'full'
+              }
+            },
+            [
+              h(
+                MpText,
+                {
+                  props: {
+                    fontSize: 'sm'
+                  },
+                  attrs: {
+                    width: 'full',
+                    color: 'gray.600',
+                    py: '2',
+                    px: '3'
+                  }
+                },
+                item.key
+              ),
+              item.values.map((item, index) => {
+                return h(
+                  MpPopoverListItem,
+                  {
+                    props: {
+                      isActive:
+                        (item.value || item.value === '' ? item.value : item) === this.currentValue
+                    },
+                    attrs: {
+                      backgroundColor: this.handleBackgroundSuggestion(item, index)
+                    },
+                    on: {
+                      click: (e) => {
+                        this.handleSelect(
+                          item.value || item.value === '' ? item.value : item,
+                          item,
+                          e
+                        )
+                      }
+                    }
+                  },
+                  this.$scopedSlots.default
+                    ? this.$scopedSlots.default({ item })
+                    : item[this.labelProp] || item
+                )
+              })
+            ]
+          )
+        })
+      }
     }
@@ -331,3 +451,3 @@ },
                               nativeOn: {
-                                click: this.handleFocus
+                                click: this.handleForceInputFocus
                               }
@@ -355,2 +475,5 @@ })
                   ...this.contentStyle
+                },
+                nativeOn: {
+                  ...(this.isPopoverOpen && { click: this.handleForceInputFocus })
                 }
@@ -377,29 +500,3 @@ },
                       )
-                    : this.getSuggestions.map((item, index) => {
-                        return h(
-                          MpPopoverListItem,
-                          {
-                            props: {
-                              isActive:
-                                (item.value || item.value === '' ? item.value : item) ===
-                                this.currentValue
-                            },
-                            attrs: {
-                              backgroundColor: this.handleBackgroundSuggestion(item, index)
-                            },
-                            on: {
-                              click: (e) => {
-                                this.handleSelect(
-                                  item.value || item.value === '' ? item.value : item,
-                                  item,
-                                  e
-                                )
-                              }
-                            }
-                          },
-                          this.$scopedSlots.default
-                            ? this.$scopedSlots.default({ item })
-                            : item[this.labelProp] || item
-                        )
-                      }),
+                    : this.renderSuggestions(h),
                   this.isContentLoading &&
@@ -441,2 +538,3 @@ h(
                 ]),
+
                 this.isInfinityScroll &&
@@ -443,0 +541,0 @@ h(MpBox, { attrs: { position: 'relative' } }, [

src/utils/autocomplete.props.js

@@ -27,2 +27,4 @@ /**
  * @prop {boolean} buttonActionText - Text in autocomplete button action.
+ * @prop {boolean} isGroupSuggestions - If true, autocomplete suggestions list will showed up as group.
+ * @prop {boolean} groupKey - Prop to define key. Autocomplete suggestions list will group by defined key.
  */
@@ -55,3 +57,5 @@
   isShowButtonAction: { type: Boolean, default: false },
-  buttonActionText: { type: String, default: 'Button' }
+  buttonActionText: { type: String, default: 'Button' },
+  isGroupSuggestions: { type: Boolean, default: false },
+  groupKey: { type: String, default: 'group' }
 }

src/utils/autocomplete.utils.js

@@ -13,1 +13,16 @@ /**
 }
+
+/**
+ * groupBy
+ * @param {Array} arr
+ * @param {String} key
+ * @returns {Array}
+ */
+export function groupBy(arr, key) {
+  const initialValue = {}
+  return arr.reduce((acc, cval) => {
+    const myAttribute = cval[key]
+    acc[myAttribute] = [...(acc[myAttribute] || []), cval]
+    return acc
+  }, initialValue)
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76714

increased by19.49%

Lines of code

2421

increased by20.57%

Worsened metrics

Dependency count

12

increased by9.09%

Dependency changes

• + Added@mekari/pixel-flex@^0.0.8