From 12bd2ea38cdc1e9a202d279c24ef2ce65912e898 Mon Sep 17 00:00:00 2001
From: mostafahanafi <mostafahanafi2001@hotmail.com>
Date: Mon, 14 Oct 2024 16:38:04 +0300
Subject: [PATCH] fix: replace deprecated 'dropdown' with menu and select in
 patterns

---
 .../patterns/forms/CreateUser.story.tsx       |  39 ++-
 .../patterns/forms/InlineForm.story.tsx       |  42 ++-
 .../patterns/forms/InlineLabelForm.story.tsx  |  23 +-
 .../patterns/forms/StepperForm.story.tsx      | 110 +++++--
 .../patterns/forms/TimePeriodForm.story.tsx   |  24 +-
 .../TableWithHeader/tableWithHeader.story.jsx | 276 ++++++++++++++++--
 6 files changed, 438 insertions(+), 76 deletions(-)

diff --git a/core/components/patterns/forms/CreateUser.story.tsx b/core/components/patterns/forms/CreateUser.story.tsx
index fb4bc7f509..3ff0da36cc 100644
--- a/core/components/patterns/forms/CreateUser.story.tsx
+++ b/core/components/patterns/forms/CreateUser.story.tsx
@@ -97,10 +97,21 @@ const customCode = `
               </Column>
               <Column sizeXL={4} sizeL={4} sizeM={5} className="mr-6 mb-6">
                 <Label withInput={true}>Gender</Label>
-                <Dropdown
-                  options={genderOptions}
-                  onChange={(value) => this.onChange(value, 'gender')}
-                />
+                <Select 
+                  width
+                  onSelect={(option) => this.onChange(option.value, 'gender')}
+                  triggerOptions={{ placeholder: "Select Gender", }}
+                >
+                  <Select.List>
+                    {genderOptions.map((item, key) => {
+                      return (
+                        <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                          {item.label}
+                        </Select.Option>
+                      )
+                    })}
+                  </Select.List>
+                </Select>
               </Column>
               <Column sizeXL={4} sizeL={4} sizeM={6} className="mr-6 mb-6">
                 <Label withInput={true}>Date of Birth</Label>
@@ -137,11 +148,21 @@ const customCode = `
               </Column>
               <Column sizeXL={4} sizeL={4} sizeM={5} className="mr-6 mb-6">
                 <Label withInput={true}>User Type</Label>
-                <Dropdown
-                  options={userOptions}
-                  placeholder="Select User Type"
-                  onChange={(value) => this.onChange(value, 'userType')}
-                />
+                <Select 
+                  width
+                  onSelect={(option) => this.onChange(option.value, 'userType')}
+                  triggerOptions={{ placeholder: "Select User Type", }}
+                >
+                  <Select.List>
+                    {userOptions.map((item, key) => {
+                      return (
+                        <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                          {item.label}
+                        </Select.Option>
+                      )
+                    })}
+                  </Select.List>
+                </Select>
               </Column>
               <Column sizeXL={3} sizeL={3} sizeM={5} className="mr-6 mb-6">
                 <Label withInput={true} >NPI</Label>
diff --git a/core/components/patterns/forms/InlineForm.story.tsx b/core/components/patterns/forms/InlineForm.story.tsx
index 3a885096ce..41072e38f9 100644
--- a/core/components/patterns/forms/InlineForm.story.tsx
+++ b/core/components/patterns/forms/InlineForm.story.tsx
@@ -126,21 +126,39 @@ const customCode = `
                 </div>
                 <div className="mr-6 mb-6" style={{ width: 'var(--spacing-9)' }}>
                   <Label withInput={true}>Primary Care Physician</Label>
-                  <Dropdown
-                    icon="add_box"
-                    placeholder="00000"
-                    options={options}
-                    onChange={(option) => this.onChange(option, 'pcp')}
-                  />
+                  <Select
+                    width
+                    onSelect={(option) => this.onChange(option.value, 'pcp')}
+                    triggerOptions={{ placeholder: "00000", icon: "add_box", }}
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                 </div>
                 <div className="mr-6 mb-6" style={{ width: 'var(--spacing-9)' }}>
                   <Label withInput={true}>Region</Label>
-                  <Dropdown
-                    icon="flag"
-                    placeholder="00000"
-                    options={options}
-                    onChange={(option) => this.onChange(option, 'region')}
-                  />
+                  <Select
+                    width
+                    onSelect={(option) => this.onChange(option.value, 'region')}
+                    triggerOptions={{ placeholder: "00000", icon: "flag", }}
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                 </div>
               </div>
               <Button
diff --git a/core/components/patterns/forms/InlineLabelForm.story.tsx b/core/components/patterns/forms/InlineLabelForm.story.tsx
index 1d73aeb8ce..df0337bc56 100644
--- a/core/components/patterns/forms/InlineLabelForm.story.tsx
+++ b/core/components/patterns/forms/InlineLabelForm.story.tsx
@@ -70,17 +70,28 @@ const customCode = `
               </Column>
               <Column size={8} className="d-flex">
                 <div className="mr-5 w-25">
-                  <Dropdown
-                    options={languages}
-                    onChange={(value) => {
+                  <Select
+                    width
+                    triggerOptions={{ withClearButton: false }}
+                    onSelect={(option) => {
                       const updatedData = {
                         ...this.state.data,
-                        language: value,
-                        defaultLanguage: defaultLanguage !== '' ? value : defaultLanguage,
+                        language: option.value,
+                        defaultLanguage: defaultLanguage !== '' ? option.value : defaultLanguage,
                       };
                       this.setState({data: updatedData})
                     }}
-                  />
+                  >
+                    <Select.List>
+                      {languages.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                 </div>
                 <Checkbox
                   name="defaultLanguage"
diff --git a/core/components/patterns/forms/StepperForm.story.tsx b/core/components/patterns/forms/StepperForm.story.tsx
index 2c82f5f596..133da0a07f 100644
--- a/core/components/patterns/forms/StepperForm.story.tsx
+++ b/core/components/patterns/forms/StepperForm.story.tsx
@@ -109,17 +109,37 @@ const customCode = `
                   The system automatically creates collection for multiple support.
                 </Text>
                 <div className="w-50 mt-4">
-                  <Dropdown
-                    options={options}
-                    placeholder="Input Collection 1"
+                  <Select 
+                    width
                     className="mb-4"
-                    onChange={(value) => this.onChangeOutput(value, 'collection1')}
-                  />
-                  <Dropdown
-                    options={options}
-                    placeholder="Input Collection 2"
-                    onChange={(value) => this.onChangeOutput(value, 'collection2')}
-                  />
+                    triggerOptions={{ placeholder: "Input Collection 1" }}
+                    onSelect={(option) => this.onChangeOutput(option.value, 'collection1')}
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
+                  <Select 
+                    width
+                    triggerOptions={{ placeholder: "Input Collection 2" }}
+                    onSelect={(option) => this.onChangeOutput(option.value, 'collection2')}
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                 </div>
                 <div className="d-flex mr-3 mt-8 mb-2">
                   <Text weight="strong" className="mr-4">Destination</Text>
@@ -130,11 +150,21 @@ const customCode = `
                 </Text>
                 <div className="w-50 mt-6">
                   <Label withInput={true}>Destination Collection</Label>
-                  <Dropdown
-                    options={options}
-                    placeholder="Select Destination"
-                    onChange={(value) => this.onChangeOutput(value, 'collection')}
-                  />
+                  <Select 
+                    width
+                    triggerOptions={{ placeholder: "Select Destination" }}
+                    onSelect={(option) => this.onChangeOutput(option.value, 'collection')}
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                 </div>
                 <div className="mt-6 w-50">
                   <Label withInput={true} required>Prefix</Label>
@@ -148,9 +178,35 @@ const customCode = `
                 </div>
                 <div className="w-25 mt-6">
                   <Label withInput={true} required>Retention</Label>
-                  <Dropdown options={options} onChange={(value) => this.onChangeOutput(value, 'retention')} />
+                  <Select 
+                    width
+                    onSelect={(option) => this.onChangeOutput(option.value, 'retention')}
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                   <Label className="mt-6" withInput={true}>Visibility Clarification</Label>
-                  <Dropdown options={options} onChange={(value) => this.onChangeOutput(value, 'clarification')} />
+                  <Select 
+                    width
+                    onSelect={(option) => this.onChangeOutput(option.value, 'clarification')}
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                 </div>
               </div>
               <div className={value !== 'Add_Configuration' ? 'd-none' : ''}>
@@ -165,14 +221,24 @@ const customCode = `
                 </div>
                 <div className="w-25 mt-6">
                   <Label withInput={true} required>Mode</Label>
-                  <Dropdown
-                    options={options}
-                    onChange={(value) => {
+                  <Select 
+                    width
+                    onSelect={(option) => {
                       this.setState({
-                        configuration: { ...this.state.configuration, mode: value }
+                        configuration: { ...this.state.configuration, mode: option.value }
                       });
                     }}
-                  />
+                  >
+                    <Select.List>
+                      {options.map((item, key) => {
+                        return (
+                          <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                            {item.label}
+                          </Select.Option>
+                        )
+                      })}
+                    </Select.List>
+                  </Select>
                 </div>
                 <div className="mt-6 w-50">
                   <Label withInput={true} required>Regex</Label>
diff --git a/core/components/patterns/forms/TimePeriodForm.story.tsx b/core/components/patterns/forms/TimePeriodForm.story.tsx
index c28c375626..947b51a2e0 100644
--- a/core/components/patterns/forms/TimePeriodForm.story.tsx
+++ b/core/components/patterns/forms/TimePeriodForm.story.tsx
@@ -32,11 +32,31 @@ const customCode = `
             <div className="d-flex mt-5 mb-4">
               <div className="mr-6" style={{ width: 'var(--spacing-8)' }}>
                 <Label withInput={true}>Region</Label>
-                <Dropdown options={options} />
+                <Select width>
+                  <Select.List>
+                    {options.map((item, key) => {
+                      return (
+                        <Select.Option key={key} option={{ label: item.label, value: item.value }}> 
+                          {item.label} 
+                        </Select.Option>
+                      )
+                    })}
+                  </Select.List>
+                </Select>
               </div>
               <div style={{ width: 'var(--spacing-9)' }}>
                 <Label withInput={true}>Organization</Label>
-                <Dropdown options={options} />
+                <Select width>
+                  <Select.List>
+                    {options.map((item, key) => {
+                      return (
+                        <Select.Option key={key} option={{ label: item.label, value: item.value }}> 
+                          {item.label} 
+                        </Select.Option>
+                      )
+                    })}
+                  </Select.List>
+                </Select>
               </div>
             </div>
             <Link target="_blank" href="#">Add organizations</Link>
diff --git a/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx b/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx
index 70c5153a3f..2f401ee6b3 100644
--- a/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx
+++ b/core/components/patterns/table/TableWithHeader/tableWithHeader.story.jsx
@@ -344,6 +344,73 @@ import './style.css';
         ? \`Showing \${startIndex}-\${endIndex} of \${totalRecords} item\${getPluralSuffix(totalRecords)}\`
         : \`Showing \${totalRecords} item\${getPluralSuffix(totalRecords)}\`;
   
+    const nameOptions = [
+      { label: 'A-G', value: 'a-g' },
+      { label: 'H-R', value: 'h-r' },
+      { label: 'S-Z', value: 's-z' }
+    ];
+
+  const selectRef = React.useRef(null);
+  const [selectedOptions, setSelectedOptions] = React.useState([]);
+  const [previousSelectedOptions, setPreviousSelectedOptions] = React.useState([]);
+  const [checkedState, setCheckedState] = React.useState('unchecked');
+  const [isDisabled, setIsDisabled] = React.useState(true);
+
+  const handleSelect = (selectedOption) => {
+    setIsDisabled(false);
+    console.log('selectedOption', selectedOption);
+    setSelectedOptions(selectedOption);
+  };
+
+  const handleSelectAllClick = (selectedOption) => {
+    setIsDisabled(false);
+    console.log(selectedOption, 'handleSelectAllClick');
+    if (checkedState === 'checked') {
+      setCheckedState('unchecked');
+      setSelectedOptions([]);
+    } else {
+      setCheckedState('checked');
+      setSelectedOptions(nameOptions);
+    }
+  };
+
+  const onClearHandler = () => {
+    setCheckedState('unchecked');
+    setSelectedOptions([]);
+    setPreviousSelectedOptions([]);
+  };
+
+  const onApplyOptions = () => {
+    console.log('onApply button called');
+    selectRef.current.setOpen(false);
+    setPreviousSelectedOptions(selectedOptions);
+    onFilterChange('name', selectedOptions.map(option => option.value));
+  };
+
+  const onCancelOptions = () => {
+    console.log('onCancel button called');
+    selectRef.current.setOpen(false);
+    setSelectedOptions(previousSelectedOptions);
+  };
+
+  const onOutsideClickHandler = () => {
+    setSelectedOptions(previousSelectedOptions);
+  };
+
+  React.useEffect(() => {
+    setSelectedOptions(previousSelectedOptions);
+  }, [previousSelectedOptions]);
+
+  React.useEffect(() => {
+    if (selectedOptions.length === nameOptions.length) {
+      setCheckedState('checked');
+    } else if (selectedOptions.length === 0) {
+      setCheckedState('unchecked');
+    } else {
+      setCheckedState('indeterminate');
+    }
+  }, [checkedState, selectedOptions]);
+
     return (
       <div className="Header">
         <div className="Header-content Header-content--top">
@@ -361,19 +428,58 @@ import './style.css';
           <div className="Header-dropdown">
             <div className="Table-filters Table-filters--horizontal">
               <div className="Table-filter">
-                <Dropdown
-                  key="name"
-                  disabled={loading}
-                  withCheckbox={true}
-                  showApplyButton={true}
-                  inlineLabel={"Name"}
-                  options={[
-                    { label: 'A-G', value: 'a-g', selected: true },
-                    { label: 'H-R', value: 'h-r', selected: true },
-                    { label: 'S-Z', value: 's-z', selected: true },
-                  ]}
-                  onChange={selected => onFilterChange("name", selected)}
-                />
+                <Select
+                  ref={selectRef}
+                  onOutsideClick={onOutsideClickHandler}
+                  multiSelect={true}
+                  value={selectedOptions}
+                  triggerOptions={{ 
+                    onClear: onClearHandler, 
+                    disabled: loading,
+                    inlineLabel: 'Name',
+                    withClearButton: false,
+                  }}
+                  onSelect={handleSelect}
+                >
+                  <Select.List>
+                    <Select.Option
+                      checkedState={checkedState}
+                      onClick={handleSelectAllClick}
+                      option={{ label: 'SelectAll', value: 'SelectAll' }}
+                    >
+                      Select All
+                    </Select.Option>
+                    {nameOptions.map((item, key) => {
+                      return (
+                        <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                          {item.label}
+                        </Select.Option>
+                      )
+                    })}
+                  </Select.List>
+                  <Select.Footer>
+                    <Button
+                      size={'tiny'}
+                      className="mr-4"
+                      appearance={'basic'}
+                      onClick={onCancelOptions}
+                      data-test="DesignSystem-Select-CancelButton"
+                      type="button"
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      appearance={'primary'}
+                      size={'tiny'}
+                      onClick={onApplyOptions}
+                      data-test="DesignSystem-Select-ApplyButton"
+                      type="button"
+                      disabled={isDisabled}
+                    >
+                      Apply
+                    </Button>
+                  </Select.Footer>
+                </Select>
               </div>
               <div className="Table-filter">
                 <Button
@@ -463,13 +569,85 @@ import './style.css';
         selectAll: getSelectAll([]),
         searchTerm: undefined,
         showVerticalFilters: props.showVerticalFilters,
+        selectedGenderOptions: [],
+        previousSelectedGenderOptions: [],
+        genderCheckedState: 'unchecked',
+        isGenderDisabled: true,
       };
   
       this.pageSize = 4;
       this.searchDebounceDuration = 750;
       this.debounceUpdate = debounce(this.searchDebounceDuration, this.updateDataFn);
+    
+      this.genderOptions = [
+        { label: 'Male', value: 'male' },
+        { label: 'Female', value: 'female' },
+      ];
+
+      this.genderSelectRef = React.createRef();
+
+      this.handleGenderSelect = this.handleGenderSelect.bind(this);
+      this.handleGenderSelectAllClick = this.handleGenderSelectAllClick.bind(this);
+      this.onGenderClearHandler = this.onGenderClearHandler.bind(this);
+      this.onGenderApplyOptions = this.onGenderApplyOptions.bind(this);
+      this.onGenderCancelOptions = this.onGenderCancelOptions.bind(this);
+      this.onGenderOutsideClickHandler = this.onGenderOutsideClickHandler.bind(this);
+      this.updateGenderCheckedState = this.updateGenderCheckedState.bind(this);  
+    }
+
+    handleGenderSelect(selectedOption) {
+      this.setState({ 
+        isGenderDisabled: false,
+        selectedGenderOptions: selectedOption
+      }, this.updateGenderCheckedState);
+    }
+
+    updateGenderCheckedState() {
+      if (this.state.selectedGenderOptions.length === this.genderOptions.length) {
+        this.setState({ genderCheckedState: 'checked' });
+      } else if (this.state.selectedGenderOptions.length === 0) {
+        this.setState({ genderCheckedState: 'unchecked' });
+      } else {
+        this.setState({ genderCheckedState: 'indeterminate' });
+      }
+    }
+
+    handleGenderSelectAllClick(selectedOption) {
+      this.setState({ isGenderDisabled: false });
+      console.log(selectedOption, 'handleGenderSelectAllClick');
+      if (this.state.genderCheckedState === 'checked') {
+        this.setState({ genderCheckedState: 'unchecked' });
+        this.setState({ selectedGenderOptions: [] });
+      } else {
+        this.setState({ genderCheckedState: 'checked' });
+        this.setState({ selectedGenderOptions: this.genderOptions });
+      }
+    }
+
+    onGenderClearHandler() {
+      this.setState({ genderCheckedState: 'unchecked' });
+      this.setState({ selectedGenderOptions: [] });
+      this.setState({ previousSelectedGenderOptions: [] });
+    }
+
+    onGenderApplyOptions() {
+      this.genderSelectRef.current.setOpen(false);
+      console.log('onGenderApply button called');
+      this.setState({ previousSelectedGenderOptions: this.state.selectedGenderOptions });
+      this.onFilterChange("gender", this.state.selectedGenderOptions.map(option => option.value));
     }
 
+    onGenderCancelOptions() {
+      console.log('onGenderCancel button called');
+      this.genderSelectRef.current.setOpen(false);
+      this.setState({ selectedGenderOptions: this.state.previousSelectedGenderOptions });
+    }
+
+    onGenderOutsideClickHandler() {
+      this.setState({ selectedGenderOptions: this.state.previousSelectedGenderOptions });
+    }
+
+
     componentDidMount() {
       this.updateData();
     }
@@ -486,6 +664,14 @@ import './style.css';
         || prevState.searchTerm !== this.state.searchTerm) {
         if (!this.props.loading) this.updateData({});
       }
+
+      if (prevState.selectedGenderOptions !== this.state.selectedGenderOptions) {
+        if (this.state.selectedGenderOptions.length === this.genderOptions.length) {
+          this.setState({ genderCheckedState: 'checked' });
+        } else if (this.state.selectedGenderOptions.length === 0) {
+          this.setState({ genderCheckedState: 'unchecked' });
+        }
+      }
     }
 
     updateData() {
@@ -732,18 +918,58 @@ import './style.css';
             </div>
             <div>
               <div className="Table-filter">
-                <Dropdown
-                  key="gender"
-                  disabled={loading}
-                  withCheckbox={true}
-                  showApplyButton={true}
-                  inlineLabel={"Gender"}
-                  options={[
-                    { label: 'Male', value: 'male', selected: true },
-                    { label: 'Female', value: 'female', selected: true },
-                  ]}
-                  onChange={selected => this.onFilterChange("gender", selected)}
-                />
+                <Select
+                  ref={this.genderSelectRef}
+                  onOutsideClick={this.onGenderOutsideClickHandler}
+                  multiSelect={true}
+                  value={this.state.selectedGenderOptions}
+                  triggerOptions={{ 
+                    onClear: this.onGenderClearHandler, 
+                    disabled: loading,
+                    inlineLabel: 'Gender',
+                    withClearButton: false,
+                  }}
+                  onSelect={this.handleGenderSelect}
+                >
+                  <Select.List>
+                    <Select.Option
+                      checkedState={this.state.genderCheckedState}
+                      onClick={this.handleGenderSelectAllClick}
+                      option={{ label: 'SelectAll', value: 'SelectAll' }}
+                    >
+                      Select All
+                    </Select.Option>
+                    {this.genderOptions.map((item, key) => {
+                      return (
+                        <Select.Option key={key} option={{ label: item.label, value: item.value }}>
+                          {item.label}
+                        </Select.Option>
+                      )
+                    })}
+                  </Select.List>
+                  <Select.Footer>
+                    <Button
+                      size={'tiny'}
+                      className="mr-4"
+                      appearance={'basic'}
+                      onClick={this.onGenderCancelOptions}
+                      data-test="DesignSystem-Select-CancelButton"
+                      type="button"
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      appearance={'primary'}
+                      size={'tiny'}
+                      onClick={this.onGenderApplyOptions}
+                      data-test="DesignSystem-Select-ApplyButton"
+                      type="button"
+                      disabled={this.state.isGenderDisabled}
+                    >
+                      Apply
+                    </Button>
+                  </Select.Footer>
+                </Select>
               </div>
               <div className="Table-filter">
                 <DatePicker