@ticatec/uniface-element 5.0.0 → 5.0.1

package/dist/form/color_picker/ColorPicker.svelte

@@ -1,58 +1,173 @@
 <script lang="ts">
 
-
-    import type {OnChangeHandler} from "../../types";
     import CommonPicker from "../common_editor/CommonPicker.svelte";
+    import type CommonFieldProps from "../common_editor/CommonFieldProps";
 
-    //type OnActionHandler = () => void;
+    interface Props extends CommonFieldProps {
+        value?: string;
+    }
 
-    //export let showHex = true;
-    //export let showRgb = false;
+    // The manually-typed value must resolve to exactly #RRGGBB. An 8-digit #RRGGBBAA
+    // form was supported briefly, but <input type="color"> has no concept of alpha —
+    // the swatch always showed just the RGB portion and nothing in the UI ever
+    // rendered the transparency, so the last 2 digits had no visible effect. Dropped
+    // rather than half-implemented; revisit with a real alpha-aware swatch (checkered
+    // background + rgba preview) if this is needed later.
+    const HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
+    const DEFAULT_SWATCH = '#000000';
+
+    // CommonPicker always renders its own internal <input> in the non-readonly branch,
+    // even when a `children` snippet is also supplied — it doesn't apply the same
+    // "children replaces the default input" rule that its readonly branch does. Every
+    // other consumer works around this by never passing `children` in the first place
+    // (DatePicker, OptionsSelect...) except OptionsMultiSelect, which needs custom
+    // content (its tag list) the same way ColorPicker needs its swatch+hex layout —
+    // it hides CommonPicker's own input via `input$style` (shrink to 1x1, transparent,
+    // click-through) so only the custom children are visible. Same fix here: without
+    // this, edit mode showed CommonPicker's own empty input fighting for space with our
+    // swatch, while readonly mode (which only renders `children`) looked correct.
+    const HIDDEN_INTERNAL_INPUT_STYLE = 'position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none';
+
+    let {
+        variant,
+        theme,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        value = $bindable<string | undefined>("#000000"),
+        style,
+        placeholder,
+        error,
+        tooltip,
+        onchange,
+        onfocus,
+        onblur
+    }: Props = $props();
+
+    let editor: HTMLInputElement | undefined = $state();
+    let textInput: HTMLInputElement | undefined = $state();
+
+    // Editing buffer for the manual hex field, kept separate from `value` so the user
+    // can type through transient/incomplete states (e.g. "#3b8") without every
+    // keystroke being validated against the full #RRGGBB format — validation only
+    // happens on commit (blur / Enter).
+    let textValue = $state(value ?? '');
+
+    $effect(() => {
+        textValue = value ?? '';
+    });
+
+    let swatchValue = $derived(value && HEX_PATTERN.test(value) ? value : DEFAULT_SWATCH);
+
+    export const focus = () => {
+        editor?.focus();
+    }
 
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let compact: boolean = false;
-    export let value: any = "#ff3e00";
-    export let style: string = '';
-    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    const clean = () => {
+        value = undefined;
+        onchange?.(undefined);
+    }
 
+    const handleActionIconClick = () => {
+        if (!readonly && !disabled) {
+            editor?.click();
+        }
+    }
 
-    let oldValue = value;
+    const handleSwatchChange = (event: Event) => {
+        const newValue = (event.target as HTMLInputElement).value;
+        value = newValue;
+        onchange?.(newValue);
+    }
 
-    $: if (oldValue != value) {
-        oldValue = value;
+    // The native color picker dialog opens on `click`, and preventing the default
+    // action here blocks it — this is the only reliable way to make the swatch
+    // non-interactive for `readonly`, since <input type="color"> ignores the
+    // `readonly` attribute entirely. Using the native `disabled` attribute instead
+    // would work too, but it also greys the swatch out, which conflates readonly
+    // with disabled (see the component README: readonly stays fully visible,
+    // disabled is dimmed).
+    const handleColorInputClick = (event: MouseEvent) => {
+        if (readonly) {
+            event.preventDefault();
+        }
     }
 
-    let editor: any;
+    const handleColorInputKeydown = (event: KeyboardEvent) => {
+        if (readonly && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+        }
+    }
 
-    const clean = () => {
-        onChange(null)
+    const commitTextValue = () => {
+        let candidate = textValue.trim();
+        if (candidate && !candidate.startsWith('#')) {
+            candidate = `#${candidate}`;
+        }
+        if (HEX_PATTERN.test(candidate)) {
+            textValue = candidate;
+            if (candidate !== value) {
+                value = candidate;
+                onchange?.(candidate);
+            }
+        } else {
+            // Doesn't resolve to a valid #RRGGBB value on commit — revert to the last
+            // known-good value rather than accepting a malformed color.
+            textValue = value ?? '';
+        }
+    }
+
+    // Only '#' and hex digits are allowed while typing; the exact length requirement
+    // is enforced separately on commit (see commitTextValue), since rejecting
+    // incomplete input on every keystroke would make it impossible to type a value
+    // character by character.
+    const handleTextKeydown = (event: KeyboardEvent) => {
+        const allowKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+        if (allowKeys.includes(event.key) || event.metaKey || event.ctrlKey) return;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            textInput?.blur();
+            return;
+        }
+        if (event.key === 'Escape') {
+            textValue = value ?? '';
+            textInput?.blur();
+            return;
+        }
+        if (!/^[0-9a-fA-F#]$/.test(event.key)) {
+            event.preventDefault();
+        }
     }
 
-    const handleActionIconClick = async () => {
-        editor.click();
+    const handleTextPaste = (event: ClipboardEvent) => {
+        const pasted = event.clipboardData?.getData('text') ?? '';
+        if (/[^0-9a-fA-F#]/.test(pasted)) {
+            event.preventDefault();
+        }
     }
 
-    function handleColorChange(event: Event) {
-        // selectedColor = (event.target as HTMLElement).value;
-        // rgbValues = hexToRgb(selectedColor);
-        // console.log(selectedColor, rgbValues);
-        // dispatch('change', {
-        //     hex: selectedColor,
-        //     rgb: rgbValues
-        // });
+    // Defense in depth against anything that bypasses handleTextKeydown (IME, mobile
+    // virtual keyboards, drag-and-drop text) — strip disallowed characters and cap at
+    // one leading '#' plus 6 hex digits.
+    const handleTextInput = () => {
+        const hasHash = textValue.startsWith('#');
+        const hexOnly = textValue.replace(/#/g, '').replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
+        const sanitized = (hasHash ? '#' : '') + hexOnly;
+        if (sanitized !== textValue) {
+            textValue = sanitized;
+        }
     }
 
 </script>
 
-<CommonPicker {variant} {style} {compact} className="multiple" iconName="icon_google_color_lens"
-              autoFit clear={clean} textValue={value} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
-<!--    <div style="flex: 1 1 auto; width: 50%; height: 60%; border-radius: 4px; background-color: {value}"></div>-->
+<CommonPicker {variant} {style} {theme} {error} {tooltip} {compact} {placeholder} className="multiple" iconName="icon_google_color_lens"
+              autoFit clear={clean} textValue={value} {readonly} {disabled} {onfocus} {onblur} iconClickHandler={handleActionIconClick}
+              input$style={HIDDEN_INTERNAL_INPUT_STYLE}>
     <div style="width: 100%; display: flex; overflow: hidden; flex-direction: row; align-items: center; height: 100%; gap: 8px">
-        <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color"  bind:value on:change={handleColorChange}/>
-        <input style="flex: 0 0 auto; width: 50%; text-align: center" class="text-editor" readonly value={value??''} {disabled}/>
+        <input bind:this={editor} style="flex: 0 0 auto; width: 40%; height: 80%; border-radius: 8px;" type="color" value={swatchValue} {disabled}
+               tabindex={readonly ? -1 : 0} onclick={handleColorInputClick} onkeydown={handleColorInputKeydown} onchange={handleSwatchChange}/>
+        <input bind:this={textInput} style="flex: 0 0 auto; width: 50%; text-align: center" class="text-editor" bind:value={textValue}
+               readonly={readonly} {disabled} {placeholder} maxlength="7" spellcheck="false" autocomplete="off"
+               onblur={commitTextValue} onkeydown={handleTextKeydown} onpaste={handleTextPaste} oninput={handleTextInput}/>
     </div>
-
-
 </CommonPicker>

package/dist/form/color_picker/ColorPicker.svelte.d.ts

@@ -1,27 +1,9 @@
-import type { OnChangeHandler } from "../../types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type CommonFieldProps from "../common_editor/CommonFieldProps";
+interface Props extends CommonFieldProps {
+    value?: string;
 }
-declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<{
-    variant?: "" | "plain" | "outlined" | "filled";
-    disabled?: boolean;
-    readonly?: boolean;
-    compact?: boolean;
-    value?: any;
-    style?: string;
-    onChange?: OnChangeHandler<any>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ColorPicker = InstanceType<typeof ColorPicker>;
+declare const ColorPicker: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/form/color_picker/README.md

@@ -40,7 +40,7 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value` | `string` (bindable) | `"#000000"` | The selected color in hex format (e.g., `#3b82f6`). `bind:value={...}` for two-way binding. |
+| `value` | `string` (bindable) | `"#000000"` | The selected color in `#RRGGBB` hex format (e.g., `#3b82f6`). `bind:value={...}` for two-way binding. |
 | `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual style variant. |
 | `compact` | `boolean` | `false` | Dense layout for table cells and inline forms. |
 | `disabled` | `boolean` | `false` | Fully disabled — the color picker is non-interactive. |
@@ -263,18 +263,25 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 ## Behavior Notes
 
-### Native color input
+### Native color input + editable hex field
 
-The component uses the browser's native `<input type="color">` element, which provides a consistent color picker across all platforms. The visual swatch is a custom preview layer on top of the native input.
+The component shows two parts side by side: a native `<input type="color">` swatch (opens the browser's built-in color picker) and a text field showing the hex value. The text field is directly editable — typing a value and committing it (blur or Enter) updates `value` the same as picking a color from the swatch.
 
-### Hex format
+There's no alpha/transparency support — `<input type="color">` has no concept of it, so `value` is always a plain 6-digit `#rrggbb`.
 
-The `value` prop expects and returns colors in hex format (e.g., `#3b82f6`). The native color input always returns hex format.
+### Hex format and validation
+
+`value` must be exactly `#RRGGBB` (6 hex digits after `#`, case-insensitive). When typing in the text field:
+
+- Only `#` and hex digits (`0-9a-fA-F`) can be typed, capped at 6 digits — anything else is blocked or truncated as you type.
+- The value is validated on commit (blur or Enter), not on every keystroke, so you can type through incomplete intermediate states.
+- A missing leading `#` is added automatically on commit (e.g. typing `ff0000` commits as `#ff0000`).
+- If the committed text isn't a valid `#RRGGBB` string, the field reverts to the last valid value — `onchange` is not called.
 
 ### Disabled and readonly states
 
-- **Disabled**: The color picker is non-interactive. The visual swatch is dimmed.
-- **Readonly**: The color picker is non-interactive but the visual swatch is fully visible.
+- **Disabled**: The color picker is non-interactive. The visual swatch is dimmed, and the hex field is disabled.
+- **Readonly**: The color picker is non-interactive but fully visible — the swatch blocks clicks (it can't open the native picker) and the hex field becomes a non-editable (but not dimmed) readonly text field.
 
 ## Accessibility
 

package/dist/form/color_picker/README_CN.md

@@ -40,7 +40,7 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
-| `value` | `string`（可绑定） | `"#000000"` | 以 hex 格式选择的颜色（例如 `#3b82f6`）。`bind:value={...}` 用于双向绑定。 |
+| `value` | `string`（可绑定） | `"#000000"` | `#RRGGBB` 格式的颜色（例如 `#3b82f6`）。`bind:value={...}` 用于双向绑定。 |
 | `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉风格变体。 |
 | `compact` | `boolean` | `false` | 紧凑布局，适用于表格单元格和行内表单。 |
 | `disabled` | `boolean` | `false` | 完全禁用 —— 颜色选择器不可交互。 |
@@ -263,18 +263,25 @@ import ColorPicker from "@ticatec/uniface-element/ColorPicker";
 
 ## 行为说明
 
-### 原生颜色输入
+### 原生颜色输入 + 可编辑的 hex 文本框
 
-该组件使用浏览器的原生 `<input type="color">` 元素，在所有平台上提供一致的颜色选择器。视觉色板是原生输入上方的自定义预览层。
+组件并排展示两部分：原生 `<input type="color">` 色板（点击打开浏览器内置的颜色选择器）和展示 hex 值的文本框。文本框可以直接编辑——输入一个值并提交（失焦或回车）后，`value` 会像通过色板选色一样更新。
 
-### Hex 格式
+不支持透明通道——`<input type="color">` 本身没有这个概念，因此 `value` 始终是纯 6 位 `#rrggbb`。
 
-`value` 属性期望并返回 hex 格式的颜色（例如 `#3b82f6`）。原生颜色输入始终返回 hex 格式。
+### Hex 格式与校验
+
+`value` 必须是合法的 `#RRGGBB`（`#` 后跟 6 位十六进制数字，大小写不敏感）。在文本框中输入时：
+
+- 只能输入 `#` 和十六进制字符（`0-9a-fA-F`），最多 6 位——其他字符在输入时会被拦截或截断。
+- 校验只在提交时（失焦或回车）进行，不是每次按键都校验，因此可以正常输入中间的不完整状态。
+- 提交时如果缺少开头的 `#` 会自动补上（例如输入 `ff0000` 会被提交为 `#ff0000`）。
+- 如果提交的文本不是合法的 `#RRGGBB`，文本框会回退到上一个合法值——不会触发 `onchange`。
 
 ### 禁用和只读状态
 
-- **禁用**：颜色选择器不可交互。视觉色板变暗。
-- **只读**：颜色选择器不可交互，但视觉色板完全可见。
+- **禁用**：颜色选择器不可交互。视觉色板变暗，hex 文本框也被禁用。
+- **只读**：颜色选择器不可交互，但完全可见——色板会拦截点击（无法打开原生选择器），hex 文本框变为不可编辑（但不变暗）的只读文本框。
 
 ## 无障碍
 

package/dist/form/common_editor/CommonPicker.svelte

@@ -70,7 +70,7 @@
     let editorElement: HTMLElement | undefined = $state();
     let editor: HTMLDivElement | undefined = $state();
     let hasFocus = $state(false);
-    let canClean = $state(!mandatory && value != null);
+    let canClean = $derived(!mandatory && value != null);
 
 
     const handleFocus = (event: FocusEvent) => {
@@ -111,7 +111,6 @@
     }
 
     $effect(() => {
-        canClean = !mandatory && value != null;
         if (!isOpen && hasFocus) {
             setTimeout(() => {
                 if (document.activeElement !== editor) {
@@ -148,12 +147,12 @@
                 <input style={input$style} tabindex="-1" readonly {disabled} value={textValue}/>
             {/if}
         {:else}
-            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%" onclick={openPopup}>
+            <div style="flex: 1 1 auto; position: relative; overflow: hidden; height: 100%">
                 {#if input$readonly}
-                    <input bind:this={editor} style={input$style} value={textValue} readonly {placeholder} onkeydown={handleKeyDown}
+                    <input bind:this={editor} style={input$style} value={textValue} readonly {placeholder} onclick={openPopup} onkeydown={handleKeyDown}
                            tabindex="0"/>
                 {:else}
-                    <input bind:this={editor} style={input$style} value={textValue} {oninput} {oncompositionstart} {oncompositionend}
+                    <input bind:this={editor} style={input$style} value={textValue} {oninput} {oncompositionstart} {oncompositionend} onclick={openPopup}
                            {placeholder} tabindex="0" onkeydown={handleKeyDown}/>
                 {/if}
                 {#if children}
@@ -181,5 +180,3 @@
         {/if}
     </Popover>
 {/if}
-
-

package/dist/form/image-files/ImagePreview.svelte

@@ -65,12 +65,13 @@
             <div style="width: 100%; height: 100%; overflow: auto">
                 <div class="image-container"
                      style="width: {containerWidth}px; height: {containerHeight}px; {imgStyle}">
-                    <img onclick={(e: Event) => e.stopPropagation()}
-                         src={src}
-                         alt="Preview"
-                         onload={handleImageLoad}
-                         style="width: {imgPanelWidth}px; height: {imgPanelHeight}px;"
-                    />
+                    <button type="button" class="image-content" aria-label="Preview image" onclick={(e: Event) => e.stopPropagation()}>
+                        <img src={src}
+                             alt="Preview"
+                             onload={handleImageLoad}
+                             style="width: {imgPanelWidth}px; height: {imgPanelHeight}px;"
+                        />
+                    </button>
                 </div>
             </div>
             <div class="toolbar" onclick={(e: Event) => e.stopPropagation()} aria-hidden="true">
@@ -120,10 +121,17 @@
             img {
                 transition: transform 0.3s ease;
             }
+
+            .image-content {
+                display: inline-flex;
+                padding: 0;
+                border: 0;
+                background: transparent;
+            }
         }
 
         &:hover .toolbar {
             display: flex;
         }
     }
-</style>
+</style>

package/dist/form/memo_editor/MemoEditor.svelte

@@ -78,7 +78,7 @@
                 {disabled}
                 rows={autoHeight ? undefined : rows}
                 {wrap}
-                {maxLength}
+                maxlength={maxLength}
                 bind:value
                 {...events}
                 {...input$}
@@ -168,4 +168,4 @@
         z-index: 10;
     }
 
-</style>
+</style>

package/dist/form/number_editor/NumberEditor.svelte

@@ -45,7 +45,7 @@
         ...restProps
     }: Props = $props();
 
-    let numberInput: NumberInput;
+    let numberInput = $state<NumberInput>();
 
     export function focus() {
         numberInput?.focus();
@@ -94,4 +94,4 @@
             {...input$}
         />
     {/if}
-</CommonEditor>
+</CommonEditor>

package/dist/form/options_multi_select/OptionsMultiSelect.svelte

@@ -214,16 +214,8 @@
         outline: none;
     }
 
-    .options-editor.disabled {
-        filter: grayscale(1);
-    }
-
-    .options-editor.disabled * {
-        cursor: not-allowed;
-    }
-
     .options-editor .placeholder {
         color: var(--uniface-editor-color-placeholder);
     }
 
-</style>
+</style>

package/dist/form/radio_button/RadioButton.svelte

@@ -72,13 +72,6 @@
   text-overflow: ellipsis;
   color: var(--uniface-checkbox-text-color);
 }
-.uniface-radio-button label {
-  display: inline-block;
-  width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  cursor: pointer;
-}
 .uniface-radio-button > span {
   line-height: var(--uniface-checkbox-size);
   padding-left: var(--uniface-checkbox-label-padding-left);
@@ -107,6 +100,7 @@
   --disabled-inner: var(--uniface-checkbox-checkmark-color-disabled);
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   height: var(--uniface-checkbox-size);
   width: var(--uniface-checkbox-size);
   outline: none;
@@ -180,4 +174,4 @@
 .uniface-radio-button *::before,
 .uniface-radio-button *::after {
   box-sizing: inherit;
-}</style>
+}</style>

package/dist/form/text_editor/TextEditor.svelte

@@ -69,7 +69,7 @@
     }
 
     let input$ = $derived(prefixFilter(restProps, 'input$', excludeAttrs));
-    let eventHandlers = filterProps(restProps, keyboardAttrs);
+    let eventHandlers = $derived(filterProps(restProps, keyboardAttrs));
 
     const clear = () => {
         value = undefined;
@@ -83,4 +83,4 @@
               {error}>
     <input bind:this={editor} {...input$} {placeholder} {...eventHandlers}
            oninput={handleInput} onchange={handleChange} bind:value/>
-</CommonEditor>
+</CommonEditor>

package/dist/general/button/Button.svelte

@@ -44,6 +44,8 @@
 
 </script>
 
+<!-- autofocus is an explicit opt-in component API; consumers decide when initial focus is appropriate. -->
+<!-- svelte-ignore a11y_autofocus -->
 <button
     {style}
     class="uniface-button common-button {variant} {size} {type} {theme}"

package/dist/general/split/Split.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
+    import {onDestroy} from 'svelte';
 
     interface Props {
         direction?: "horizontal" | "vertical";
@@ -76,6 +76,22 @@
         }
     };
 
+    const resizeWithKeyboard = (event: KeyboardEvent) => {
+        if (fixed || !bindingPanel) return;
+        const decreaseKey = direction === 'horizontal' ? 'ArrowUp' : 'ArrowLeft';
+        const increaseKey = direction === 'horizontal' ? 'ArrowDown' : 'ArrowRight';
+        if (event.key !== decreaseKey && event.key !== increaseKey) return;
+
+        event.preventDefault();
+        const directionFactor = event.key === increaseKey ? 1 : -1;
+        const delta = directionFactor * (reverse ? -10 : 10);
+        const currentSize = direction === 'horizontal' ? bindingPanel.clientHeight : bindingPanel.clientWidth;
+        const newSize = Math.max(5, currentSize + delta);
+        if (direction === 'horizontal') bindingPanel.style.height = `${newSize}px`;
+        else bindingPanel.style.width = `${newSize}px`;
+        onResizeEnd?.(newSize);
+    };
+
     // 组件销毁时清理
     onDestroy(() => {
         if (isDragging) {
@@ -85,6 +101,9 @@
 
 </script>
 
+<!-- The separator is intentionally focusable because its arrow-key handler resizes the bound panel. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
     class="uniface-divider {direction}"
     class:fixed
@@ -92,9 +111,10 @@
     role="separator"
     aria-orientation={direction}
     aria-label="Resize handle"
-    tabindex="0"
+    tabindex={fixed ? -1 : 0}
     onmousedown={startDrag}
-/>
+    onkeydown={resizeWithKeyboard}
+></div>
 
 <style>
     .uniface-divider {
@@ -127,4 +147,4 @@
     .uniface-divider:active {
         transition: none;
     }
-</style>
+</style>

package/dist/navigation/nav_menu/MenuItem.d.ts

@@ -1,7 +1,9 @@
-import type { IHierarchyData } from "../../lib";
 export default interface MenuItem {
     [key: string]: any;
 }
-export interface MenuNode extends IHierarchyData<MenuItem> {
+export interface MenuNode {
+    item: MenuItem;
+    children?: MenuNode[];
+    expand?: boolean;
 }
 export type OnMenuClick = (item: MenuItem) => void;