react-lookup-select 1.0.2 → 1.0.4

package/dist/styles.css

@@ -131,20 +131,7 @@
   box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2), var(--lookup-select-shadow);
 }
 
-.lookup-select__trigger--open {
-  border-color: var(--lookup-select-color-border-focus);
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2), var(--lookup-select-shadow);
-}
 
-.lookup-select__trigger--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  background: var(--lookup-select-color-bg-secondary);
-}
-
-.lookup-select__trigger--error {
-  border-color: var(--lookup-select-color-error);
-}
 
 .lookup-select__trigger-content {
   flex: 1;
@@ -194,55 +181,74 @@
   transition: transform var(--lookup-select-transition-duration) var(--lookup-select-transition-timing);
 }
 
-.lookup-select__trigger--open .lookup-select__trigger-icon {
-  transform: rotate(180deg);
+
+
+/* Trigger content styles */
+.lookup-select__placeholder {
+  color: var(--lookup-select-color-text-muted);
+  font-style: italic;
 }
 
-/* Selected items styling */
-.lookup-select__selected-items {
+.lookup-select__selected-text {
+  color: var(--lookup-select-color-text);
+  font-weight: var(--lookup-select-font-weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+
+
+/* === TAGS (Multi-select trigger) === */
+.lookup-select__tags {
   display: flex;
-  align-items: center;
-  gap: var(--lookup-select-spacing-sm);
   flex-wrap: wrap;
-  min-width: 0;
+  gap: var(--lookup-select-spacing-sm);
+  align-items: center;
 }
 
-.lookup-select__selected-item {
+.lookup-select__tag {
   display: inline-flex;
   align-items: center;
-  background: var(--lookup-select-color-primary);
-  color: white;
-  padding: 2px var(--lookup-select-spacing-sm);
-  border-radius: var(--lookup-select-border-radius-sm);
+  gap: var(--lookup-select-spacing-sm);
+  background: var(--lookup-select-color-bg-secondary);
+  color: var(--lookup-select-color-text);
+  padding: 4px 8px;
+  border-radius: var(--lookup-select-border-radius);
   font-size: var(--lookup-select-font-size-sm);
   font-weight: var(--lookup-select-font-weight-medium);
+  border: 1px solid var(--lookup-select-color-border);
   max-width: 120px;
 }
 
-.lookup-select__selected-item-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.lookup-select__selected-item--more {
-  background: var(--lookup-select-color-text-secondary);
+.lookup-select__tag--more {
+  background: var(--lookup-select-color-primary);
+  color: white;
+  border-color: var(--lookup-select-color-primary);
 }
 
-.lookup-select__selected-item-remove {
-  background: none;
+.lookup-select__tag-remove {
+  background: rgba(0, 0, 0, 0.1);
   border: none;
-  color: inherit;
-  margin-left: var(--lookup-select-spacing-sm);
+  color: currentColor;
   cursor: pointer;
-  padding: 0;
-  font-size: var(--lookup-select-font-size);
+  padding: 2px 4px;
+  font-size: 12px;
   line-height: 1;
-  opacity: 0.8;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--lookup-select-transition-duration) var(--lookup-select-transition-timing);
+  opacity: 0.7;
 }
 
-.lookup-select__selected-item-remove:hover {
+.lookup-select__tag-remove:hover {
+  background: rgba(0, 0, 0, 0.2);
   opacity: 1;
+  transform: scale(1.1);
 }
 
 /* === MODAL === */
@@ -256,7 +262,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: var(--lookup-select-z-index-overlay);
   padding: 20px;
 }
 
@@ -358,11 +364,7 @@
   padding: calc(var(--lookup-select-spacing) * 2);
 }
 
-.lookup-select__grid-placeholder {
-  text-align: center;
-  color: #6b7280;
-  padding: calc(var(--lookup-select-spacing) * 4);
-}
+
 
 /* === MODAL FOOTER === */
 .lookup-select__modal-footer {
@@ -799,19 +801,7 @@
   background: var(--lookup-select-color-bg-hover);
 }
 
-.lookup-select__virtual-row--selected {
-  background: rgba(0, 102, 204, 0.1);
-  border-left: 3px solid var(--lookup-select-color-primary);
-}
-
-.lookup-select__virtual-row--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
 
-.lookup-select__virtual-row--disabled:hover {
-  background: transparent;
-}
 
 .lookup-select__virtual-row .lookup-select__table {
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lookup-select",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
@@ -40,7 +40,7 @@
     "type": "git",
     "url": "git+https://github.com/Onurlulardan/react-lookup-select.git"
   },
-  "homepage": "https://github.com/Onurlulardan/react-lookup-select#readme",
+  "homepage": "https://react-lookup-select.vercel.app",
   "bugs": {
     "url": "https://github.com/Onurlulardan/react-lookup-select/issues"
   },

package/readme.md

@@ -1,5 +1,9 @@
 # react-lookup-select
 
+[![NPM Version](https://img.shields.io/npm/v/react-lookup-select.svg)](https://www.npmjs.com/package/react-lookup-select)
+[![NPM Downloads](https://img.shields.io/npm/dm/react-lookup-select.svg)](https://www.npmjs.com/package/react-lookup-select)
+[![GitHub](https://img.shields.io/github/license/Onurlulardan/react-lookup-select.svg)](https://github.com/Onurlulardan/react-lookup-select)
+
 A headless, customizable React lookup select component with modal and grid support for single/multiple selection.
 
 ## Features
@@ -189,6 +193,168 @@ const dataSource = async (q: QueryState) => {
 />
 ```
 
+## Custom Rendering with Render Props
+
+### Overview
+
+The LookupSelect component supports complete customization through render props, allowing you to integrate with any UI library (Ant Design, Material-UI, etc.) or create custom designs.
+
+### Available Render Props
+
+- `renderTrigger` - Customize the trigger button
+- `renderModal` - Customize the modal container
+- `renderGrid` - Customize the data grid
+- `renderHeader` - Customize the modal header
+- `renderFooter` - Customize the modal footer
+- `renderSearch` - Customize the search input
+- `renderPagination` - Customize pagination controls
+
+### Custom Modal Example
+
+```tsx
+<LookupSelect
+  data={users}
+  columns={columns}
+  mapper={mapper}
+  renderModal={({ isOpen, onClose, children, title, selectedCount }) => {
+    if (!isOpen) return null;
+
+    return (
+      <div className="custom-modal-overlay" onClick={onClose}>
+        <div className="custom-modal" onClick={(e) => e.stopPropagation()}>
+          <div className="modal-header">
+            <h2>{title}</h2>
+            {selectedCount > 0 && (
+              <span className="selection-count">{selectedCount} selected</span>
+            )}
+            <button onClick={onClose}>×</button>
+          </div>
+          {children}
+        </div>
+      </div>
+    );
+  }}
+/>
+```
+
+### Custom Grid with Cards
+
+```tsx
+<LookupSelect
+  data={users}
+  columns={columns}
+  mapper={mapper}
+  renderGrid={({ data, selectedIds, onRowSelect, mapper }) => (
+    <div className="card-grid">
+      {data.map((user) => {
+        const isSelected = selectedIds.includes(mapper.getId(user));
+        return (
+          <div
+            key={mapper.getId(user)}
+            className={`user-card ${isSelected ? 'selected' : ''}`}
+            onClick={() => onRowSelect(user)}
+          >
+            <img src={user.avatar} alt={user.name} />
+            <h3>{user.name}</h3>
+            <p>{user.email}</p>
+            <span className="role">{user.role}</span>
+          </div>
+        );
+      })}
+    </div>
+  )}
+/>
+```
+
+### Ant Design Integration
+
+```tsx
+import { Modal, Table, Input, Button } from 'antd';
+
+<LookupSelect
+  data={users}
+  columns={columns}
+  mapper={mapper}
+  renderModal={({ isOpen, onClose, children }) => (
+    <Modal
+      open={isOpen}
+      onCancel={onClose}
+      title="Select Users"
+      width={800}
+      footer={null}
+    >
+      {children}
+    </Modal>
+  )}
+  renderGrid={({ data, columns, selectedRowKeys, onRowSelect }) => (
+    <Table
+      dataSource={data}
+      columns={columns}
+      rowSelection={{
+        selectedRowKeys,
+        onChange: onRowSelect,
+      }}
+      pagination={false}
+    />
+  )}
+  renderSearch={({ value, onChange, placeholder }) => (
+    <Input.Search
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      style={{ marginBottom: 16 }}
+    />
+  )}
+/>;
+```
+
+### Material-UI Integration
+
+```tsx
+import { Dialog, DataGrid, TextField, Chip } from '@mui/material';
+
+<LookupSelect
+  data={users}
+  columns={columns}
+  mapper={mapper}
+  renderModal={({ isOpen, onClose, children }) => (
+    <Dialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
+      {children}
+    </Dialog>
+  )}
+  renderGrid={({ data, columns, onRowSelect }) => (
+    <DataGrid
+      rows={data}
+      columns={columns}
+      onRowSelectionModelChange={onRowSelect}
+      checkboxSelection
+    />
+  )}
+/>;
+```
+
+### TypeScript Support for Render Props
+
+```tsx
+import type {
+  ModalRenderProps,
+  GridRenderProps,
+  SearchRenderProps,
+} from 'react-lookup-select';
+
+const CustomModal = ({ isOpen, onClose, children }: ModalRenderProps<User>) => {
+  // Your custom modal implementation
+};
+
+const CustomGrid = ({
+  data,
+  selectedIds,
+  onRowSelect,
+}: GridRenderProps<User>) => {
+  // Your custom grid implementation
+};
+```
+
 ## Virtualization - Large Data Performance
 
 ### Auto Virtualization