smarthr-ui 22.0.0 → 22.2.1

package/esm/components/Base/Base.d.ts

@@ -2,16 +2,11 @@ import React, { HTMLAttributes, ReactNode } from 'react';
 declare type Props = {
     children: ReactNode;
     /** 角丸のサイズ */
-    radius?: RadiusKeys;
+    radius?: 's' | 'm';
     /** レイヤの重なり方向の高さ（影の付き方に影響する） */
     layer?: LayerKeys;
 };
-export declare type RadiusKeys = keyof typeof radiusMap;
 export declare type LayerKeys = keyof typeof layerMap;
-export declare const radiusMap: {
-    readonly s: "6px";
-    readonly m: "8px";
-};
 export declare const layerMap: {
     readonly 0: "LAYER0";
     readonly 1: "LAYER1";

package/esm/components/Base/Base.js

@@ -1,11 +1,7 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { useTheme } from '../../hooks/useTheme';
 import { useClassNames } from './useClassNames';
-export const radiusMap = {
-    s: '6px',
-    m: '8px',
-};
 export const layerMap = {
     0: 'LAYER0',
     1: 'LAYER1',
@@ -16,7 +12,15 @@ export const layerMap = {
 export const Base = forwardRef(({ radius = 'm', layer = 1, className = '', ...props }, ref) => {
     const themes = useTheme();
     const classNames = useClassNames();
-    return (React.createElement(Wrapper, { className: `${className} ${classNames.base.wrapper}`, themes: themes, "$radius": radiusMap[radius], "$layer": layerMap[layer], ref: ref, ...props }));
+    const $radius = useMemo(() => {
+        switch (radius) {
+            case 's':
+                return themes.radius.m;
+            case 'm':
+                return themes.radius.l;
+        }
+    }, [radius, themes.radius.l, themes.radius.m]);
+    return (React.createElement(Wrapper, { className: `${className} ${classNames.base.wrapper}`, themes: themes, "$radius": $radius, "$layer": layerMap[layer], ref: ref, ...props }));
 });
 const Wrapper = styled.div `
   ${({ themes: { color, shadow }, $radius, $layer }) => {

package/esm/components/Base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Base.js","sourceRoot":"","sources":["../../../src/components/Base/Base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,UAAU,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAS,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAa/C,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;CACA,CAAA;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;CACH,CAAA;AAIV,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7D,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAA;IACzB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,GAAG,SAAS,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,EACpD,MAAM,EAAE,MAAM,aACL,SAAS,CAAC,MAAM,CAAC,YAClB,QAAQ,CAAC,KAAK,CAAC,EACvB,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAIxB;IACE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;oBACM,MAAM,CAAC,MAAM,CAAC;uBACX,OAAO;0BACJ,KAAK,CAAC,KAAK;KAChC,CAAA;AACH,CAAC;CACF,CAAA"}
+{"version":3,"file":"Base.js","sourceRoot":"","sources":["../../../src/components/Base/Base.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAS,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAY/C,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;IACX,CAAC,EAAE,QAAQ;CACH,CAAA;AAIV,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,MAAM,GAAG,GAAG,EAAE,KAAK,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7D,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAA;IACzB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,QAAQ,MAAM,EAAE;YACd,KAAK,GAAG;gBACN,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;YACxB,KAAK,GAAG;gBACN,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAA;SACzB;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;IAE9C,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,GAAG,SAAS,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,EACpD,MAAM,EAAE,MAAM,aACL,OAAO,YACR,QAAQ,CAAC,KAAK,CAAC,EACvB,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAIxB;IACE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;oBACM,MAAM,CAAC,MAAM,CAAC;uBACX,OAAO;0BACJ,KAAK,CAAC,KAAK;KAChC,CAAA;AACH,CAAC;CACF,CAAA"}

package/esm/components/Base/index.d.ts

@@ -1,3 +1,3 @@
-export { Base, radiusMap } from './Base';
+export { Base } from './Base';
 export type { ElementProps as BaseElementProps } from './Base';
 export { DialogBase } from './DialogBase';

package/esm/components/Base/index.js

@@ -1,3 +1,3 @@
-export { Base, radiusMap } from './Base';
+export { Base } from './Base';
 export { DialogBase } from './DialogBase';
 //# sourceMappingURL=index.js.map

package/esm/components/Base/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Base/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/esm/components/Button/ButtonWrapper.js

@@ -123,7 +123,7 @@ function variantStyles(variant, theme) {
         `,
                 disabled: css `
           border-color: ${color.disableColor(color.BORDER)};
-          background-color: ${color.disableColor(color.WHITE)};
+          background-color: ${color.hoverColor(color.WHITE)};
           color: ${color.TEXT_DISABLED};
         `,
             };

package/esm/components/Button/ButtonWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonWrapper.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonWrapper.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ButtonWrapper.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonWrapper.tsx"],"names":[],"mappings":"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"}

package/esm/components/ComboBox/ComboBoxContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type ComboBoxContextType = {
+    listBoxClassNames: {
+        dropdownList: string;
+        addButton: string;
+        selectButton: string;
+        noItems: string;
+    };
+};
+export declare const ComboBoxContext: import("react").Context<ComboBoxContextType>;
+export {};

package/esm/components/ComboBox/ComboBoxContext.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+export const ComboBoxContext = createContext({
+    listBoxClassNames: {
+        dropdownList: '',
+        addButton: '',
+        selectButton: '',
+        noItems: '',
+    },
+});
+//# sourceMappingURL=ComboBoxContext.js.map

package/esm/components/ComboBox/ComboBoxContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxContext.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ComboBoxContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAWrC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,iBAAiB,EAAE;QACjB,YAAY,EAAE,EAAE;QAChB,SAAS,EAAE,EAAE;QACb,YAAY,EAAE,EAAE;QAChB,OAAO,EAAE,EAAE;KACZ;CACF,CAAC,CAAA"}

package/esm/components/ComboBox/ListBoxItem.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { ComboBoxOption } from './types';
+declare type Props<T> = {
+    option: ComboBoxOption<T>;
+    isActive: boolean;
+    onAdd: (option: ComboBoxOption<T>) => void;
+    onSelect: (option: ComboBoxOption<T>) => void;
+    onMouseOver: (option: ComboBoxOption<T>) => void;
+    activeRef: RefObject<HTMLButtonElement>;
+};
+declare function ListBoxItem<T>({ option, isActive, onAdd, onSelect, onMouseOver, activeRef }: Props<T>): JSX.Element;
+declare const Memoized: typeof ListBoxItem;
+export { Memoized as ListBoxItem };

package/esm/components/ComboBox/ListBoxItem.js

@@ -0,0 +1,88 @@
+import React, { useCallback, useContext } from 'react';
+import styled, { css } from 'styled-components';
+import { useTheme } from '../../hooks/useTheme';
+import { FaPlusCircleIcon } from '../Icon';
+import { ComboBoxContext } from './ComboBoxContext';
+function ListBoxItem({ option, isActive, onAdd, onSelect, onMouseOver, activeRef }) {
+    const className = isActive ? 'active' : '';
+    const { item, selected, isNew } = option;
+    const { label, disabled } = item;
+    const handleAdd = useCallback(() => {
+        onAdd(option);
+    }, [onAdd, option]);
+    const handleSelect = useCallback(() => {
+        onSelect(option);
+    }, [onSelect, option]);
+    const handleMouseOver = useCallback(() => {
+        onMouseOver(option);
+    }, [onMouseOver, option]);
+    const theme = useTheme();
+    const { listBoxClassNames: classNames } = useContext(ComboBoxContext);
+    return isNew ? (React.createElement(AddButton, { key: option.id, themes: theme, onClick: handleAdd, onMouseOver: handleMouseOver, id: option.id, role: "option", className: `${className} ${classNames.addButton}`, ref: isActive ? activeRef : undefined },
+        React.createElement(AddIcon, { color: theme.color.TEXT_LINK, themes: theme }),
+        React.createElement(AddText, { themes: theme },
+            "\u300C",
+            label,
+            "\u300D\u3092\u8FFD\u52A0"))) : (React.createElement(SelectButton, { key: option.id, type: "button", themes: theme, disabled: disabled, onClick: handleSelect, onMouseOver: handleMouseOver, id: option.id, role: "option", className: `${className} ${classNames.selectButton}`, "aria-selected": selected, ref: isActive ? activeRef : undefined }, label));
+}
+const typedMemo = React.memo;
+const Memoized = typedMemo(ListBoxItem);
+export { Memoized as ListBoxItem };
+const SelectButton = styled.button `
+  ${({ themes }) => {
+    const { fontSize, leading, spacingByChar, color } = themes;
+    return css `
+      display: block;
+      min-width: 100%;
+      border: none;
+      padding: ${spacingByChar(0.5)} ${spacingByChar(1)};
+      background-color: ${color.WHITE};
+      font-size: ${fontSize.M};
+      line-height: ${leading.NONE};
+      text-align: left;
+      cursor: pointer;
+
+      &.active {
+        background-color: ${color.hoverColor(color.WHITE)};
+        color: inherit;
+      }
+
+      &[aria-selected='true'] {
+        background-color: ${color.MAIN};
+        color: ${color.TEXT_WHITE};
+        &.active {
+          background-color: ${color.hoverColor(color.MAIN)};
+        }
+      }
+
+      &[disabled] {
+        color: ${color.TEXT_DISABLED};
+        cursor: not-allowed;
+      }
+    `;
+}}
+`;
+const AddButton = styled(SelectButton) `
+  display: flex;
+  align-items: center;
+  min-width: 100%;
+`;
+const AddIcon = styled(FaPlusCircleIcon) `
+  ${({ themes }) => {
+    const { spacingByChar } = themes;
+    return css `
+      position: relative;
+      top: -1px;
+      margin-right: ${spacingByChar(0.25)};
+    `;
+}}
+`;
+const AddText = styled.span `
+  ${({ themes }) => {
+    const { color } = themes;
+    return css `
+      color: ${color.TEXT_LINK};
+    `;
+}}
+`;
+//# sourceMappingURL=ListBoxItem.js.map

package/esm/components/ComboBox/ListBoxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBoxItem.js","sourceRoot":"","sources":["../../../src/components/ComboBox/ListBoxItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAS,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAWnD,SAAS,WAAW,CAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAY;IAC7F,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;IACxC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;IAEhC,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,KAAK,CAAC,MAAM,CAAC,CAAA;IACf,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;IAEnB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAClB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;IAEtB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,WAAW,CAAC,MAAM,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAA;IAEzB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAA;IAErE,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,oBAAC,SAAS,IACR,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,eAAe,EAC5B,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,GAAG,SAAS,IAAI,UAAU,CAAC,SAAS,EAAE,EACjD,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAErC,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,GAAI;QACxD,oBAAC,OAAO,IAAC,MAAM,EAAE,KAAK;;YAAI,KAAK;uCAAe,CACpC,CACb,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,YAAY,EACrB,WAAW,EAAE,eAAe,EAC5B,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,GAAG,SAAS,IAAI,UAAU,CAAC,YAAY,EAAE,mBACrC,QAAQ,EACvB,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAEpC,KAAK,CACO,CAChB,CAAA;AACH,CAAC;AACD,MAAM,SAAS,GAAmB,KAAK,CAAC,IAAI,CAAA;AAC5C,MAAM,QAAQ,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;AACvC,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,CAAA;AAElC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;IACjD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACf,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;IAE1D,OAAO,GAAG,CAAA;;;;iBAIG,aAAa,CAAC,GAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC;0BAC7B,KAAK,CAAC,KAAK;mBAClB,QAAQ,CAAC,CAAC;qBACR,OAAO,CAAC,IAAI;;;;;4BAKL,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;4BAK7B,KAAK,CAAC,IAAI;iBACrB,KAAK,CAAC,UAAU;;8BAEH,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC;;;;;iBAKzC,KAAK,CAAC,aAAa;;;KAG/B,CAAA;AACH,CAAC;CACF,CAAA;AACD,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;;;CAIrC,CAAA;AACD,MAAM,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAmB;IACvD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACf,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAA;IAEhC,OAAO,GAAG,CAAA;;;sBAGQ,aAAa,CAAC,IAAI,CAAC;KACpC,CAAA;AACH,CAAC;CACF,CAAA;AACD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAmB;IAC1C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;IAExB,OAAO,GAAG,CAAA;eACC,KAAK,CAAC,SAAS;KACzB,CAAA;AACH,CAAC;CACF,CAAA"}

package/esm/components/ComboBox/MultiComboBox.js

@@ -2,59 +2,67 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef, useState, } from
 import styled, { css } from 'styled-components';
 import { useTheme } from '../../hooks/useTheme';
 import { useOuterClick } from '../../hooks/useOuterClick';
+import { useId } from '../../hooks/useId';
 import { hasParentElementByClassName } from './multiComboBoxHelper';
-import { useClassNames } from './useClassNames';
+import { useMultiComboBoxClassNames } from './useClassNames';
 import { FaCaretDownIcon } from '../Icon';
-import { useListBox } from './useListBox';
+import { useOptions } from './useOptions';
+import { useFocusControl } from './useFocusControl';
 import { MultiSelectedItem } from './MultiSelectedItem';
-import { convertMatchableString } from './comboBoxHelper';
+import { useListBox } from './useListBox';
+import { ComboBoxContext } from './ComboBoxContext';
 export function MultiComboBox({ items, selectedItems, name, disabled = false, error = false, creatable = false, placeholder = '', isLoading, selectedItemEllipsis, width = 'auto', inputValue: controlledInputValue, className = '', onChange, onChangeInput, onAdd, onDelete, onSelect, onChangeSelected, onFocus, onBlur, ...props }) {
     const theme = useTheme();
-    const classNames = useClassNames().multi;
+    const classNames = useMultiComboBoxClassNames();
     const outerRef = useRef(null);
-    const inputRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const isInputControlled = useMemo(() => controlledInputValue !== undefined, [controlledInputValue]);
     const [uncontrolledInputValue, setUncontrolledInputValue] = useState('');
     const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue;
     const [isComposing, setIsComposing] = useState(false);
-    const selectedLabels = useMemo(() => selectedItems.map(({ label }) => label), [selectedItems]);
-    const filteredItems = useMemo(() => items.filter(({ label }) => {
-        if (selectedLabels.includes(label))
-            return false;
-        if (!inputValue)
-            return true;
-        return convertMatchableString(label).includes(convertMatchableString(inputValue));
-    }), [inputValue, items, selectedLabels]);
-    const isDuplicate = items.some((item) => item.label === inputValue);
-    const hasSelectableExactMatch = filteredItems.some((item) => item.label === inputValue);
-    const { renderListBox, calculateDropdownRect, resetActiveOptionIndex, handleInputKeyDown, listBoxRef, aria, } = useListBox({
-        items: filteredItems,
+    const { options } = useOptions({
+        items,
+        selected: selectedItems,
+        creatable,
         inputValue,
-        onAdd,
-        onSelect: (selected) => {
+    });
+    const handleDelete = useCallback((item) => {
+        onDelete && onDelete(item);
+        onChangeSelected &&
+            onChangeSelected(selectedItems.filter((selected) => selected.label !== item.label || selected.value !== item.value));
+    }, [onChangeSelected, onDelete, selectedItems]);
+    const handleSelect = useCallback((selected) => {
+        const matchedSelectedItem = selectedItems.find((item) => item.label === selected.label && item.value === selected.value);
+        if (matchedSelectedItem !== undefined) {
+            if (matchedSelectedItem.deletable !== false) {
+                handleDelete(selected);
+            }
+        }
+        else {
             onSelect && onSelect(selected);
             onChangeSelected && onChangeSelected(selectedItems.concat(selected));
-        },
+        }
+    }, [handleDelete, onChangeSelected, onSelect, selectedItems]);
+    const { renderListBox, activeOption, handleKeyDown: handleListBoxKeyDown, listBoxId, listBoxRef, } = useListBox({
+        options,
+        onAdd,
+        onSelect: handleSelect,
         isExpanded: isFocused,
-        isAddable: creatable && !!inputValue && !isDuplicate,
-        isDuplicate: creatable && !!inputValue && isDuplicate && !hasSelectableExactMatch,
-        hasNoMatch: (!creatable && filteredItems.length === 0) ||
-            (creatable && filteredItems.length === 0 && !inputValue),
         isLoading,
-        classNames: classNames.listBox,
+        triggerRef: outerRef,
     });
+    const { deletionButtonRefs, inputRef, focusPrevDeletionButton, focusNextDeletionButton, resetDeletionButtonFocus, } = useFocusControl(selectedItems.length);
     const focus = useCallback(() => {
         onFocus && onFocus();
         setIsFocused(true);
-        resetActiveOptionIndex();
-    }, [onFocus, resetActiveOptionIndex]);
+    }, [onFocus]);
     const blur = useCallback(() => {
         if (!isFocused)
             return;
         onBlur && onBlur();
         setIsFocused(false);
-    }, [isFocused, onBlur]);
+        resetDeletionButtonFocus();
+    }, [isFocused, onBlur, resetDeletionButtonFocus]);
     const caretIconColor = useMemo(() => {
         if (isFocused)
             return theme.color.TEXT_BLACK;
@@ -62,9 +70,7 @@ export function MultiComboBox({ items, selectedItems, name, disabled = false, er
             return theme.color.TEXT_DISABLED;
         return theme.color.TEXT_GREY;
     }, [disabled, isFocused, theme]);
-    useOuterClick([outerRef, listBoxRef], useCallback(() => {
-        blur();
-    }, [blur]));
+    useOuterClick([outerRef, listBoxRef], blur);
     useLayoutEffect(() => {
         if (!isInputControlled) {
             setUncontrolledInputValue('');
@@ -72,35 +78,76 @@ export function MultiComboBox({ items, selectedItems, name, disabled = false, er
         if (isFocused && inputRef.current) {
             inputRef.current.focus();
         }
-    }, [isFocused, isInputControlled, selectedItems]);
-    useLayoutEffect(() => {
-        // ドロップダウン表示時に位置を計算する
-        if (outerRef.current && isFocused) {
-            calculateDropdownRect(outerRef.current);
+    }, [inputRef, isFocused, isInputControlled, selectedItems]);
+    const handleKeyDown = useCallback((e) => {
+        if (isComposing) {
+            return;
         }
-        // 選択済みアイテムによってコンボボックスの高さが変わりうるので selectedItems を依存に含める
-    }, [calculateDropdownRect, isFocused, selectedItems]);
-    return (React.createElement(Container, { ...props, themes: theme, width: width, ref: outerRef, className: `${className} ${classNames.wrapper}`, onClick: (e) => {
-            if (!hasParentElementByClassName(e.target, classNames.deleteButton) &&
-                !disabled &&
-                !isFocused) {
-                focus();
-            }
-        }, onKeyDown: (e) => {
-            if (e.key === 'Escape' || e.key === 'Esc') {
-                e.stopPropagation();
-                blur();
+        else if (e.key === 'Escape' || e.key === 'Esc') {
+            e.stopPropagation();
+            blur();
+        }
+        else if (e.key === 'Tab') {
+            if (isFocused) {
+                // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく
+                inputRef.current?.focus();
             }
-        }, role: "combobox", "aria-owns": aria.listBoxId, "aria-haspopup": "listbox", "aria-expanded": isFocused, "aria-invalid": error || undefined, "aria-disabled": disabled },
-        React.createElement(InputArea, { themes: theme },
-            React.createElement(List, { themes: theme },
-                selectedItems.map((selectedItem) => (React.createElement("li", { key: selectedItem.label },
-                    React.createElement(MultiSelectedItem, { item: selectedItem, disabled: disabled, onDelete: () => {
-                            onDelete && onDelete(selectedItem);
-                            onChangeSelected &&
-                                onChangeSelected(selectedItems.filter((selected) => selected.label !== selectedItem.label ||
-                                    selected.value !== selectedItem.value));
-                        }, enableEllipsis: selectedItemEllipsis })))),
+            blur();
+        }
+        else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+            e.stopPropagation();
+            focusPrevDeletionButton();
+        }
+        else if (e.key === 'Right' || e.key === 'ArrowRight') {
+            e.stopPropagation();
+            focusNextDeletionButton();
+        }
+        else {
+            e.stopPropagation();
+            inputRef.current?.focus();
+            resetDeletionButtonFocus();
+        }
+        handleListBoxKeyDown(e);
+    }, [
+        blur,
+        focusNextDeletionButton,
+        focusPrevDeletionButton,
+        handleListBoxKeyDown,
+        inputRef,
+        isComposing,
+        isFocused,
+        resetDeletionButtonFocus,
+    ]);
+    const handleInputKeyDown = useCallback((e) => {
+        if (e.key === 'Down' || e.key === 'ArrowDown' || e.key === 'Up' || e.key === 'ArrowUp') {
+            // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない
+            e.preventDefault();
+        }
+    }, []);
+    const contextValue = useMemo(() => ({
+        listBoxClassNames: classNames.listBox,
+    }), [classNames.listBox]);
+    const wrapperClassNames = [
+        className,
+        isFocused && 'focused',
+        error && 'invalid',
+        disabled && 'disabled',
+        classNames.wrapper,
+    ]
+        .filter((text) => text !== false && text !== '')
+        .join(' ');
+    const selectedListId = useId();
+    return (React.createElement(ComboBoxContext.Provider, { value: contextValue },
+        React.createElement(Container, { ...props, themes: theme, width: width, ref: outerRef, className: wrapperClassNames, onClick: (e) => {
+                if (!hasParentElementByClassName(e.target, classNames.deleteButton) &&
+                    !disabled &&
+                    !isFocused) {
+                    focus();
+                }
+            }, onKeyDown: handleKeyDown, role: "group" },
+            React.createElement(InputArea, { themes: theme },
+                React.createElement(SelectedList, { id: selectedListId, "aria-label": "\u9078\u629E\u6E08\u307F\u30A2\u30A4\u30C6\u30E0", className: classNames.selectedList }, selectedItems.map((selectedItem, i) => (React.createElement("li", { key: `${selectedItem.label}-${selectedItem.value}` },
+                    React.createElement(MultiSelectedItem, { item: selectedItem, disabled: disabled, onDelete: handleDelete, enableEllipsis: selectedItemEllipsis, buttonRef: deletionButtonRefs[i] }))))),
                 React.createElement(InputWrapper, { className: isFocused ? undefined : 'hidden' },
                     React.createElement(Input, { type: "text", name: name, value: inputValue, disabled: disabled, ref: inputRef, themes: theme, onChange: (e) => {
                             if (onChange)
@@ -111,24 +158,15 @@ export function MultiComboBox({ items, selectedItems, name, disabled = false, er
                                 setUncontrolledInputValue(e.currentTarget.value);
                             }
                         }, onFocus: () => {
+                            resetDeletionButtonFocus();
                             if (!isFocused) {
                                 focus();
                             }
-                        }, onCompositionStart: () => setIsComposing(true), onCompositionEnd: () => setIsComposing(false), onKeyDown: (e) => {
-                            if (isComposing) {
-                                return;
-                            }
-                            if (e.key === 'Tab') {
-                                blur();
-                                return;
-                            }
-                            handleInputKeyDown(e);
-                        }, autoComplete: "off", "aria-activedescendant": aria.activeDescendant, "aria-autocomplete": "list", "aria-controls": aria.listBoxId, className: classNames.input })),
-                selectedItems.length === 0 && placeholder && !isFocused && (React.createElement("li", null,
-                    React.createElement(Placeholder, { themes: theme, className: classNames.placeholder }, placeholder))))),
-        React.createElement(Suffix, { themes: theme },
-            React.createElement(FaCaretDownIcon, { color: caretIconColor })),
-        renderListBox()));
+                        }, onCompositionStart: () => setIsComposing(true), onCompositionEnd: () => setIsComposing(false), onKeyDown: handleInputKeyDown, autoComplete: "off", tabIndex: 0, role: "combobox", "aria-activedescendant": activeOption?.id, "aria-controls": `${listBoxId} ${selectedListId}`, "aria-haspopup": "listbox", "aria-expanded": isFocused, "aria-invalid": error || undefined, "aria-disabled": disabled, "aria-autocomplete": "list", className: classNames.input })),
+                selectedItems.length === 0 && placeholder && !isFocused && (React.createElement(Placeholder, { themes: theme, className: classNames.placeholder }, placeholder))),
+            React.createElement(Suffix, { themes: theme },
+                React.createElement(FaCaretDownIcon, { color: caretIconColor })),
+            renderListBox())));
 }
 const Container = styled.div `
   ${({ themes, width }) => {
@@ -144,15 +182,15 @@ const Container = styled.div `
       background-color: ${color.WHITE};
       cursor: text;
 
-      &[aria-expanded='true'] {
+      &.focused {
         box-shadow: ${shadow.OUTLINE};
       }
 
-      &[aria-invalid='true'] {
+      &.invalid {
         border-color: ${color.DANGER};
       }
 
-      &[aria-disabled='true'] {
+      &.disabled {
         background-color: ${color.COLUMN};
         cursor: not-allowed;
       }
@@ -162,33 +200,24 @@ const Container = styled.div `
 const InputArea = styled.div `
   ${({ themes: { spacingByChar } }) => css `
     flex: 1;
-    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: ${spacingByChar(0.5)};
+    min-height: calc(1em + ${spacingByChar(0.5)} * 2);
     max-height: 300px;
-    padding-left: ${spacingByChar(0.5)};
+    margin: ${spacingByChar(0.25)} ${spacingByChar(0.5)};
+    overflow-y: auto;
   `}
 `;
-const smallMargin = 6.5;
-const borderWidth = 1;
-const List = styled.ul `
-  ${({ themes }) => {
-    const { fontSize: { pxToRem }, spacingByChar, } = themes;
-    return css `
-      display: flex;
-      flex-wrap: wrap;
-      margin: ${pxToRem(smallMargin - borderWidth)} 0 0;
-      padding: 0;
-      list-style: none;
-
-      > li {
-        min-height: 27px;
-        max-width: calc(100% - ${spacingByChar(0.5)});
-        margin-right: ${spacingByChar(0.5)};
-        margin-bottom: ${pxToRem(smallMargin - borderWidth)};
-      }
-    `;
-}}
+const SelectedList = styled.ul `
+  display: contents;
+  list-style: none;
+  li {
+    /** 選択済みアイテムのラベルの省略表示のために幅を計算させる */
+    min-width: 0;
+  }
 `;
-const InputWrapper = styled.li `
+const InputWrapper = styled.div `
   &.hidden {
     position: absolute;
     opacity: 0;
@@ -196,13 +225,16 @@ const InputWrapper = styled.li `
   }
 
   flex: 1;
+  display: flex;
+  align-items: center;
 `;
 const Input = styled.input `
   ${({ themes }) => {
-    const { fontSize } = themes;
+    const { fontSize, spacingByChar } = themes;
     return css `
       min-width: 80px;
       width: 100%;
+      min-height: calc(1em + ${spacingByChar(0.5)} * 2);
       border: none;
       font-size: ${fontSize.M};
       box-sizing: border-box;
@@ -218,9 +250,9 @@ const Placeholder = styled.p `
     const { color, fontSize } = themes;
     return css `
       margin: 0;
+      align-self: center;
       color: ${color.TEXT_GREY};
       font-size: ${fontSize.M};
-      line-height: 25px;
     `;
 }}
 `;