diff --git a/.eslintrc b/.eslintrc
index c47ca8b..b1685d9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -16,7 +16,8 @@
"plugins": [
"@typescript-eslint",
"react",
- "react-hooks"
+ "react-hooks",
+ "import"
],
"rules": {
"no-console": "warn",
@@ -32,7 +33,21 @@
"space-before-blocks":"error",
"prefer-spread": ["off"],
"react-hooks/exhaustive-deps": "off",
- "no-extra-boolean-cast": "off"
+ "no-extra-boolean-cast": "off",
+ "sort-imports": ["error", {"ignoreCase": true, "ignoreDeclarationSort": true}],
+ "import/order": [
+ "error",
+ { "groups":
+ [
+ "external",
+ "builtin",
+ "internal",
+ "parent",
+ "sibling",
+ "index"
+ ]
+ }
+ ]
},
"settings": {
"react": {
diff --git a/.gitignore b/.gitignore
index ebbbb77..d410eca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ node_modules
build
dist
.rpt2_cache
+coverage
# misc
.DS_Store
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index b8ed5cf..b9a6c7f 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
Examples of behavior that contributes to creating a positive environment
include:
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+ professional setting
## Our Responsibilities
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at opensource@hodgef.com. All
+reported by contacting the project team at it.team@keyvalue.systems. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..a9dceaf
--- /dev/null
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,76 @@
+
+
+
+
+
+## Pull Request Checklist
+
+
+
+- [ ] **Read the contributing guidelines.**
+- [ ] **Linked to an issue:** Fixes # (replace with the issue number, if applicable)
+- [ ] **Branch is up-to-date with the base branch:** `main`
+- [ ] **Changes pass tests locally:** `npm test` or `yarn test`
+- [ ] **Documentation has been updated, if necessary**
+- [ ] **Code follows the style guide of the project**
+
+
+## Description
+
+
+
+
+
+
+
+## Screenshots (if applicable)
+
+
+
+
+
+
+
+## Additional Notes
+
+
+
+
+
+
+
+## Related Issues or PRs
+
+
+
+
+
+
+
+## Reviewer Guidelines
+
+
+
+
+
+
+
+## Testing Instructions
+
+
+
+
+
+
+
+## Checklist for Reviewers
+
+
+
+- [ ] Code follows project conventions and style
+- [ ] Changes do not introduce new warnings or errors
+- [ ] Unit tests cover the changes
+- [ ] Documentation is updated
+
+
+## By submitting this pull request, I confirm that my contribution is made under the terms of the MIT License.
diff --git a/README.md b/README.md
index 53369dd..221610f 100644
--- a/README.md
+++ b/README.md
@@ -1,114 +1,102 @@
-
-
# React Multi Selection UI
-
-
-
-
-
+
-
+
-
-
->A customizable ready to use Multi Selection UI component with Search feature
-
-
-
-Try tweaking a multi selection ui component using this codesandbox link here
+> A pre-built, customizable Multi-Selection UI component with an integrated search feature
-
+Try tweaking a multi selection ui component using this codesandbox link here
## Installation
-
-
The easiest way to use react-multi-selection-ui-component is to install it from npm and build it into your app with Webpack.
-
-
```bash
npm install @keyvaluesystems/react-multi-selection-ui-component
```
-You’ll need to install React separately since it isn't included in the package.
+You’ll need to install React separately since it isn't included in the package.
## Usage
-React Multi Selection UI can run in a very basic mode by just providing the `productList` like given below:
-
-
+React Multi Selection UI can run in a very basic mode by just providing the `options` like given below:
```jsx
+import MultiSelection from "@keyvaluesystems/react-multi-selection-ui-component";
-import MultiSelection from '@keyvaluesystems/react-multi-selection-ui-component';
-
-
-
+;
```
-
-
-The productList is an array of objects with the following keys:
-
-
+The optionsArray consists of objects with the following keys:
-- `id` - a unique identifier for each product
+- `id`: A unique identifier for each option.
+- `name`: A string representing the label for each option.
+- `checked`: An optional boolean value indicating the default state of the option
-- `name` - a string that represents each product
-
-An example for productList array is shown below:
-
-
+An example for options array is shown below:
```jsx
-const productListArray = [
+const optionsArray = [
{
- id: 1,
- name: 'Product 1'
+ id: 1,
+ name: "Option 1",
+ checked: true,
},
{
- id: 2,
- name: 'Product 2'
- }
-]
+ id: 2,
+ name: "Option 2",
+ },
+];
```
-You can use `hideSearch` prop to hide/show the search feature in the selection list (left menu).
-With the help of `showCheckbox` prop, the checkbox near the selection list can be shown/hidden.
-`searchPlaceholder` gives an option to customise the placeholder shown inside the Search text box.
-
+## v1.0.0 (Major Version Change)
+
+This release includes breaking changes, new features, and updates. Please read this document carefully before upgrading
+
+### Breaking Changes
+
+- The `productList` prop has been renamed to `options`, and now each object within the options array includes an additional optional `checked` property.
+- The `zeroState` prop is deprecated.
+- Significant alterations have been made to the UI behavior.
+ Please take note of these changes during the upgrade
+
+### Migration Steps
+
+- Update Options Prop: The `productList` prop has been renamed to `options`. Use the `options` prop to pass the list of items.
+- Replace `searchPlaceholder` with placeholder:The `searchPlaceholder` prop has been replaced with `placeholder`.
+- Utilize `renderEmptyItem` Prop: To pass the empty state component, use the renderEmptyItem prop.
+
+Before
+
```jsx
,
+ selectedList: ,
+ }}
/>
```
-
-
-You can specify whether to show or hide the selected values in the selection list(left list) with the help of `hideSelected` prop.
-
-Zero-states can be customised for both list using `zeroState` prop. We can provide JSX elements for both selected list and selection list in this.
+After
```jsx
}
/>
```
+
## Props
- Props that can be passed to the component are listed below:
+Props that can be passed to the component are listed below:
@@ -120,9 +108,9 @@ Zero-states can be customised for both list using `zeroState` prop. We can provi
-
productList: object[]
+
options: object[]
-An array of product objects to specifying the id and name of each product
+An array of objects to specify the id, name and default state of each option
[]
@@ -134,18 +122,18 @@ The boolean value to control the display of checkbox in the selection list
true
-
searchPlaceholder?: string
+
placeholder?: string
-The placeholder value for the search text box
+The placeholder value for the search text box if search is enabled and default text shown in the box if search is disabled
-
true
+
'Choose an option'
hideSelected?: boolean
-The boolean value to control the display of selected values in the selected list(right list)
+The boolean value to control the display of selected values in the list
-
'Search products'
+
false
hideSearch?: boolean
@@ -155,37 +143,92 @@ The boolean value to control the display of search text box in the selection lis
false
-
hideSelected?: boolean
+
onSearch?: function
-The boolean value to control the display of selected values in the selected list(right list)
+The callback function which will be triggered on text change in the search box
-
false
+
undefined
-
zeroState?: object
+
onItemClick?: function
-To specify the zerostate components to be rendered in both lists
+The callback function which will be triggered on clicking the menu item row. Can be used for obtaining the clicked row id
-The callback function which will be triggered on text change in the search box
+
setSelectedValues?: function
+The callback function which will be triggered on clicking the check box and chip's close button. Can be used for obtaining the selected id's
undefined
-
setSelectedValues?: function
+
styles?: object
-The callback function which will be triggered on the selection of product list values. Can be used for obtaining the selected values
+Provides you with a bunch of callback functions to override the default styles.
undefined
-
styles?: object
+
showChips?: boolean
-Provides you with a bunch of callback functions to override the default styles.
+The boolean value to control the display of selected options as chips.
+
+
true
+
+
+
dropdownMaxHeight?: string | number
+
+The prop to control the height of the dropdown modal.
+
+
'100%'
+
+
+
renderEmptyItem?: JSX
+
+The JSX element to be shown in case of empty result.
+
+
No other options
+
+
+
isLoading?: boolean
+
+The boolean value to show loading state in the dropdown list.
+
+
false
+
+
+
renderLoader?: JSX
+
+The JSX element to be shown while loading.
+
+
Default loader component
+
+
+
hasError?: boolean
+
+The boolean value to indicate error.
+
+
false
+
+
+
helperText?: ''
+
+To display an additional message.
+
+
''
+
+
+
thresholdForBubble?: number
+
+Show the bubble when the count of selected items reaches this threshold.
+
+
length of options array
+
+
+
icons?: object
+
+Provides you with an object to replace the default icons used.
-
-
+
+