HLM 5902 (#62)

* updated multiselectdropdown categoryselectall functionality

* added key navigation for dropdown options

* pdated dropdown checkbox css

* updated css version

* updated ui-components version

react/css/README.md

@@ -42,6 +42,7 @@ frontend/micro-ui/web/public/index.html
 # Changelog
 
 ```bash
+1.8.2-coreui.14 updated dropdown checkbox css
 1.8.2-coreui.13 added spacers
 1.8.2-coreui.12 updated css for toast info and category option css 
 1.8.2-coreui.11 added info varinat for toast

react/css/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-css",
- "version": "1.8.2-coreui.13",
+ "version": "1.8.2-coreui.14",
  "license": "MIT",
  "main": "dist/index.css",
  "author": "Jagankumar <[email protected]>",

react/css/src/digitv2/components/multiSelectDropdownV2.scss

@@ -109,7 +109,7 @@
  }
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll,
  input:checked~.digit-multiselectdropodwn-custom-checkbox-selectAll {
- border: theme(digitv2.spacers.spacer5) solid theme(digitv2.lightTheme.primary-1);
+ border: 0.125rem solid theme(digitv2.lightTheme.primary-1);
  background-color: theme(digitv2.lightTheme.paper-secondary);
  }
  input:active~.digit-multiselectdropodwn-custom-checkbox-selectAll svg,

react/example/package.json

@@ -10,7 +10,7 @@
  "build": "webpack --mode production"
  },
  "dependencies": {
- "@egovernments/digit-ui-components": "0.0.1-beta.18",
+ "@egovernments/digit-ui-components": "0.0.1-beta.20",
  "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
  "@egovernments/digit-ui-module-common": "1.7.10",
  "@egovernments/digit-ui-module-core": "1.8.1-beta.6",

react/example/public/index.html

@@ -9,7 +9,7 @@
  rel='stylesheet' type='text/css'>
  <link
  rel="stylesheet"
- href="https://unpkg.com/@egovernments/[email protected].13/dist/index.css"
+ href="https://unpkg.com/@egovernments/[email protected].14/dist/index.css"
  />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#00bcd1" />

react/modules/Project/package.json

@@ -19,7 +19,7 @@
  },
  "dependencies": {
  "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
- "@egovernments/digit-ui-components": "0.0.1-beta.18",
+ "@egovernments/digit-ui-components": "0.0.1-beta.20",
  "lodash": "^4.17.21",
  "react": "17.0.2",
  "react-date-range": "^1.4.0",

react/modules/core/package.json

@@ -14,7 +14,7 @@
  "prepublish": "yarn build"
  },
  "dependencies": {
- "@egovernments/digit-ui-components": "0.0.1-beta.18",
+ "@egovernments/digit-ui-components": "0.0.1-beta.20",
  "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
  "react": "17.0.2",
  "react-dom": "17.0.2",

react/modules/sample/package.json

@@ -19,7 +19,7 @@
  },
  "dependencies": {
  "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
- "@egovernments/digit-ui-components": "0.0.1-beta.18",
+ "@egovernments/digit-ui-components": "0.0.1-beta.20",
  "react": "17.0.2",
  "react-date-range": "^1.4.0",
  "react-dom": "17.0.2",

react/package.json

@@ -77,7 +77,7 @@
  "@egovernments/digit-ui-module-sample": "0.0.1",
  "@egovernments/digit-ui-react-components": "1.7.10",
  "@egovernments/digit-ui-svg-components": "1.0.4",
- "@egovernments/digit-ui-components": "0.0.1-beta.18",
+ "@egovernments/digit-ui-components": "0.0.1-beta.20",
  "babel-loader": "8.1.0",
  "clean-webpack-plugin": "4.0.0",
  "css-loader": "5.2.6",

react/ui-components/README.md

@@ -58,6 +58,7 @@ yarn storybook
 # Changelog
 
 ```bash
+0.0.1-beta.20 updated multiselectdropdown categoryselectall functionality and added key navigation for dropdown options 
 0.0.1-beta.19 making CheckBox more customizable and adding custom color for Button
 0.0.1-beta.18 updated dropdown option labels
 0.0.1-beta.17 updated toast info varinat css and category option css 

react/ui-components/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@egovernments/digit-ui-components",
- "version": "0.0.1-beta.19",
+ "version": "0.0.1-beta.20",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
  "dist"
  ],
  "dependencies": {
- "@egovernments/digit-ui-css": "1.8.2-coreui.13",
+ "@egovernments/digit-ui-css": "1.8.2-coreui.14",
  "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
  "@egovernments/digit-ui-svg-components": "1.0.4",
  "@googlemaps/js-api-loader": "1.13.10",

react/ui-components/src/atoms/Dropdown.js

@@ -190,9 +190,13 @@ const Dropdown = (props) => {
  ?.indexOf(filterVal?.toUpperCase()) > -1
  )) ||
  [];
- function selectOption(ind) {
- onSelect(filteredOption[ind]);
- }
+ function selectOption(ind) {
+ const optionsToSelect =
+ props.variant === "nesteddropdown" || props.variant === "treedropdown"
+ ? flattenedOptions
+ : filteredOption;
+ onSelect(optionsToSelect[ind]);
+ }
 
  if (props.isBPAREG && selectedOption) {
  let isSelectedSameAsOptions =
@@ -437,7 +441,11 @@ const Dropdown = (props) => {
  }
  filterVal={filterVal}
  addProps={{
- length: filteredOption.length,
+ length:
+ props.variant === "nesteddropdown" ||
+ props.variant === "treedropdown"
+ ? flattenedOptions.length
+ : filteredOption.length,
  currentIndex: optionIndex,
  selectOption: selectOption,
  }}

react/ui-components/src/atoms/ErrorBoundary.js

@@ -1,4 +1,4 @@
-import { Toast } from '@egovernments/digit-ui-components';
+import Toast from "./Toast";
 import React, { Component } from 'react';
 
 class ErrorBoundary extends Component {

react/ui-components/src/atoms/MultiSelectDropdown.js

@@ -24,7 +24,7 @@ const MultiSelectDropdown = ({
  addSelectAllCheck = false,
  addCategorySelectAllCheck = false,
  selectAllLabel = "",
- categorySelectAllLabel = ""
+ categorySelectAllLabel = "",
 }) => {
  const [active, setActive] = useState(false);
  const [searchQuery, setSearchQuery] = useState();
@@ -124,7 +124,7 @@ const MultiSelectDropdown = ({
  newCategorySelected[category.code] = allChildrenSelected;
  });
  setCategorySelected(newCategorySelected);
- }, [alreadyQueuedSelectedState]);
+ }, [options, alreadyQueuedSelectedState]);
 
  function handleOutsideClickAndSubmitSimultaneously() {
  setActive(false);
@@ -248,10 +248,15 @@ const MultiSelectDropdown = ({
  const childoptions = parentOption.options;
  if (!categorySelected[parentOption.code]) {
  childoptions?.forEach((option) => {
- dispatch({
- type: "ADD_TO_SELECTED_EVENT_QUEUE",
- payload: [null, option],
- });
+ const isAlreadySelected = alreadyQueuedSelectedState.some(
+ (selectedOption) => selectedOption.code === option.code
+ );
+ if (!isAlreadySelected) {
+ dispatch({
+ type: "ADD_TO_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ }
  });
  } else {
  childoptions?.forEach((option) => {
@@ -280,13 +285,34 @@ const MultiSelectDropdown = ({
  return count;
  };
 
+ const selectOptionThroughKeys = (e, option) => {
+ let checked = alreadyQueuedSelectedState.find(
+ (selectedOption) => selectedOption.code === option.code
+ )
+ ? true
+ : false;
+ if (!checked) {
+ dispatch({
+ type: "ADD_TO_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ } else {
+ dispatch({
+ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ }
+ };
+
  /* Custom function to scroll and select in the dropdowns while using key up and down */
  const keyChange = (e) => {
+ const optionToScroll =
+ variant === "nestedmultiselect" ? flattenedOptions : filteredOptions;
  if (e.key == "ArrowDown") {
  setOptionIndex((state) =>
- state + 1 == filtOptns.length ? 0 : state + 1
+ state + 1 == optionToScroll.length ? 0 : state + 1
  );
- if (optionIndex + 1 == filtOptns.length) {
+ if (optionIndex + 1 == optionToScroll.length) {
  e?.target?.parentElement?.parentElement?.children
  ?.namedItem("jk-dropdown-unique")
  ?.scrollTo?.(0, 0);
@@ -299,7 +325,7 @@ const MultiSelectDropdown = ({
  e.preventDefault();
  } else if (e.key == "ArrowUp") {
  setOptionIndex((state) =>
- state !== 0 ? state - 1 : filtOptns.length - 1
+ state !== 0 ? state - 1 : optionToScroll.length - 1
  );
  if (optionIndex === 0) {
  e?.target?.parentElement?.parentElement?.children
@@ -313,7 +339,7 @@ const MultiSelectDropdown = ({
  }
  e.preventDefault();
  } else if (e.key == "Enter") {
- onSelectToAddToQueue(e, filtOptns[optionIndex]);
+ selectOptionThroughKeys(e, optionToScroll[optionIndex]);
  }
  };
 
@@ -331,7 +357,9 @@ const MultiSelectDropdown = ({
  )
  : options;
 
- const parentOptionsWithChildren = filteredOptions.filter(option => option.options && option.options.length > 0);
+ const parentOptionsWithChildren = filteredOptions.filter(
+ (option) => option.options && option.options.length > 0
+ );
 
  const flattenOptions = (options) => {
  let flattened = [];
@@ -484,7 +512,9 @@ const MultiSelectDropdown = ({
  addSelectAllCheck ? "selectAll" : ""
  }`}
  >
- <div className="digit-category-name">{t(option[optionsKey])}</div>
+ <div className="digit-category-name">
+ {t(option[optionsKey])}
+ </div>
  {addCategorySelectAllCheck && (
  <div
  className="digit-category-selectAll"

react/ui-components/yarn-error.log

@@ -29,7 +29,7 @@ Trace:
 npm manifest: 
  {
  "name": "@egovernments/digit-ui-components",
- "version": "0.0.1-beta.15",
+ "version": "0.0.1-beta.20",
  "license": "MIT",
  "main": "dist/index.js",
  "module": "dist/index.modern.js",
@@ -80,7 +80,7 @@ npm manifest:
  "dist"
  ],
  "dependencies": {
- "@egovernments/digit-ui-css": "1.8.2-coreui.13",
+ "@egovernments/digit-ui-css": "1.8.2-coreui.14",
  "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
  "@egovernments/digit-ui-svg-components": "1.0.4",
  "@googlemaps/js-api-loader": "1.13.10",

react/yarn-error.log

@@ -91,7 +91,7 @@ npm manifest:
  "dependencies": {
  "lodash": "4.17.21",
  "microbundle-crl": "0.13.11",
- "@egovernments/digit-ui-components": "0.0.1-beta.15",
+ "@egovernments/digit-ui-components": "0.0.1-beta.20",
  "babel-loader": "8.1.0",
  "clean-webpack-plugin": "4.0.0",
  "react": "17.0.2",