FilterComboBoxに適用・キャンセルボタンを追加して即時反映されないようにする (#1744)

Author: noronaoki

.changeset/filter-combobox-update.md

@@ -0,0 +1,8 @@
+---
+"ingred-ui": patch
+---
+
+FilterComboBoxコンポーネントの改善:
+- 複数選択時の一時保存機能を追加
+- 適用・キャンセルボタンを追加
+- UI/UXの改善（区切り線の追加、タグ削除機能の修正） 

src/components/FilterComboBox/FilterComboBox.tsx

@@ -17,7 +17,10 @@ import {
   ContextMenu2Container,
   ContextMenu2TextInputItem,
   ContextMenu2CheckItem,
+  ContextMenu2ButtonControlsItem,
+  ContextMenu2SeparatorItem,
 } from "../ContextMenu2";
+import Button from "../Button";
 import Icon from "../Icon";
 import * as styled from "./styled";
 
@@ -29,6 +32,7 @@ type FilterTagInputProps = {
   onChange: (values: string[]) => void;
   onSelectChange: (index: number) => void;
 };
+
 export const FilterComboBox = ({
   values,
   options,
@@ -40,10 +44,13 @@ export const FilterComboBox = ({
   const [userValue, setUserValue] = useState("");
   const [userEnteredValue, setUserEnteredValue] = useState("");
   const [isComposing, setIsComposing] = useState(false);
+  const [tempValues, setTempValues] = useState<string[]>(values);
+  const [isOpen, setIsOpen] = useState(false);
 
   // タグリスト部分で、CSS の overflow が発生しているか否か
   const [isInlineOverflowing, setIsInlineOverflowing] = useState(false);
   const inlineFieldEl = useRef<HTMLDivElement>(null);
+
   // inlineFieldEl の大きさを監視して、
   // overflow したら isInlineOverflowing を true にする
   const checkInlineOverflow = useCallback(() => {
@@ -79,13 +86,13 @@ export const FilterComboBox = ({
 
   const handleSelect = useCallback(
     (value: string) => {
-      if (values.includes(value)) {
-        onChange(values.filter((v) => v !== value));
+      if (tempValues.includes(value)) {
+        setTempValues(tempValues.filter((v) => v !== value));
       } else {
-        onChange([...values, value]);
+        setTempValues([...tempValues, value]);
       }
     },
-    [values, onChange],
+    [tempValues],
   );
 
   const handleEnter = useCallback(() => {
@@ -125,15 +132,33 @@ export const FilterComboBox = ({
 
   const handleRemove = useCallback(
     (value: string) => {
-      onChange(values.filter((v) => v !== value));
+      const newValues = values.filter((v) => v !== value);
+      onChange(newValues);
     },
     [values, onChange],
   );
 
-  const handleOpenChange = useCallback(() => {
-    setUserValue("");
-    setUserEnteredValue("");
-  }, [setUserValue, setUserEnteredValue]);
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (open) {
+        setTempValues(values);
+      }
+      setUserValue("");
+      setUserEnteredValue("");
+    },
+    [values],
+  );
+
+  const handleApply = useCallback(() => {
+    onChange(tempValues);
+    setIsOpen(false);
+  }, [onChange, tempValues]);
+
+  const handleCancel = useCallback(() => {
+    setTempValues(values);
+    setIsOpen(false);
+  }, [values]);
 
   useEffect(() => {
     if (!window.ResizeObserver) return;
@@ -160,6 +185,7 @@ export const FilterComboBox = ({
       <styled.SelectContainer data-overflowing={isInlineOverflowing}>
         <ContextMenu2Container>
           <ContextMenu2
+            open={isOpen}
             trigger={
               <styled.Select type="button">
                 <styled.SelectIcon>
@@ -181,12 +207,22 @@ export const FilterComboBox = ({
             {filteredOptions.map((option) => (
               <ContextMenu2CheckItem
                 key={option[0]}
-                checked={values.includes(option[0])}
+                checked={tempValues.includes(option[0])}
+                closeOnChange={false}
                 onChange={() => handleSelect(option[0])}
               >
                 {option[0]}
               </ContextMenu2CheckItem>
             ))}
+            <ContextMenu2SeparatorItem />
+            <ContextMenu2ButtonControlsItem>
+              <Button size="small" color="clear" onClick={handleCancel}>
+                キャンセル
+              </Button>
+              <Button size="small" onClick={handleApply}>
+                適用
+              </Button>
+            </ContextMenu2ButtonControlsItem>
           </ContextMenu2>
         </ContextMenu2Container>
         <styled.TagList ref={inlineFieldEl}>

src/components/FilterComboBox/__tests__/__snapshots__/FilterComboBox.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`FileUploader component testing FileUploader 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       aria-label="フィルターのタイプを選ぶ"
-      class="sc-fLlhyt gvvYNu"
+      class="sc-fLlhyt jqpZx"
       type="button"
     >
       <span
@@ -42,17 +42,17 @@ exports[`FileUploader component testing FileUploader 1`] = `
       </span>
     </button>
     <div
-      class="sc-bBrHrO hCrcOQ"
+      class="sc-iIPllB bxLXfc"
       data-overflowing="false"
     >
       <button
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="sc-cxabCf mpIUd"
+        class="sc-ezWOiH lpjcvk"
         type="button"
       >
         <span
-          class="sc-llJcti kPwAVH"
+          class="sc-bZkfAO fZvvlw"
         >
           <span
             class="sc-bczRLJ gJuzRf"
@@ -70,7 +70,7 @@ exports[`FileUploader component testing FileUploader 1`] = `
         </span>
       </button>
       <div
-        class="sc-ivTmOn fQPpsz"
+        class="sc-gicCDI dQLHWf"
       >
         <span
           class="sc-hHLeRK igsLAy"

src/components/FilterComboBox/styled.tsx

@@ -9,6 +9,7 @@ export const SelectContainer = styled.div`
   width: calc(100% + 46px);
   height: 100%;
   margin-left: -46px;
+  background-color: ${colors.basic[100]};
 
   &::before {
     content: "";
@@ -64,7 +65,7 @@ export const Select = styled.button`
   height: 100%;
   padding: 0 8px 0 54px;
   border: 0;
-  background: transparent;
+  background-color: ${colors.basic[100]};
   outline-offset: -1px;
   color: ${colors.basic[900]};
   cursor: pointer;
@@ -74,6 +75,7 @@ export const Select = styled.button`
   //   z-index: 1;
   // }
 `;
+
 export const SelectIcon = styled.span`
   flex-shrink: 0;
   width: 18px;

src/components/FilterInputAbstract/__tests__/__snapshots__/FilterInputAbstract.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`FileUploader component testing FileUploader 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       aria-label="フィルターのタイプを選ぶ"
-      class="sc-fLlhyt gvvYNu"
+      class="sc-fLlhyt jqpZx"
       type="button"
     >
       <span

src/components/FilterInputAbstract/styled.tsx

@@ -69,7 +69,7 @@ export const DropDownTrigger = styled.button`
   border-right: 1px solid ${colors.basic[400]};
   outline-offset: -1px;
   color: #000;
-  background: transparent;
+  background: #fff;
   cursor: pointer;
 
   &:where(${FilterInputAbstract.toString()}[data-small="true"] *) {

src/components/FilterSelectInput/__tests__/__snapshots__/FilterSelectInput.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`FileUploader component testing FileUploader 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       aria-label="フィルターのタイプを選ぶ"
-      class="sc-fLlhyt gvvYNu"
+      class="sc-fLlhyt jqpZx"
       type="button"
     >
       <span

src/components/FilterTagInput/__tests__/__snapshots__/FilterTagInput.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`FileUploader component testing FileUploader 1`] = `
       aria-expanded="false"
       aria-haspopup="dialog"
       aria-label="フィルターのタイプを選ぶ"
-      class="sc-fLlhyt gvvYNu"
+      class="sc-fLlhyt jqpZx"
       type="button"
     >
       <span