@sb1/ffe-searchable-dropdown-react 100.8.2 → 100.9.0

package/README.md

@@ -1,58 +1,200 @@
-# ffe-searchable-dropdown-react
+# @sb1/ffe-searchable-dropdown-react
 
-React dropdown component with search.
+## Beskrivelse
 
-## Install
+Søkbar nedtrekksliste for store eller dynamiske lister. Tilgjengelig som enkeltvalg (`SearchableDropdown`) og flervalg (`SearchableDropdownMultiSelect`).
+
+## Installasjon
 
 ```bash
-npm install --save ffe-searchable-dropdown-react
+npm install --save @sb1/ffe-searchable-dropdown-react
 ```
 
-## Usage
-
-Full documentation on searchable dropdown usage is available at https://design.sparebank1.no/komponenter/dropdown/#searchabledropdown.
+## Bruk
 
-This package depends on `@sb1/ffe-form-react`, `@sb1/ffe-icons-react`, `@sb1/ffe-chips-react` and `@sb1/ffe-spinner-react`.
-Make sure you import the less-files.
+Full dokumentasjon: https://sparebank1.github.io/designsystem/
 
-```javascript
-import { SearchableDropdown } from '@sb1/ffe-searchable-dropdown-react';
-```
+Avhengigheter: `@sb1/ffe-form-react`, `@sb1/ffe-icons-react`, `@sb1/ffe-chips-react`, `@sb1/ffe-spinner-react`.
 
-styling:
+### Importere kompilert CSS
 
-```
-@import "npm://ffe-searchable-dropdown-react/less/searchable-dropdown";
+```css
+@import '@sb1/ffe-searchable-dropdown-react/css/searchable-dropdown.css';
 ```
 
-### Importing compiled CSS
+## Eksempler
 
-If your project does not use Less, you can import the compiled styling:
+### Enkeltvalg
 
-```css
-@import '~@sb1/ffe-searchable-dropdown-react/css/searchable-dropdown.css';
+```tsx
+import { useState } from 'react';
+import { SearchableDropdown } from '@sb1/ffe-searchable-dropdown-react';
+import { InputGroup } from '@sb1/ffe-form-react';
+
+interface Company {
+    organizationName: string;
+    organizationNumber: string;
+    balance: string;
+}
+
+function MyComponent() {
+    const [selected, setSelected] = useState<Company | null>(null);
+
+    const companies: Company[] = [
+        {
+            organizationName: 'Bedriften AS',
+            organizationNumber: '912602370',
+            balance: '12 345,00 kr',
+        },
+        {
+            organizationName: 'Firma AS',
+            organizationNumber: '812602372',
+            balance: '45 678,00 kr',
+        },
+    ];
+
+    return (
+        <InputGroup
+            label="Velg bedrift"
+            labelId="company-label"
+            inputId="company-dropdown"
+        >
+            <SearchableDropdown<Company>
+                id="company-dropdown"
+                labelledById="company-label"
+                dropdownList={companies}
+                dropdownAttributes={['organizationName', 'organizationNumber']}
+                searchAttributes={['organizationName', 'organizationNumber']}
+                selectedItem={selected}
+                onChange={item => setSelected(item)}
+                noMatch={{ text: 'Ingen treff' }}
+                inputProps={{ placeholder: 'Søk etter bedrift' }}
+                locale="nb"
+            />
+        </InputGroup>
+    );
+}
 ```
 
-## FFE less Dependencies
-
-```
-@import "~ffe-core/less/colors";
+### Flervalg
+
+Valgte elementer vises som chips. `onChange` kalles med elementet og `actionType` ('selected' | 'removed').
+
+```tsx
+import { useState } from 'react';
+import { SearchableDropdownMultiSelect } from '@sb1/ffe-searchable-dropdown-react';
+import { InputGroup } from '@sb1/ffe-form-react';
+
+interface Fruit {
+    displayName: string;
+    color: string;
+}
+
+function MyComponent() {
+    const [selectedFruits, setSelectedFruits] = useState<Fruit[]>([]);
+
+    const fruits: Fruit[] = [
+        { displayName: 'Banan', color: 'Gul' },
+        { displayName: 'Eple', color: 'Rød' },
+    ];
+
+    const handleChange = (item: Fruit, actionType: 'selected' | 'removed') => {
+        if (actionType === 'selected') {
+            setSelectedFruits(prev => [...prev, item]);
+        } else {
+            setSelectedFruits(prev =>
+                prev.filter(f => f.displayName !== item.displayName),
+            );
+        }
+    };
+
+    return (
+        <InputGroup
+            label="Velg frukt"
+            labelId="fruit-label"
+            inputId="fruit-multiselect"
+        >
+            <SearchableDropdownMultiSelect<Fruit>
+                id="fruit-multiselect"
+                labelledById="fruit-label"
+                dropdownList={fruits}
+                dropdownAttributes={['displayName', 'color']}
+                searchAttributes={['displayName', 'color']}
+                selectedItems={selectedFruits}
+                onChange={handleChange}
+                noMatch={{ text: 'Ingen frukt funnet' }}
+                locale="nb"
+            />
+        </InputGroup>
+    );
+}
 ```
 
-## Available props
+### Egendefinert optionBody
+
+```tsx
+import type { Locale } from '@sb1/ffe-searchable-dropdown-react';
+
+// For SearchableDropdown
+const CustomOptionBody = ({
+    item,
+    isHighlighted,
+}: {
+    item: Company;
+    isHighlighted: boolean;
+    dropdownAttributes: (keyof Company)[];
+    locale: Locale;
+}) => (
+    <div style={{ background: isHighlighted ? '#e0e0e0' : 'white' }}>
+        <strong>{item.organizationName}</strong>
+        <div>{item.organizationNumber}</div>
+    </div>
+);
+
+// For SearchableDropdownMultiSelect - har ekstra `isSelected`-prop
+```
 
-See propTypes in [SearchableDropdown.js](src/SearchableDropdown.js)
+### Egendefinert søkefunksjon
+
+```tsx
+const customSearchMatcher = (
+    inputValue: string,
+    searchAttributes: string[],
+) => {
+    const cleanedInput = inputValue.toLowerCase().replace(/\s/g, '');
+    return (item: Record<string, any>) =>
+        searchAttributes.some(attr =>
+            String(item[attr])
+                .toLowerCase()
+                .replace(/\s/g, '')
+                .includes(cleanedInput),
+        );
+};
+
+<SearchableDropdown searchMatcher={customSearchMatcher} /* ... */ />;
+```
 
-## Development
+### Vis alternativt innhold ved ingen treff
+
+```tsx
+<SearchableDropdown
+    noMatch={{
+        text: 'Fant ingen treff',
+        dropdownList: [
+            {
+                organizationName: 'Foreslått bedrift',
+                organizationNumber: '123456789',
+                balance: '0 kr',
+            },
+        ],
+    }}
+/>
+```
 
-To start a local development server, run the following from the designsystem root folder:
+## Utvikling
 
 ```bash
-npm install
-npm run build
-npm start
+npm install && npm run build && npm start
 ```
 
-A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
-
-Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
+Lokal Storybook kjører på http://localhost:6006/.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-searchable-dropdown-react",
-    "version": "100.8.2",
+    "version": "100.9.0",
     "description": "Dropdown with search option",
     "license": "MIT",
     "author": "SpareBank 1",
@@ -27,11 +27,11 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-chips-react": "^100.8.2",
-        "@sb1/ffe-core-react": "^100.8.2",
-        "@sb1/ffe-form": "^100.8.2",
-        "@sb1/ffe-icons-react": "^100.8.2",
-        "@sb1/ffe-spinner-react": "^100.8.2",
+        "@sb1/ffe-chips-react": "^100.9.0",
+        "@sb1/ffe-core-react": "^100.9.0",
+        "@sb1/ffe-form": "^100.9.0",
+        "@sb1/ffe-icons-react": "^100.9.0",
+        "@sb1/ffe-spinner-react": "^100.9.0",
         "@types/lodash.isequal": "^4.5.8",
         "classnames": "^2.3.1",
         "compute-scroll-into-view": "^3.1.0",
@@ -40,7 +40,7 @@
         "react-custom-scrollbars-4": "^4.5.1"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^100.8.2",
+        "@sb1/ffe-buildtool": "^100.9.0",
         "eslint": "^9.22.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -51,5 +51,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "50fbbbdb2023a60add7158e8c5bd6443c4f9c95e"
+    "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
 }