Merge pull request #177 from ynput/develop

Release: fixes
ynput · Aug 20, 2024 · 9d0aaa5 · 9d0aaa5
2 parents 2d0af67 + a082c2c
commit 9d0aaa5
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 22 deletions.
diff --git a/src/Dropdowns/AssigneeSelect/AssigneeDropdownTemplate.tsx b/src/Dropdowns/AssigneeSelect/AssigneeDropdownTemplate.tsx
@@ -39,6 +39,7 @@ export interface AssigneeDropdownProps {
   fullName?: string
   avatarUrl?: string
   isSelected?: boolean
+  isMultiple: boolean
   mixedSelected: string[]
   multiSelect: boolean
   multipleOverride: boolean
@@ -54,6 +55,7 @@ export const AssigneeDropdownTemplate = ({
   avatarUrl,
   fullName,
   isSelected,
+  isMultiple,
   mixedSelected,
   multiSelect,
   multipleOverride,
@@ -81,9 +83,10 @@ export const AssigneeDropdownTemplate = ({
       <UserImage src={avatarUrl} fullName={fullName} name={name} size={size} />
       {fullName || name}
       {!!error && ' (missing)'}
-      {multiSelect && !multipleOverride && (mixedSelected?.includes(name) || isSelected) && (
-        <Icon icon={'close'} className="remove" />
-      )}
+      {multiSelect &&
+        isMultiple &&
+        !multipleOverride &&
+        (mixedSelected?.includes(name) || isSelected) && <Icon icon={'close'} className="remove" />}
     </RowStyled>
   )
 }
diff --git a/src/Dropdowns/AssigneeSelect/AssigneeSelect.stories.tsx b/src/Dropdowns/AssigneeSelect/AssigneeSelect.stories.tsx
@@ -53,7 +53,8 @@ export const MissingUser: Story = {
 export const Mixed: Story = {
   render: Template,
   args: {
-    value: selectedUsers,
+    value: [...selectedUsers, 'no-one'],
+    onSelectAll: undefined,
     isMultiple: true,
     multipleOverride: false,
   },

diff --git a/src/Dropdowns/AssigneeSelect/AssigneeSelect.tsx b/src/Dropdowns/AssigneeSelect/AssigneeSelect.tsx
@@ -110,6 +110,7 @@ export const AssigneeSelect = forwardRef<DropdownRef, AssigneeSelectProps>(
             mixedSelected={mixedSelected}
             multiSelect={multiSelect}
             multipleOverride={multipleOverride}
+            isMultiple={isMultiple}
           />
         )}
         onChange={(added, removed) => onChange && onChange(added, removed)}

diff --git a/src/Dropdowns/Dropdown/DefaultValueTemplate.tsx b/src/Dropdowns/Dropdown/DefaultValueTemplate.tsx
@@ -111,11 +111,7 @@ export const DefaultValueTemplate: FC<DefaultValueTemplateProps> = ({
         <>
           <ContentStyled>
             <ValueStyled style={{ opacity: 0.5 }}>
-              {value === null
-                ? nullPlaceholder || '(no value)'
-                : onClearNull
-                ? '(empty list)'
-                : placeholder}
+              {value === null ? nullPlaceholder || '(no value)' : placeholder}
             </ValueStyled>
           </ContentStyled>
           {onClearNull && (

diff --git a/src/Dropdowns/Dropdown/Dropdown.tsx b/src/Dropdowns/Dropdown/Dropdown.tsx
@@ -338,9 +338,10 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
 
     // if editable, merge current search into showOptions
     const [missingOptions, hasMissingOptions] = useMemo(() => {
+      const values = Array.from(new Set([...selected, ...mixedSelected]))
       // add in any values that are not in options
       const selectedNotInOptions =
-        selected?.filter((s) => !!s && !options.some((o) => o[dataKey] === s)) || []
+        values?.filter((s) => !!s && !options.some((o) => o[dataKey] === s)) || []
 
       const selectedNotInOptionsItems = selectedNotInOptions.map((s) => ({
         [labelKey]: s,
@@ -349,7 +350,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
       }))
 
       return [selectedNotInOptionsItems, !!selectedNotInOptions.length]
-    }, [selected, options])
+    }, [selected, mixedSelected, options])
 
     // has error controls the closed error state styles
     if (hasMissingOptions && error === undefined) {
@@ -510,7 +511,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
           .filter((o) => !disabledValues.includes(o))
           .filter((o) => o !== selectAllKey)
 
-        submitChange(allSelected, true)
+        submitChange(allSelected, multiSelectClose)
 
         if (typeof onSelectAll === 'function') onSelectAll(allSelected)
         return
@@ -964,6 +965,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(
                           {option.icon && <Icon icon={option.icon} />}
                           <span>{option[labelKey] || option[dataKey]}</span>
                           {multiSelect &&
+                            isMultiple &&
                             !multipleOverride &&
                             option[dataKey] !== selectAllKey &&
                             !![...mixedSelected, ...selected]?.includes(option[dataKey]) && (

diff --git a/src/EntityCard/EntityCard.tsx b/src/EntityCard/EntityCard.tsx
@@ -82,6 +82,7 @@ export interface EntityCardProps extends React.HTMLAttributes<HTMLDivElement> {
   statusOptions?: Status[]
   priorityOptions?: PriorityType[]
   editOnHover?: boolean
+  editAutoClose?: boolean
   // editing callbacks
   onAssigneeChange?: (added: string[], removed: string[]) => void
   onStatusChange?: (status: string[]) => void
@@ -131,6 +132,7 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
       statusOptions,
       priorityOptions,
       editOnHover,
+      editAutoClose,
       onAssigneeChange,
       onStatusChange,
       onPriorityChange,
@@ -156,11 +158,13 @@ export const EntityCard = forwardRef<HTMLDivElement, EntityCardProps>(
     })
 
     const closeEditors = () => {
-      Object.values(dropdownRefs.current).forEach((r) => {
-        if (r.current?.isOpen) {
-          r.current.close(true)
-        }
-      })
+      if (editAutoClose) {
+        Object.values(dropdownRefs.current).forEach((r) => {
+          if (r.current?.isOpen) {
+            r.current.close(true)
+          }
+        })
+      }
     }
 
     const handleEditableHover = (

diff --git a/src/Inputs/styles.tsx b/src/Inputs/styles.tsx
@@ -9,10 +9,6 @@ export const StyledInput = styled.input`
   max-height: var(--base-input-size);
   padding: 0 8px;
 
-  &:focus {
-    outline: 1px solid var(--md-sys-color-primary);
-  }
-
   &.error,
   &:invalid {
     border-color: var(--md-sys-color-error);
@@ -54,7 +50,7 @@ export const StyledToggleInput = styled.div`
     top: 50%;
     transform: translateY(-50%);
     color: var(--md-sys-color-outline);
-    &:hover { 
+    &:hover {
       color: var(--md-sys-color-on-surface);
     }
   }