@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/chunk-GBTKAKUD.mjs

@@ -0,0 +1,300 @@
+import { useId, useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { getCascaderDisplayLabel, getCascaderColumns, flattenCascaderOptions, filterCascaderOptions, classNames, getCascaderTriggerClasses, isCascaderOptionExpandable, cascaderBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, cascaderSearchInputClasses, cascaderEmptyStateClasses, cascaderSearchResultClasses, cascaderColumnClasses, getCascaderOptionClasses, cascaderDropdownClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Cascader.tsx
+var CASCADER_KEYS = /* @__PURE__ */ new Set([
+  "options",
+  "value",
+  "onChange",
+  "placeholder",
+  "size",
+  "disabled",
+  "clearable",
+  "showSearch",
+  "expandTrigger",
+  "changeOnSelect",
+  "separator",
+  "notFoundText",
+  "className"
+]);
+var Cascader = (props) => {
+  const {
+    options = [],
+    value = [],
+    onChange,
+    placeholder = "Please select",
+    size = "md",
+    disabled = false,
+    clearable = true,
+    showSearch = false,
+    expandTrigger = "click",
+    changeOnSelect = false,
+    separator = " / ",
+    notFoundText = "No results found",
+    className
+  } = props;
+  const divProps = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (!CASCADER_KEYS.has(k)) divProps[k] = v;
+  }
+  const instanceId = useId();
+  const listboxId = `tiger-cascader-listbox-${instanceId}`;
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activePath, setActivePath] = useState([]);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const displayLabel = useMemo(
+    () => getCascaderDisplayLabel(options, value, separator),
+    [options, value, separator]
+  );
+  const columns = useMemo(() => getCascaderColumns(options, activePath), [options, activePath]);
+  const isSearchMode = showSearch && searchQuery.length > 0;
+  const flattenedOptions = useMemo(() => {
+    if (!showSearch) return [];
+    return flattenCascaderOptions(options);
+  }, [showSearch, options]);
+  const searchResults = useMemo(() => {
+    if (!isSearchMode) return [];
+    return filterCascaderOptions(flattenedOptions, searchQuery, showSearch);
+  }, [isSearchMode, flattenedOptions, searchQuery, showSearch]);
+  const triggerClasses = useMemo(
+    () => classNames(getCascaderTriggerClasses(size, disabled, isOpen), className),
+    [size, disabled, isOpen, className]
+  );
+  useEffect(() => {
+    if (isOpen) {
+      setActivePath(value ? [...value] : []);
+      setSearchQuery("");
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleClick(e) {
+      const target = e.target;
+      if (triggerRef.current && !triggerRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, [isOpen]);
+  const toggleOpen = useCallback(() => {
+    if (disabled) return;
+    setIsOpen((prev) => !prev);
+  }, [disabled]);
+  const handleOptionClick = useCallback(
+    (option, level) => {
+      if (option.disabled) return;
+      const newPath = activePath.slice(0, level);
+      newPath.push(option.value);
+      setActivePath(newPath);
+      const hasChildren = isCascaderOptionExpandable(option);
+      if (!hasChildren) {
+        onChange?.(newPath);
+        setIsOpen(false);
+      } else if (changeOnSelect) {
+        onChange?.(newPath);
+      }
+    },
+    [activePath, onChange, changeOnSelect]
+  );
+  const handleOptionHover = useCallback(
+    (option, level) => {
+      if (expandTrigger !== "hover" || option.disabled) return;
+      const newPath = activePath.slice(0, level);
+      newPath.push(option.value);
+      setActivePath(newPath);
+    },
+    [expandTrigger, activePath]
+  );
+  const handleSearchResultClick = useCallback(
+    (valuePath, itemDisabled) => {
+      if (itemDisabled) return;
+      onChange?.(valuePath);
+      setIsOpen(false);
+    },
+    [onChange]
+  );
+  const handleClear = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onChange?.([]);
+    },
+    [onChange]
+  );
+  const handleTriggerKeyDown = useCallback(
+    (e) => {
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          toggleOpen();
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) setIsOpen(true);
+          break;
+      }
+    },
+    [toggleOpen, isOpen]
+  );
+  const hasValue = value && value.length > 0;
+  const showClearBtn = clearable && hasValue && !disabled;
+  return /* @__PURE__ */ jsxs("div", { className: cascaderBaseClasses, "data-testid": "cascader", ...divProps, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: triggerClasses,
+        disabled,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": isOpen ? listboxId : void 0,
+        onClick: toggleOpen,
+        onKeyDown: handleTriggerKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                "flex-1 text-left truncate",
+                !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
+              ),
+              children: hasValue ? displayLabel : placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+            showClearBtn && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex items-center",
+                role: "button",
+                "aria-label": "Clear selection",
+                onClick: handleClear,
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: icon20ViewBox,
+                    fill: "currentColor",
+                    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: classNames(
+                  "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+                  isOpen && "rotate-180"
+                ),
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: icon20ViewBox,
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronDownSolidIcon20PathD, clipRule: "evenodd" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dropdownRef,
+        className: classNames(cascaderDropdownClasses, isSearchMode && "flex-col"),
+        children: [
+          showSearch && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: cascaderSearchInputClasses,
+              placeholder: "Search...",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              "aria-label": "Search options"
+            }
+          ),
+          isSearchMode ? (
+            // Search results
+            searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: cascaderEmptyStateClasses, children: notFoundText }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto", role: "listbox", id: listboxId, children: searchResults.map((item) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames(
+                  cascaderSearchResultClasses,
+                  item.disabled && "opacity-50 cursor-not-allowed"
+                ),
+                role: "option",
+                "aria-selected": value?.join(",") === item.valuePath.join(","),
+                "aria-disabled": item.disabled,
+                onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
+                children: item.label
+              },
+              item.valuePath.join(",")
+            )) })
+          ) : (
+            // Cascading columns
+            /* @__PURE__ */ jsx("div", { className: "flex", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cascaderColumnClasses,
+                role: "listbox",
+                id: colIndex === 0 ? listboxId : void 0,
+                "aria-label": `Level ${colIndex + 1}`,
+                children: col.options.map((option) => {
+                  const isSelected = col.selectedValue === option.value;
+                  const hasChildren = isCascaderOptionExpandable(option);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: getCascaderOptionClasses(isSelected, !!option.disabled, size),
+                      role: "option",
+                      "aria-selected": isSelected,
+                      "aria-disabled": option.disabled,
+                      onClick: () => handleOptionClick(option, colIndex),
+                      onMouseEnter: () => handleOptionHover(option, colIndex),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: option.label }),
+                        hasChildren && /* @__PURE__ */ jsx(
+                          "svg",
+                          {
+                            className: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            viewBox: "0 0 20 20",
+                            fill: "currentColor",
+                            children: /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                fillRule: "evenodd",
+                                d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+                                clipRule: "evenodd"
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              },
+              colIndex
+            )) })
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+export { Cascader };

package/dist/chunk-GOUMB34F.mjs

@@ -0,0 +1,168 @@
+import { useControlledState } from './chunk-UQMPEMY7.mjs';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { isContentEmpty, sanitizeHtml, mapToolbarAction, isValidUrl, findHotkeyMatch, defaultToolbar, classNames, getRichTextContainerClasses, getEditorAreaClasses, parseHeight, richTextToolbarClasses, getToolbarButtonClasses, isInlineFormat, richTextPlaceholderClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RichTextEditor = ({
+  value,
+  defaultValue = "",
+  placeholder,
+  mode: _mode = "html",
+  toolbar,
+  height = 300,
+  readOnly = false,
+  disabled = false,
+  onChange,
+  className,
+  ...restProps
+}) => {
+  const editorRef = useRef(null);
+  const [currentContent, setInternalValue, isControlled] = useControlledState(value, defaultValue);
+  const [activeFormats, setActiveFormats] = useState(/* @__PURE__ */ new Set());
+  const toolbarButtons = toolbar ?? defaultToolbar;
+  const empty = isContentEmpty(currentContent);
+  useEffect(() => {
+    if (isControlled && editorRef.current) {
+      const sanitized = sanitizeHtml(value);
+      if (editorRef.current.innerHTML !== sanitized) {
+        editorRef.current.innerHTML = sanitized;
+      }
+    }
+  }, [value, isControlled]);
+  useEffect(() => {
+    if (editorRef.current) {
+      const initial = sanitizeHtml(isControlled ? value : defaultValue);
+      if (initial) {
+        editorRef.current.innerHTML = initial;
+      }
+    }
+  }, []);
+  const updateActiveFormats = useCallback(() => {
+    if (typeof document === "undefined") return;
+    const next = /* @__PURE__ */ new Set();
+    if (document.queryCommandState("bold")) next.add("bold");
+    if (document.queryCommandState("italic")) next.add("italic");
+    if (document.queryCommandState("underline")) next.add("underline");
+    if (document.queryCommandState("strikeThrough")) next.add("strikethrough");
+    if (document.queryCommandState("insertUnorderedList")) next.add("bulletList");
+    if (document.queryCommandState("insertOrderedList")) next.add("orderedList");
+    setActiveFormats(next);
+  }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.addEventListener("selectionchange", updateActiveFormats);
+    return () => {
+      document.removeEventListener("selectionchange", updateActiveFormats);
+    };
+  }, [updateActiveFormats]);
+  const handleInput = useCallback(() => {
+    if (!editorRef.current) return;
+    const html = editorRef.current.innerHTML;
+    const sanitized = sanitizeHtml(html);
+    if (!isControlled) {
+      setInternalValue(sanitized);
+    }
+    onChange?.(sanitized);
+  }, [isControlled, onChange]);
+  const execAction = useCallback(
+    (actionName) => {
+      if (readOnly || disabled) return;
+      editorRef.current?.focus();
+      const mapping = mapToolbarAction(actionName);
+      if (mapping) {
+        document.execCommand(mapping.command, false, mapping.argument);
+        handleInput();
+        updateActiveFormats();
+        return;
+      }
+      if (actionName === "codeBlock") {
+        document.execCommand("formatBlock", false, "PRE");
+        handleInput();
+        return;
+      }
+      if (actionName === "link") {
+        const url = typeof window !== "undefined" ? window.prompt("Enter URL:") : null;
+        if (url && isValidUrl(url)) {
+          document.execCommand("createLink", false, url);
+          handleInput();
+        }
+        return;
+      }
+      if (actionName === "image") {
+        const url = typeof window !== "undefined" ? window.prompt("Enter image URL:") : null;
+        if (url && isValidUrl(url)) {
+          document.execCommand("insertImage", false, url);
+          handleInput();
+        }
+      }
+    },
+    [readOnly, disabled, handleInput, updateActiveFormats]
+  );
+  const handleKeydown = useCallback(
+    (e) => {
+      const match = findHotkeyMatch(toolbarButtons, e.nativeEvent);
+      if (match) {
+        e.preventDefault();
+        execAction(match);
+      }
+    },
+    [toolbarButtons, execAction]
+  );
+  const containerClasses = useMemo(
+    () => classNames(getRichTextContainerClasses(disabled, className)),
+    [disabled, className]
+  );
+  const editorAreaClasses = useMemo(() => getEditorAreaClasses(readOnly), [readOnly]);
+  const containerStyle = useMemo(() => {
+    const ht = parseHeight(height);
+    if (!ht) return void 0;
+    return { height: ht };
+  }, [height]);
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, ...restProps, children: [
+    /* @__PURE__ */ jsx("div", { className: richTextToolbarClasses, role: "toolbar", "aria-label": "Text formatting", children: toolbarButtons.map((btn) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getToolbarButtonClasses(activeFormats.has(btn.name)),
+        title: btn.tooltip ?? btn.label,
+        "aria-label": btn.label,
+        "aria-pressed": isInlineFormat(btn.name) ? activeFormats.has(btn.name) : void 0,
+        disabled: disabled || readOnly,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => execAction(btn.name),
+        children: btn.label
+      },
+      btn.name
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: editorRef,
+          className: editorAreaClasses,
+          contentEditable: !(readOnly || disabled),
+          role: "textbox",
+          "aria-multiline": true,
+          "aria-readonly": readOnly || void 0,
+          "aria-disabled": disabled || void 0,
+          "aria-placeholder": placeholder,
+          "data-placeholder": placeholder,
+          onInput: handleInput,
+          onKeyDown: handleKeydown,
+          suppressContentEditableWarning: true
+        }
+      ),
+      empty && placeholder && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          "aria-hidden": true,
+          children: placeholder
+        }
+      )
+    ] })
+  ] });
+};
+var RichTextEditor_default = RichTextEditor;
+
+export { RichTextEditor, RichTextEditor_default };

package/dist/chunk-H5CAIMVL.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/InputGroup.tsx
+var InputGroupContext = react.createContext(null);
+function useInputGroupContext() {
+  return react.useContext(InputGroupContext);
+}
+var InputGroup = ({
+  size = "md",
+  compact = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const contextValue = react.useMemo(() => ({ size, compact }), [size, compact]);
+  const groupClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getInputGroupClasses(compact, className)),
+    [compact, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(InputGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, className: groupClasses, role: "group", children }) });
+};
+var InputGroupAddon = ({
+  addonType = "text",
+  className,
+  children,
+  ...rest
+}) => {
+  const ctx = useInputGroupContext();
+  const size = ctx?.size ?? "md";
+  const compact = ctx?.compact ?? true;
+  const addonClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getInputGroupAddonClasses(size, compact, className)),
+    [size, compact, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, className: addonClasses, children });
+};
+
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupContext = InputGroupContext;
+exports.useInputGroupContext = useInputGroupContext;

package/dist/chunk-HADBETZG.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var react = require('react');
+var ReactDOM = require('react-dom');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+
+// src/components/FloatButton.tsx
+var FloatButton = ({
+  shape = "circle",
+  size = "md",
+  type = "primary",
+  tooltip,
+  disabled = false,
+  ariaLabel,
+  className,
+  children,
+  onClick,
+  ...props
+}) => {
+  const classes = react.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.floatButtonBaseClasses,
+      tigercatCore.floatButtonShapeClasses[shape],
+      tigercatCore.floatButtonSizeClasses[size],
+      tigercatCore.floatButtonTypeClasses[type],
+      disabled && tigercatCore.floatButtonDisabledClasses,
+      className
+    ),
+    [shape, size, type, disabled, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: classes,
+      type: "button",
+      disabled,
+      "aria-label": ariaLabel ?? tooltip,
+      title: tooltip,
+      onClick: disabled ? void 0 : onClick,
+      ...props,
+      children
+    }
+  );
+};
+var FloatButtonGroup = ({
+  shape = "circle",
+  trigger = "click",
+  open: controlledOpen,
+  triggerNode,
+  children,
+  className,
+  onOpenChange,
+  ...props
+}) => {
+  const [internalOpen, setInternalOpen] = react.useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const toggle = react.useCallback(() => {
+    const next = !isOpen;
+    setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isOpen, onOpenChange]);
+  const handleMouseEnter = react.useCallback(() => {
+    setInternalOpen(true);
+    onOpenChange?.(true);
+  }, [onOpenChange]);
+  const handleMouseLeave = react.useCallback(() => {
+    setInternalOpen(false);
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  const groupClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.floatButtonGroupClasses, className), [className]);
+  if (typeof document === "undefined") return null;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: groupClasses,
+      onMouseEnter: trigger === "hover" ? handleMouseEnter : void 0,
+      onMouseLeave: trigger === "hover" ? handleMouseLeave : void 0,
+      ...props,
+      children: [
+        triggerNode && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: trigger === "click" ? toggle : void 0, children: triggerNode }),
+        isOpen && children
+      ]
+    }
+  );
+  return ReactDOM__default.default.createPortal(content, document.body);
+};
+
+exports.FloatButton = FloatButton;
+exports.FloatButtonGroup = FloatButtonGroup;

package/dist/{chunk-6W6CRBBG.mjs → chunk-HCZA4LV6.mjs}

@@ -1,5 +1,5 @@
-import { ImageGroupContext } from './chunk-QIJG42YQ.mjs';
-import { ImagePreview } from './chunk-5CLXOFRZ.mjs';
+import { ImageGroupContext } from './chunk-IPLK4AIE.mjs';
+import { ImagePreview } from './chunk-HLJQZUIY.mjs';
 import { useState, useRef, useContext, useEffect, useCallback, useMemo } from 'react';
 import { classNames, imageBaseClasses, imagePreviewCursorClass, getImageImgClasses, toCSSSize, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -27,6 +27,7 @@ var Image = ({
   className,
   errorRender,
   placeholderRender,
+  onPreviewOpenChange,
   onPreviewVisibleChange,
   onClick,
   onKeyDown,
@@ -90,10 +91,11 @@ var Image = ({
         group.openPreview(registeredIndexRef.current >= 0 ? registeredIndexRef.current : 0);
       } else {
         setPreviewVisible(true);
+        onPreviewOpenChange?.(true);
         onPreviewVisibleChange?.(true);
       }
     },
-    [preview, group, onClick, onPreviewVisibleChange]
+    [preview, group, onClick, onPreviewOpenChange, onPreviewVisibleChange]
   );
   const handleKeyDown = useCallback(
     (e) => {
@@ -154,11 +156,12 @@ var Image = ({
     !group && previewVisible && src && /* @__PURE__ */ jsx(
       ImagePreview,
       {
-        visible: previewVisible,
+        open: previewVisible,
         images: [src],
         currentIndex: 0,
-        onVisibleChange: (val) => {
+        onOpenChange: (val) => {
           setPreviewVisible(val);
+          onPreviewOpenChange?.(val);
           onPreviewVisibleChange?.(val);
         }
       }