@acusti/dropdown 1.1.0 → 1.2.0

package/README.md

@@ -325,7 +325,8 @@ type Props = {
      * multi-select. Defaults to !hasItems: a menu closes on submit, while a
      * hasItems={false} dialog stays open. In a hasItems={false} dropdown, a
      * submit is a form in the body being submitted, or Enter in a
-     * single-line input there that no form owns.
+     * single-line input that appears in the body with no form or in the
+     * trigger.
      */
     keepOpenOnSubmit?: boolean;
     /**
@@ -726,12 +727,17 @@ while it’s open, as when it opened on hover. Escape closes the dropdown
 unless focus is in a text field (a text input, a textarea, or an editable
 element). On the trigger, Space and Enter open the dropdown and, unless
 focus is in a text field or a checkbox there, close it again, as a click
-there does.
+there does. Once it is open, Enter in a textarea or an editable element
+used as the trigger adds a line break there. Enter in a single-line input
+used as the trigger is a submit, whether or not a form owns it: the
+dropdown takes the key, so a form around the trigger isn’t submitted from
+that input while the dropdown is open.
 
 A `hasItems={false}` dropdown stays open until it is dismissed. Pass
 `keepOpenOnSubmit={false}` to close it when its content is submitted. A
 submit is a form in the body being submitted, by Enter in one of its inputs
-or by its submit button, or Enter in a single-line input that no form owns:
+or by its submit button, or Enter in a single-line input, either one in the
+body that no form owns or one used as the trigger:
 
 ```tsx
 <Dropdown hasItems={false} keepOpenOnSubmit={false}>
@@ -753,9 +759,9 @@ empty. To keep it open after a submit that your own checks reject, call
 check that finishes later, such as a server round trip or a form library
 that validates asynchronously, can’t keep it open.
 
-Enter in an input that no form owns counts the way a form would count it:
-not when a handler has prevented the key, as a combobox does to pick an
-option, and not when it commits an IME composition.
+Enter in such an input, in the body or the trigger, counts the way a form
+would count it: not when a handler has prevented the key, as a combobox
+does to pick an option, and not when it commits an IME composition.
 
 When a submit closes the dropdown while focus is in its body, focus returns
 to the trigger, as it does on Escape.
@@ -1330,6 +1336,13 @@ highlight into it.
   input, or one inside a custom trigger), where they move the caret instead
 - **Type characters**: Jump to the best-matching item in the current level
 
+While text is being composed with an IME, in a searchable dropdown’s input
+or a text field in a custom trigger, the dropdown ignores every keydown
+that the browser reports as part of the composition. With a Japanese IME,
+the Enter that commits the text doesn’t submit (the next Enter is an
+ordinary one), and the arrow keys and Escape don’t move the highlight or
+close the dropdown. Other IMEs can report their keys differently.
+
 For accessibility, the component focuses on semantic HTML structure and
 keyboard navigation. It works best when you use appropriate HTML elements
 in your dropdown content (like `<ul>` and `<li>` for lists, `<button>`

package/dist/Dropdown.d.ts

@@ -101,7 +101,8 @@ export type Props = {
      * multi-select. Defaults to !hasItems: a menu closes on submit, while a
      * hasItems={false} dialog stays open. In a hasItems={false} dropdown, a
      * submit is a form in the body being submitted, or Enter in a
-     * single-line input there that no form owns.
+     * single-line input that appears in the body with no form or in the
+     * trigger.
      */
     keepOpenOnSubmit?: boolean;
     /**

package/dist/Dropdown.js

@@ -4,14 +4,12 @@ import clsx from "clsx";
 import { Children, Fragment, cloneElement, createContext, isValidElement, useContext, useEffect, useEffectEvent, useId, useLayoutEffect, useReducer, useRef, useState } from "react";
 import { getBestMatch } from "@acusti/matchmaking";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/context.ts
+// src/context.ts
 var DropdownContext = createContext(null);
 var MenubarContext = createContext(null);
-//#endregion
-//#region src/Dropdown.css?inline
+// src/Dropdown.css?inline
 var Dropdown_default = ":root{--uktdd-font-family:system-ui, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif;--uktdd-color-scheme:inherit;--uktdd-body-bg-color:Canvas;--uktdd-body-bg-color-hover:Highlight;--uktdd-body-color-hover:HighlightText;--uktdd-body-bg-color-selected:color-mix(in oklab, currentColor 6%, transparent);--uktdd-body-box-shadow:0 8px 18px #00000040;--uktdd-body-border-color:color-mix(in oklab, currentColor 15%, transparent);--uktdd-body-buffer:10px;--uktdd-body-max-height:calc(100dvh - var(--uktdd-body-buffer));--uktdd-body-max-width:calc(100dvw - var(--uktdd-body-buffer));--uktdd-body-min-height:30px;--uktdd-body-pad-block-start:.5em;--uktdd-body-pad-block-end:.5em;--uktdd-body-pad-inline-start:.6875em;--uktdd-body-pad-inline-end:.6875em;--uktdd-body-min-width:min(50px, 100%);--uktdd-body-position-area:block-end span-inline-end;--uktdd-body-position-try-fallback-1:--uktdd-top-start;--uktdd-body-position-try-fallback-2:--uktdd-bottom-end;--uktdd-body-fill-fallbacks:--uktdd-fill-bottom, --uktdd-fill-top;--uktdd-body-gap:0px;--uktdd-body-color:CanvasText;--uktdd-body-color-path:currentColor;--uktdd-label-gap:.625em;--uktdd-submenu-position-area:inline-end span-block-end;--uktdd-submenu-position-try-fallback:--uktdd-submenu-inline-start;--uktdd-submenu-fill-fallbacks:--uktdd-submenu-fill, --uktdd-submenu-fill flip-inline;--uktdd-submenu-gap:0px;--uktdd-menubar-trigger-bg-color-active:color-mix(in oklab, currentColor 12%, transparent)}.uktdropdown,.uktdropdown-trigger{font-family:var(--uktdd-font-family)}.uktdropdown{anchor-scope:--uktdd-anchor;width:max-content}.uktdropdown.is-disabled{pointer-events:none}.uktdropdown>*{cursor:default}.uktdropdown>:first-child{anchor-name:--uktdd-anchor}.uktdropdown-label{align-items:center;gap:var(--uktdd-label-gap);display:flex}.uktdropdown-body{box-sizing:border-box;position-anchor:--uktdd-anchor;position-area:var(--uktdd-body-position-area);position-try-fallbacks:var(--uktdd-body-position-try-fallback-1), var(--uktdd-body-position-try-fallback-2), var(--uktdd-body-fill-fallbacks);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);min-inline-size:min(var(--uktdd-body-min-width), var(--uktdd-body-max-width));max-inline-size:var(--uktdd-body-max-width);inline-size:max-content;color:var(--uktdd-body-color);color-scheme:var(--uktdd-color-scheme);background-color:var(--uktdd-body-bg-color);box-shadow:var(--uktdd-body-box-shadow);flex-direction:column;display:flex;position:fixed;overflow:hidden}.uktdropdown-body.has-items{-webkit-user-select:none;user-select:none}.uktdropdown-body [aria-selected=true]{background-color:var(--uktdd-body-bg-color-selected)}@media (forced-colors:active){.uktdropdown-body [aria-selected=true]{outline-offset:-2px;outline:2px solid}}.uktdropdown-body [data-ukt-active]{background-color:var(--uktdd-body-bg-color-hover);color:var(--uktdd-body-color-hover)}:is(.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu] [data-ukt-active]),.uktdropdown-body [data-ukt-active]:has([data-ukt-submenu]:hover)){background-color:var(--uktdd-body-bg-color-path,color-mix(in oklab, var(--uktdd-body-color) 12%, var(--uktdd-body-bg-color)));color:var(--uktdd-body-color-path)}.uktdropdown-body [data-ukt-item][aria-disabled=true]{opacity:.5;pointer-events:none}.uktdropdown-body [data-ukt-item]{anchor-scope:--uktdd-submenu-anchor}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]{padding-inline-end:2em;position:relative}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:after{content:\"\";border-block-start:.14em solid;border-inline-end:.14em solid;block-size:.3em;inline-size:.3em;position:absolute;inset-block-start:50%;inset-inline-end:.9em;translate:0 -50%;rotate:45deg}.uktdropdown-body :is([data-ukt-item],[data-ukt-value])[aria-haspopup=menu]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{rotate:-45deg}.uktdropdown-body [data-ukt-item][aria-expanded=true]{anchor-name:--uktdd-submenu-anchor}.uktdropdown-body [data-ukt-submenu]:not([popover]){display:none}.uktdropdown-body [data-ukt-submenu]{box-sizing:border-box;border:1px solid var(--uktdd-body-border-color);block-size:auto;color:var(--uktdd-body-color);position-anchor:--uktdd-submenu-anchor;position-area:var(--uktdd-submenu-position-area);position-try-fallbacks:var(--uktdd-submenu-position-try-fallback), var(--uktdd-submenu-fill-fallbacks);z-index:2;margin-block:0;margin-inline:var(--uktdd-submenu-gap);--uktdd-body-gap:0px;padding-block:var(--uktdd-body-pad-block-start) var(--uktdd-body-pad-block-end);padding-inline:var(--uktdd-body-pad-inline-start) var(--uktdd-body-pad-inline-end);inline-size:max-content;max-inline-size:var(--uktdd-body-max-width);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height));max-block-size:var(--uktdd-body-max-height);overscroll-behavior:contain;background-color:var(--uktdd-body-bg-color);box-shadow:var(--uktdd-body-box-shadow);list-style:none;position:fixed;inset:auto;overflow:auto}div.uktdropdown-body{block-size:auto;margin-block:var(--uktdd-body-gap);border:1px solid var(--uktdd-body-border-color);margin-inline:0;padding:0;inset:auto}.uktmenubar{width:max-content;font-family:var(--uktdd-font-family);align-items:stretch;display:flex}.uktmenubar .uktdropdown.is-open .uktdropdown-trigger{box-shadow:inset 0 0 0 100vmax var(--uktdd-menubar-trigger-bg-color-active)}.uktdropdown-content{box-sizing:border-box;overscroll-behavior:contain;min-block-size:0;padding-block:var(--uktdd-body-pad-block-start) var(--uktdd-body-pad-block-end);padding-inline:var(--uktdd-body-pad-inline-start) var(--uktdd-body-pad-inline-end);overflow:auto}@position-try --uktdd-noop{}@position-try --uktdd-top-start{position-area:block-start span-inline-end}@position-try --uktdd-bottom-start{position-area:block-end span-inline-end}@position-try --uktdd-bottom-end{position-area:block-end span-inline-start}@position-try --uktdd-top-end{position-area:block-start span-inline-start}@position-try --uktdd-submenu-inline-start{position-area:inline-start span-block-end}@position-try --uktdd-fill-bottom{position-area:block-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height), calc((100dvb - anchor-size(block)) / 2 - var(--uktdd-body-gap) * 2));justify-self:anchor-center}@position-try --uktdd-fill-top{position-area:block-start;block-size:calc(100% - var(--uktdd-body-gap) * 2);min-block-size:min(var(--uktdd-body-min-height), var(--uktdd-body-max-height), calc((100dvb - anchor-size(block)) / 2 - var(--uktdd-body-gap) * 2));justify-self:anchor-center}@position-try --uktdd-fill{block-size:calc(100% - var(--uktdd-body-gap) * 2)}@position-try --uktdd-submenu-fill{position-area:inline-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);align-self:anchor-center}@position-try --uktdd-fill-cover{position-area:span-all span-inline-end;block-size:calc(100% - var(--uktdd-body-gap) * 2);align-self:anchor-center}";
-//#endregion
-//#region src/helpers.ts
+// src/helpers.ts
 var BODY_SELECTOR = ".uktdropdown-body";
 var ITEM_SELECTOR = "[data-ukt-item], [data-ukt-value]";
 var SUBMENU_SELECTOR = "[data-ukt-submenu]";
@@ -28,7 +26,9 @@ var isFormlessTextInput = (element) => {
 	const { form, type } = element;
 	return form == null && !NON_TEXT_INPUT_TYPES.includes(type);
 };
-var isSubmitKey = (event) => event.key === "Enter" && !event.defaultPrevented && !event.isComposing && event.keyCode !== 229;
+var isMultilineTextField = (element) => element.tagName === "TEXTAREA" || element.isContentEditable;
+var isIMEKeyEvent = (event) => event.isComposing || event.keyCode === 229;
+var isSubmitKey = (event) => event.key === "Enter" && !event.defaultPrevented;
 var getLevelRoot = (element) => element.closest(SUBMENU_SELECTOR);
 var getSubmenuOfItem = (item) => {
 	const submenu = item.querySelector(SUBMENU_SELECTOR);
@@ -317,8 +317,7 @@ var isPointInTriangle = (p, a, b, c) => {
 	const d3 = cross(p, c, a);
 	return !((d1 < 0 || d2 < 0 || d3 < 0) && (d1 > 0 || d2 > 0 || d3 > 0));
 };
-//#endregion
-//#region src/Menubar.tsx
+// src/Menubar.tsx
 var compareDocumentOrder = (a, b) => {
 	if (a.element === b.element) return 0;
 	const position = a.element.compareDocumentPosition(b.element);
@@ -519,8 +518,7 @@ function _temp2(member_3) {
 function _temp(count) {
 	return count + 1;
 }
-//#endregion
-//#region src/Dropdown.tsx
+// src/Dropdown.tsx
 var CHILDREN_ERROR = "Dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
 var CLICKABLE_SELECTOR = "button, a[href], input[type=\"button\"], input[type=\"submit\"]";
 var TEXT_INPUT_SELECTOR = `input${NON_TEXT_INPUT_TYPES.map((type) => `:not([type=${type}])`).join("")},textarea`;
@@ -1259,6 +1257,7 @@ function RootDropdown(t0) {
 			const { altKey, ctrlKey, key: key_0, metaKey } = event_7;
 			const eventTarget_2 = event_7.target;
 			if (!dropdownElement) return;
+			if (isIMEKeyEvent(event_7)) return;
 			const onEventHandled = () => {
 				event_7.stopPropagation();
 				event_7.preventDefault();
@@ -1311,7 +1310,7 @@ function RootDropdown(t0) {
 						if (!event_7.repeat) closeDropdown();
 						return;
 					}
-					if (key_0 === " ") return;
+					if (isMultilineTextField(eventTarget_2) || !isSubmitKey(event_7)) return;
 				} else if (isTargetUsingKeyEvents || !eventTarget_2.contains(dropdownElement)) return;
 			}
 			if (key_0 === "Enter" || key_0 === " " && !inputElementRef.current) {
@@ -1885,7 +1884,6 @@ function SubmenuDropdown(props) {
 	} else t5 = $[20];
 	return t5;
 }
-//#endregion
 export { Menubar, Dropdown as default };
 
 //# sourceMappingURL=Dropdown.js.map