Merge pull request #465 from saddlebackdev/features/finance_sub-accou…

…nts--102323_edit-segments-code-numbers [dev] AB#102323 [Finance > COA > Edit Sub Account] - User can Edit the "Sub Account's" segments code numbers, in the "Edit Sub Account" drawer.
saddlebackdev · Oct 10, 2023 · 5681299 · 5681299
2 parents 8e60f42 + 660462b
commit 5681299
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/src/inputs/selectNext/selectNext.tsx b/src/inputs/selectNext/selectNext.tsx
@@ -31,6 +31,10 @@ type PropTypes = {
     */
     className?: string;
     /**
+    * A Select can be disabled
+    */
+    disabled?: boolean,
+    /**
     * Supply dropdown menu maximum height
     */
     dropdownMenuMaxHeight?: number;
@@ -99,6 +103,7 @@ type PropTypes = {
 const defaultProps = {
     alwaysShowRequiredIndicator: false,
     className: null,
+    disabled: false,
     dropdownMenuMaxHeight: 180,
     dropdownMenuMinHeight: null,
     id: null,
@@ -125,6 +130,7 @@ const useStyles = makeStyles((theme) => {
 
     // Control Options
     const selectInputBg = p.background.primary;
+    const selectInputBgDisabled = p.background.secondary;
     const selectInputBgFocus = p.background.contrastPrimary;
     const selectInputBorderColor = p.border.primary;
     const selectInputBorderRadius = '3px';
@@ -194,6 +200,12 @@ const useStyles = makeStyles((theme) => {
                             fill: `${selectInputArrowColorFocus} !important`,
                         },
                     },
+                    '&--is-disabled': {
+                        backgroundColor: selectInputBgDisabled,
+                        '&:hover': {
+                            boxShadow: 'none',
+                        },
+                    },
                     '&--is-focused:not(.react_select__control--menu-is-open)': {
                         borderColor: `${selectInputBorderFocus} ${selectInputBorderFocus} ${selectInputBorderFocus}`,
                         boxShadow: [
@@ -343,6 +355,7 @@ const CustomOption = (componentProps) => {
     const {
         children,
         className,
+        disabled,
         innerRef,
         isSelected,
         selectOption,
@@ -358,6 +371,7 @@ const CustomOption = (componentProps) => {
             {...componentProps}
             aria-selected={isSelected}
             className={optionClass}
+            isDisabled={disabled}
             selectOption={selectOption}
             ref={innerRef}
             tabIndex={0}
@@ -383,6 +397,7 @@ const SelectNext = React.forwardRef(function SelectNext(
     const {
         alwaysShowRequiredIndicator,
         className,
+        disabled,
         dropdownMenuMaxHeight,
         dropdownMenuMinHeight,
         id,
@@ -450,6 +465,7 @@ const SelectNext = React.forwardRef(function SelectNext(
                 // @ts-ignore
                 dropdownMenuMaxHeight={dropdownMenuMaxHeight}
                 dropdownMenuMinHeight={dropdownMenuMinHeight}
+                isDisabled={disabled}
                 isSearchable={isSearchable}
                 menuPortalTarget={menuPortalTarget}
                 name={name}