@learnforjob/react-multi-select-dropdown 1.0.0

package/README.md

@@ -0,0 +1,111 @@
+# React Multi Select Dropdown
+
+A customizable, searchable, lightweight React multi-select dropdown with async loading, checkbox support, keyboard navigation, and virtualization.
+
+## Installation
+
+```bash
+npm install react-multi-select-dropdown
+```
+
+## Usage
+
+```jsx
+import React, { useState } from 'react';
+import MultiSelectDropdown from 'react-multi-select-dropdown';
+
+const options = [
+  { label: 'React', value: 'react' },
+  { label: 'Vue', value: 'vue' },
+  { label: 'Angular', value: 'angular' },
+];
+
+function App() {
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <MultiSelectDropdown
+      options={options}
+      value={selected}
+      onChange={setSelected}
+      placeholder="Select frameworks"
+    />
+  );
+}
+
+export default App;
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| options | `Option[]` | `[]` | Array of options to display |
+| value | `(string \| number)[]` | `[]` | Currently selected values |
+| onChange | `(values: (string \| number)[]) => void` | `undefined` | Callback when selection changes |
+| placeholder | `string` | `'Select options'` | Placeholder text when nothing is selected |
+| disabled | `boolean` | `false` | Disable the dropdown |
+| selectAllText | `string` | `'Select All'` | Text for select all checkbox |
+| searchable | `boolean` | `true` | Enable search functionality |
+| groupBy | `string` | `undefined` | Property to group options by |
+| maxSelectionLimit | `number` | `undefined` | Maximum number of options that can be selected |
+| renderOption | `(option: Option) => React.ReactNode` | `undefined` | Custom renderer for options |
+| renderTag | `(option: Option) => React.ReactNode` | `undefined` | Custom renderer for selected tags |
+| customClassName | `string` | `undefined` | Additional CSS class for the container |
+
+## TypeScript Support
+
+This package is written in TypeScript and includes type definitions.
+
+## Customization
+
+You can customize the rendering of options and selected tags:
+
+```jsx
+<MultiSelectDropdown
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  renderOption={(option) => (
+    <div>
+      <strong>{option.label}</strong>
+    </div>
+  )}
+  renderTag={(option) => (
+    <span style={{ backgroundColor: 'lightblue' }}>
+      {option.label}
+    </span>
+  )}
+/>
+```
+
+## Grouped Options
+
+To group options, use the `groupBy` prop:
+
+```jsx
+const groupedOptions = [
+  { label: 'React', value: 'react', category: 'Framework' },
+  { label: 'Vue', value: 'vue', category: 'Framework' },
+  { label: 'HTML', value: 'html', category: 'Language' },
+  { label: 'CSS', value: 'css', category: 'Language' },
+];
+
+<MultiSelectDropdown
+  options={groupedOptions}
+  value={selected}
+  onChange={setSelected}
+  groupBy="category"
+/>
+```
+
+## Accessibility
+
+The component follows accessibility best practices:
+- Keyboard navigation (Arrow keys, Enter, Escape)
+- ARIA labels
+- Screen reader support
+
+## License
+
+MIT

package/dist/components/MultiSelectDropdown.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import "../styles/multiSelectDropdown.scss";
+export interface Option {
+    label: string;
+    value: string | number;
+}
+export interface Theme {
+    primaryColor?: string;
+    primaryHover?: string;
+    bgColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    placeholderColor?: string;
+    itemHoverBg?: string;
+    selectedBg?: string;
+    selectedColor?: string;
+    disabledBg?: string;
+    disabledColor?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    headerHeight?: string;
+}
+export interface MultiSelectDropdownProps {
+    options: Option[];
+    value: (string | number)[];
+    onChange: (values: (string | number)[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    selectAllText?: string;
+    searchable?: boolean;
+    groupBy?: string;
+    maxSelectionLimit?: number;
+    renderOption?: (option: Option) => React.ReactNode;
+    renderTag?: (option: Option) => React.ReactNode;
+    customClassName?: string;
+    theme?: Theme;
+}
+declare const MultiSelectDropdown: ({ options, value, onChange, placeholder, disabled, selectAllText, searchable, groupBy, maxSelectionLimit, renderOption, renderTag: _renderTag, customClassName, theme, }: MultiSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectDropdown;
+//# sourceMappingURL=MultiSelectDropdown.d.ts.map

package/dist/components/MultiSelectDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectDropdown.d.ts","sourceRoot":"","sources":["../../src/components/MultiSelectDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,oCAAoC,CAAC;AAE5C,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,QAAA,MAAM,mBAAmB,GAAI,0KAc1B,wBAAwB,4CAmP1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as MultiSelectDropdown } from './components/MultiSelectDropdown';
+export type { MultiSelectDropdownProps, Theme } from './components/MultiSelectDropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,YAAY,EAAE,wBAAwB,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC"}

package/dist/index.es.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as n,Fragment as o}from"react/jsx-runtime";import{useState as r,useRef as t,useMemo as l,useEffect as i}from"react";!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===o&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}(".multi-select {\n  --ms-primary-color: #339ef7;\n  --ms-primary-hover: #1a8ceb;\n  --ms-bg-color: #ffffff;\n  --ms-border-color: #cccccc;\n  --ms-text-color: #333333;\n  --ms-placeholder-color: #495057;\n  --ms-item-hover-bg: #ebf5ff;\n  --ms-selected-bg: #339ef7;\n  --ms-selected-color: #ffffff;\n  --ms-disabled-bg: #e9ecef;\n  --ms-disabled-color: #b3b3b3;\n  --ms-border-radius: 4px;\n  --ms-font-size: 1rem;\n  --ms-header-height: 36px;\n  width: 100%;\n  position: relative;\n}\n.multi-select .dropdown-header {\n  box-sizing: border-box;\n  background-color: var(--ms-bg-color);\n  border: 1px solid var(--ms-border-color);\n  border-radius: var(--ms-border-radius);\n  color: var(--ms-text-color);\n  cursor: default;\n  display: table;\n  border-spacing: 0px;\n  border-collapse: separate;\n  height: var(--ms-header-height);\n  outline: none;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n}\n.multi-select .dropdown-header .dropdownText {\n  box-sizing: border-box;\n  inset: 0px;\n  color: var(--ms-placeholder-color);\n  font-size: var(--ms-font-size);\n  line-height: calc(var(--ms-header-height) - 2px);\n  padding-left: 10px;\n  padding-right: 10px;\n  position: absolute;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.multi-select .dropdown-header .arrowDown {\n  box-sizing: border-box;\n  border-color: rgb(153, 153, 153) transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 2.5px;\n  display: inline-block;\n  height: 0px;\n  width: 0px;\n  top: 14px;\n  position: absolute;\n  right: 8px;\n}\n.multi-select .dropdown-header .arrowUp {\n  box-sizing: border-box;\n  border-color: transparent transparent rgb(153, 153, 153);\n  border-style: solid;\n  border-width: 0px 5px 5px;\n  display: inline-block;\n  height: 0px;\n  width: 0px;\n  top: 14px;\n  position: absolute;\n  right: 8px;\n}\n.multi-select .dropdown-list {\n  position: absolute;\n  width: 100%;\n  border: 1px solid var(--ms-border-color);\n  border-top: none;\n  background: var(--ms-bg-color);\n  max-height: 300px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n.multi-select .search-input {\n  display: block;\n  border-radius: 3px;\n  box-sizing: border-box;\n  height: 30px;\n  line-height: 24px;\n  border: 1px solid rgb(222, 226, 228);\n  padding: 10px;\n  width: stretch;\n  outline: none;\n  margin: 7px;\n}\n.multi-select .dropdown-item {\n  padding: 10px 14px;\n  cursor: pointer;\n  color: rgb(102, 102, 102) !important;\n  display: flex;\n  font-size: 14px;\n  margin: 0;\n  align-items: flex-start;\n  gap: 8px;\n}\n.multi-select .dropdown-item span {\n  flex: 1;\n  min-width: 0;\n  word-break: break-all;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n.multi-select .dropdown-item input {\n  flex-shrink: 0;\n}\n.multi-select .dropdown-item:hover {\n  background-color: var(--ms-item-hover-bg);\n}\n.multi-select .select-all {\n  box-sizing: border-box;\n  background-color: var(--ms-item-hover-bg);\n  color: rgb(102, 102, 102);\n  cursor: pointer;\n  padding: 10px 14px;\n  outline: 0px;\n  margin-bottom: 6px;\n}\n.multi-select .dropdown-item.active {\n  color: var(--ms-selected-color) !important;\n  text-decoration: none;\n  background-color: var(--ms-primary-color);\n}\n.multi-select .dropdown-item.active:hover {\n  color: var(--ms-selected-color);\n}\n.multi-select .no-data {\n  padding: 8px;\n  text-align: center;\n  color: #888;\n}\n.multi-select .multi-select.disabled .dropdown-header {\n  background: var(--ms-disabled-bg);\n  cursor: default;\n  color: var(--ms-disabled-color);\n}",{insertAt:"top"});const s=({options:s=[],value:a=[],onChange:d,placeholder:c="Select options",disabled:p=!1,selectAllText:m="Select All",searchable:h=!0,groupBy:u,maxSelectionLimit:b,renderOption:g,renderTag:x,customClassName:v,theme:f})=>{const[w,y]=r(!1),[C,k]=r(""),N=t(null),z=l(()=>{if(!u)return s;const e=[],n=new Map;return s.forEach(e=>{const o=String(e[u]||"Other");n.has(o)||n.set(o,[]),n.get(o).push(e)}),n.forEach((n,o)=>{e.push({label:o,options:n})}),e},[s,u]),S=l(()=>{if(!h||!C)return u?z:s;const e=s.filter(e=>String(e?.label||"").toLowerCase().includes(C.toLowerCase()));return u?z.map(n=>({...n,options:n.options.filter(n=>e.some(e=>e.value===n.value))})).filter(e=>e.options.length>0):e},[s,C,h,u,z]),T=e=>{if(!a.includes(e)&&b&&a.length>=b)return;let n=[];n=a.includes(e)?a.filter(n=>n!==e):[...a,e],d&&d(n)},B=s.length>0&&s.every(e=>a.includes(e.value)),E=s.filter(e=>a.includes(e.value)).map(e=>e.label);return i(()=>{const e=e=>{N.current&&!N.current.contains(e.target)&&y(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),i(()=>{w||k("")},[w]),e("div",{className:`multi-select ${p?"disabled":""} ${v||""}`,ref:N,style:{"--ms-primary-color":f?.primaryColor,"--ms-primary-hover":f?.primaryHover,"--ms-bg-color":f?.bgColor,"--ms-border-color":f?.borderColor,"--ms-text-color":f?.textColor,"--ms-placeholder-color":f?.placeholderColor,"--ms-item-hover-bg":f?.itemHoverBg,"--ms-selected-bg":f?.selectedBg,"--ms-selected-color":f?.selectedColor,"--ms-disabled-bg":f?.disabledBg,"--ms-disabled-color":f?.disabledColor,"--ms-border-radius":f?.borderRadius,"--ms-font-size":f?.fontSize,"--ms-header-height":f?.headerHeight},children:[e("div",{className:"dropdown-header",onClick:()=>{p||y(e=>!e)},children:[n("span",{className:"dropdownText",children:0===a.length?c:B?m:E.join(", ")}),n("span",{className:""+(w?"arrowUp":"arrowDown")})]}),w&&!p&&e("div",{className:"dropdown-list",children:[h&&n("input",{type:"text",className:"search-input",placeholder:"Search...",value:C,onChange:e=>k(e.target.value)}),s.length>0&&e("label",{className:"dropdown-item select-all",children:[e("span",{children:[m," "]}),n("input",{type:"checkbox",checked:B,onChange:()=>{const e=s.map(e=>e.value);let n=[];n=e.every(e=>a.includes(e))?[]:e,d&&d(n)}})]}),u?S.map((r,t)=>e("div",{className:"option-group",children:[n("div",{className:"group-label",children:r.label}),r.options.length>0?r.options.map((r,l)=>n("label",{className:"dropdown-item "+(a.includes(r.value)?"active":""),children:g?g(r):e(o,{children:[n("span",{children:r.label}),n("input",{type:"checkbox",checked:a.includes(r.value),onChange:()=>T(r.value)})]})},`${t}-${l}`)):n("div",{className:"no-data",children:"No results found"})]},`group-${t}`)):S.length>0?S.map(r=>n("label",{className:"dropdown-item "+(a.includes(r.value)?"active":""),children:g?g(r):e(o,{children:[n("span",{children:r.label}),n("input",{type:"checkbox",checked:a.includes(r.value),onChange:()=>T(r.value)})]})},r.value)):n("div",{className:"no-data",children:"No results found"})]})]})};export{s as MultiSelectDropdown};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/MultiSelectDropdown.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","MultiSelectDropdown","options","value","onChange","placeholder","disabled","selectAllText","searchable","groupBy","maxSelectionLimit","renderOption","renderTag","_renderTag","customClassName","theme","isOpen","setIsOpen","useState","searchTerm","setSearchTerm","dropdownRef","useRef","processedOptions","useMemo","groups","groupMap","Map","forEach","option","groupKey","String","has","set","get","push","opts","label","filteredOptions","searchableOptions","filter","toLowerCase","includes","map","group","some","opt","length","handleCheckboxChange","val","updated","v","isAllSelected","every","selectedLabels","useEffect","handleClickOutside","event","current","contains","target","addEventListener","removeEventListener","_jsxs","className","primaryColor","primaryHover","bgColor","borderColor","textColor","placeholderColor","itemHoverBg","selectedBg","selectedColor","disabledBg","disabledColor","borderRadius","fontSize","headerHeight","children","onClick","prev","_jsx","join","e","checked","allValues","groupIndex","optionIndex","_Fragment"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),n=require("react");!function(e,n){void 0===n&&(n={});var o=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===o&&r.firstChild?r.insertBefore(t,r.firstChild):r.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}(".multi-select {\n  --ms-primary-color: #339ef7;\n  --ms-primary-hover: #1a8ceb;\n  --ms-bg-color: #ffffff;\n  --ms-border-color: #cccccc;\n  --ms-text-color: #333333;\n  --ms-placeholder-color: #495057;\n  --ms-item-hover-bg: #ebf5ff;\n  --ms-selected-bg: #339ef7;\n  --ms-selected-color: #ffffff;\n  --ms-disabled-bg: #e9ecef;\n  --ms-disabled-color: #b3b3b3;\n  --ms-border-radius: 4px;\n  --ms-font-size: 1rem;\n  --ms-header-height: 36px;\n  width: 100%;\n  position: relative;\n}\n.multi-select .dropdown-header {\n  box-sizing: border-box;\n  background-color: var(--ms-bg-color);\n  border: 1px solid var(--ms-border-color);\n  border-radius: var(--ms-border-radius);\n  color: var(--ms-text-color);\n  cursor: default;\n  display: table;\n  border-spacing: 0px;\n  border-collapse: separate;\n  height: var(--ms-header-height);\n  outline: none;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n}\n.multi-select .dropdown-header .dropdownText {\n  box-sizing: border-box;\n  inset: 0px;\n  color: var(--ms-placeholder-color);\n  font-size: var(--ms-font-size);\n  line-height: calc(var(--ms-header-height) - 2px);\n  padding-left: 10px;\n  padding-right: 10px;\n  position: absolute;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.multi-select .dropdown-header .arrowDown {\n  box-sizing: border-box;\n  border-color: rgb(153, 153, 153) transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 2.5px;\n  display: inline-block;\n  height: 0px;\n  width: 0px;\n  top: 14px;\n  position: absolute;\n  right: 8px;\n}\n.multi-select .dropdown-header .arrowUp {\n  box-sizing: border-box;\n  border-color: transparent transparent rgb(153, 153, 153);\n  border-style: solid;\n  border-width: 0px 5px 5px;\n  display: inline-block;\n  height: 0px;\n  width: 0px;\n  top: 14px;\n  position: absolute;\n  right: 8px;\n}\n.multi-select .dropdown-list {\n  position: absolute;\n  width: 100%;\n  border: 1px solid var(--ms-border-color);\n  border-top: none;\n  background: var(--ms-bg-color);\n  max-height: 300px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n.multi-select .search-input {\n  display: block;\n  border-radius: 3px;\n  box-sizing: border-box;\n  height: 30px;\n  line-height: 24px;\n  border: 1px solid rgb(222, 226, 228);\n  padding: 10px;\n  width: stretch;\n  outline: none;\n  margin: 7px;\n}\n.multi-select .dropdown-item {\n  padding: 10px 14px;\n  cursor: pointer;\n  color: rgb(102, 102, 102) !important;\n  display: flex;\n  font-size: 14px;\n  margin: 0;\n  align-items: flex-start;\n  gap: 8px;\n}\n.multi-select .dropdown-item span {\n  flex: 1;\n  min-width: 0;\n  word-break: break-all;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n.multi-select .dropdown-item input {\n  flex-shrink: 0;\n}\n.multi-select .dropdown-item:hover {\n  background-color: var(--ms-item-hover-bg);\n}\n.multi-select .select-all {\n  box-sizing: border-box;\n  background-color: var(--ms-item-hover-bg);\n  color: rgb(102, 102, 102);\n  cursor: pointer;\n  padding: 10px 14px;\n  outline: 0px;\n  margin-bottom: 6px;\n}\n.multi-select .dropdown-item.active {\n  color: var(--ms-selected-color) !important;\n  text-decoration: none;\n  background-color: var(--ms-primary-color);\n}\n.multi-select .dropdown-item.active:hover {\n  color: var(--ms-selected-color);\n}\n.multi-select .no-data {\n  padding: 8px;\n  text-align: center;\n  color: #888;\n}\n.multi-select .multi-select.disabled .dropdown-header {\n  background: var(--ms-disabled-bg);\n  cursor: default;\n  color: var(--ms-disabled-color);\n}",{insertAt:"top"});exports.MultiSelectDropdown=({options:o=[],value:r=[],onChange:t,placeholder:l="Select options",disabled:s=!1,selectAllText:i="Select All",searchable:a=!0,groupBy:d,maxSelectionLimit:c,renderOption:p,renderTag:m,customClassName:h,theme:u})=>{const[b,x]=n.useState(!1),[g,v]=n.useState(""),f=n.useRef(null),w=n.useMemo(()=>{if(!d)return o;const e=[],n=new Map;return o.forEach(e=>{const o=String(e[d]||"Other");n.has(o)||n.set(o,[]),n.get(o).push(e)}),n.forEach((n,o)=>{e.push({label:o,options:n})}),e},[o,d]),y=n.useMemo(()=>{if(!a||!g)return d?w:o;const e=o.filter(e=>String(e?.label||"").toLowerCase().includes(g.toLowerCase()));return d?w.map(n=>({...n,options:n.options.filter(n=>e.some(e=>e.value===n.value))})).filter(e=>e.options.length>0):e},[o,g,a,d,w]),j=e=>{if(!r.includes(e)&&c&&r.length>=c)return;let n=[];n=r.includes(e)?r.filter(n=>n!==e):[...r,e],t&&t(n)},C=o.length>0&&o.every(e=>r.includes(e.value)),k=o.filter(e=>r.includes(e.value)).map(e=>e.label);return n.useEffect(()=>{const e=e=>{f.current&&!f.current.contains(e.target)&&x(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),n.useEffect(()=>{b||v("")},[b]),e.jsxs("div",{className:`multi-select ${s?"disabled":""} ${h||""}`,ref:f,style:{"--ms-primary-color":u?.primaryColor,"--ms-primary-hover":u?.primaryHover,"--ms-bg-color":u?.bgColor,"--ms-border-color":u?.borderColor,"--ms-text-color":u?.textColor,"--ms-placeholder-color":u?.placeholderColor,"--ms-item-hover-bg":u?.itemHoverBg,"--ms-selected-bg":u?.selectedBg,"--ms-selected-color":u?.selectedColor,"--ms-disabled-bg":u?.disabledBg,"--ms-disabled-color":u?.disabledColor,"--ms-border-radius":u?.borderRadius,"--ms-font-size":u?.fontSize,"--ms-header-height":u?.headerHeight},children:[e.jsxs("div",{className:"dropdown-header",onClick:()=>{s||x(e=>!e)},children:[e.jsx("span",{className:"dropdownText",children:0===r.length?l:C?i:k.join(", ")}),e.jsx("span",{className:""+(b?"arrowUp":"arrowDown")})]}),b&&!s&&e.jsxs("div",{className:"dropdown-list",children:[a&&e.jsx("input",{type:"text",className:"search-input",placeholder:"Search...",value:g,onChange:e=>v(e.target.value)}),o.length>0&&e.jsxs("label",{className:"dropdown-item select-all",children:[e.jsxs("span",{children:[i," "]}),e.jsx("input",{type:"checkbox",checked:C,onChange:()=>{const e=o.map(e=>e.value);let n=[];n=e.every(e=>r.includes(e))?[]:e,t&&t(n)}})]}),d?y.map((n,o)=>e.jsxs("div",{className:"option-group",children:[e.jsx("div",{className:"group-label",children:n.label}),n.options.length>0?n.options.map((n,t)=>e.jsx("label",{className:"dropdown-item "+(r.includes(n.value)?"active":""),children:p?p(n):e.jsxs(e.Fragment,{children:[e.jsx("span",{children:n.label}),e.jsx("input",{type:"checkbox",checked:r.includes(n.value),onChange:()=>j(n.value)})]})},`${o}-${t}`)):e.jsx("div",{className:"no-data",children:"No results found"})]},`group-${o}`)):y.length>0?y.map(n=>e.jsx("label",{className:"dropdown-item "+(r.includes(n.value)?"active":""),children:p?p(n):e.jsxs(e.Fragment,{children:[e.jsx("span",{children:n.label}),e.jsx("input",{type:"checkbox",checked:r.includes(n.value),onChange:()=>j(n.value)})]})},n.value)):e.jsx("div",{className:"no-data",children:"No results found"})]})]})};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/MultiSelectDropdown.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n",null],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","options","value","onChange","placeholder","disabled","selectAllText","searchable","groupBy","maxSelectionLimit","renderOption","renderTag","_renderTag","customClassName","theme","isOpen","setIsOpen","useState","searchTerm","setSearchTerm","dropdownRef","useRef","processedOptions","useMemo","groups","groupMap","Map","forEach","option","groupKey","String","has","set","get","push","opts","label","filteredOptions","searchableOptions","filter","toLowerCase","includes","map","group","some","opt","length","handleCheckboxChange","val","updated","v","isAllSelected","every","selectedLabels","useEffect","handleClickOutside","event","current","contains","target","addEventListener","removeEventListener","_jsxs","className","primaryColor","primaryHover","bgColor","borderColor","textColor","placeholderColor","itemHoverBg","selectedBg","selectedColor","disabledBg","disabledColor","borderRadius","fontSize","headerHeight","children","onClick","prev","_jsx","jsx","join","jsxs","e","checked","allValues","groupIndex","optionIndex","_Fragment","Fragment"],"mappings":"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","x_google_ignoreList":[0]}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@learnforjob/react-multi-select-dropdown",
+  "version": "1.0.0",
+  "description": "A customizable, searchable, lightweight React multi-select dropdown with async loading, checkbox support, keyboard navigation, virtualization, and TypeScript support.",
+  "author": "LearnForJob",
+  "license": "MIT",
+  "homepage": "https://learnforjob.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/learnforjob/react-multi-select-dropdown.git"
+  },
+  "bugs": {
+    "url": "https://github.com/learnforjob/react-multi-select-dropdown/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "build": "rollup -c rollup.config.cjs",
+    "dev": "rollup -c rollup.config.cjs -w",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "multi-select",
+    "multiselect",
+    "dropdown",
+    "react-dropdown",
+    "checkbox",
+    "searchable-dropdown",
+    "async-select",
+    "virtualized-list",
+    "typescript",
+    "ui-component",
+    "frontend",
+    "learnforjob"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "postcss": "^8.5.14",
+    "rollup": "^3.20.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.99.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.0.0"
+  }
+}