ywana-core8 0.1.81 → 0.1.83

package/dist/index.umd.js

@@ -4303,8 +4303,8 @@
       }));
     };
 
-    var _excluded$a = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "loading", "empty", "emptyMessage", "emptyIcon", "searchable", "searchPlaceholder", "searchBy", "sortable", "sortBy", "sortDirection", "onSort", "multiSelect", "onMultiSelect", "dense", "disabled", "animated", "virtualized", "itemHeight", "maxHeight", "className", "style", "ariaLabel", "role"],
-      _excluded2$5 = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "searchTerm", "onSearch", "searchable", "searchPlaceholder", "multiSelect", "dense", "disabled", "animated", "cssClasses", "ariaAttributes", "style"],
+    var _excluded$a = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "loading", "empty", "emptyMessage", "emptyIcon", "searchable", "searchPlaceholder", "searchBy", "searchPosition", "sortable", "sortBy", "sortDirection", "onSort", "multiSelect", "onMultiSelect", "dense", "outlined", "disabled", "animated", "virtualized", "itemHeight", "maxHeight", "className", "style", "ariaLabel", "role"],
+      _excluded2$5 = ["items", "children", "selected", "onSelect", "groupBy", "groupRenderer", "searchTerm", "onSearch", "searchable", "searchPlaceholder", "searchPosition", "multiSelect", "dense", "disabled", "animated", "cssClasses", "ariaAttributes", "style"],
       _excluded3$2 = ["id", "icon", "iconTooltip", "line1", "line2", "meta", "avatar", "badge", "actions", "disabled"];
 
     /**
@@ -4331,6 +4331,8 @@
         searchPlaceholder = _props$searchPlacehol === void 0 ? "Search..." : _props$searchPlacehol,
         _props$searchBy = props.searchBy,
         searchBy = _props$searchBy === void 0 ? ['line1', 'line2'] : _props$searchBy,
+        _props$searchPosition = props.searchPosition,
+        searchPosition = _props$searchPosition === void 0 ? 'top' : _props$searchPosition,
         _props$sortable = props.sortable,
         sortable = _props$sortable === void 0 ? false : _props$sortable,
         sortBy = props.sortBy,
@@ -4342,6 +4344,8 @@
         onMultiSelect = props.onMultiSelect,
         _props$dense = props.dense,
         dense = _props$dense === void 0 ? false : _props$dense,
+        _props$outlined = props.outlined,
+        outlined = _props$outlined === void 0 ? false : _props$outlined,
         _props$disabled = props.disabled,
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         _props$animated = props.animated,
@@ -4390,7 +4394,7 @@
       }, [disabled, multiSelect, selected, onSelect, onMultiSelect]);
 
       // Handle search
-      var handleSearch = React.useCallback(function (searchId, value) {
+      var handleSearch = React.useCallback(function (_, value) {
         setSearchTerm(value);
       }, []);
 
@@ -4431,8 +4435,23 @@
         if (onSort) onSort(newConfig);
       }, [sortable, sortConfig, onSort]);
 
+      // Search component JSX - memoized to prevent focus loss
+      var searchComponent = React.useMemo(function () {
+        return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "list__search"
+        }, /*#__PURE__*/React__default["default"].createElement(TextField, {
+          id: "list-search",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: handleSearch,
+          icon: "search",
+          outlined: true,
+          size: "small"
+        }));
+      }, [searchable, searchPlaceholder, searchTerm, handleSearch]);
+
       // Generate CSS classes
-      var cssClasses = ['list', dense && 'list--dense', disabled && 'list--disabled', animated && 'list--animated', loading && 'list--loading', className].filter(Boolean).join(' ');
+      var cssClasses = ['list', dense && 'list--dense', outlined && 'list--outlined', disabled && 'list--disabled', animated && 'list--animated', loading && 'list--loading', className].filter(Boolean).join(' ');
 
       // Accessibility attributes
       var ariaAttributes = {
@@ -4459,22 +4478,12 @@
         return /*#__PURE__*/React__default["default"].createElement("div", _extends({
           className: cssClasses,
           style: style
-        }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
-          className: "list__search"
-        }, /*#__PURE__*/React__default["default"].createElement(TextField, {
-          id: "list-search",
-          placeholder: searchPlaceholder,
-          value: searchTerm,
-          onChange: handleSearch,
-          icon: "search",
-          outlined: true,
-          size: "small"
-        })), /*#__PURE__*/React__default["default"].createElement("div", {
+        }, ariaAttributes, restProps), searchPosition === 'top' && searchComponent, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "list__empty"
         }, /*#__PURE__*/React__default["default"].createElement(Icon, {
           icon: emptyIcon,
           size: "large"
-        }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)), children);
+        }), /*#__PURE__*/React__default["default"].createElement(Text, null, emptyMessage)), searchPosition === 'bottom' && searchComponent, children);
       }
 
       // Render grouped or normal list
@@ -4491,17 +4500,7 @@
         className: cssClasses,
         style: style,
         ref: listRef
-      }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "list__search"
-      }, /*#__PURE__*/React__default["default"].createElement(TextField, {
-        id: "list-search",
-        placeholder: searchPlaceholder,
-        value: searchTerm,
-        onChange: handleSearch,
-        icon: "search",
-        outlined: true,
-        size: "small"
-      })), sortable && sortBy && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, ariaAttributes, restProps), searchPosition === 'top' && searchComponent, sortable && sortBy && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "list__sort"
       }, /*#__PURE__*/React__default["default"].createElement("button", {
         className: "list__sort-button",
@@ -4530,7 +4529,7 @@
           disabled: disabled,
           animated: animated
         });
-      })), children);
+      })), searchPosition === 'bottom' && searchComponent, children);
     };
 
     /**
@@ -4550,6 +4549,8 @@
         searchable = _props$searchable2 === void 0 ? false : _props$searchable2,
         _props$searchPlacehol2 = props.searchPlaceholder,
         searchPlaceholder = _props$searchPlacehol2 === void 0 ? "Search..." : _props$searchPlacehol2,
+        _props$searchPosition2 = props.searchPosition,
+        searchPosition = _props$searchPosition2 === void 0 ? 'top' : _props$searchPosition2,
         _props$multiSelect2 = props.multiSelect,
         multiSelect = _props$multiSelect2 === void 0 ? false : _props$multiSelect2,
         _props$dense2 = props.dense,
@@ -4596,20 +4597,25 @@
           return next;
         });
       }, []);
+
+      // Search component for grouped list - memoized to prevent focus loss
+      var groupedSearchComponent = React.useMemo(function () {
+        return searchable && /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "list__search"
+        }, /*#__PURE__*/React__default["default"].createElement(TextField, {
+          id: "grouped-list-search",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: onSearch,
+          icon: "search",
+          outlined: true,
+          size: "small"
+        }));
+      }, [searchable, searchPlaceholder, searchTerm, onSearch]);
       return /*#__PURE__*/React__default["default"].createElement("div", _extends({
         className: cssClasses + " grouped",
         style: style
-      }, ariaAttributes, restProps), searchable && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "list__search"
-      }, /*#__PURE__*/React__default["default"].createElement(TextField, {
-        id: "grouped-list-search",
-        placeholder: searchPlaceholder,
-        value: searchTerm,
-        onChange: onSearch,
-        icon: "search",
-        outlined: true,
-        size: "small"
-      })), groups.map(function (group) {
+      }, ariaAttributes, restProps), searchPosition === 'top' && groupedSearchComponent, groups.map(function (group) {
         var isCollapsed = collapsedGroups.has(group.name);
         var groupTitle = groupRenderer ? groupRenderer(group) : /*#__PURE__*/React__default["default"].createElement(Text, null, group.name);
         return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
@@ -4652,7 +4658,7 @@
             animated: animated
           });
         })));
-      }), children);
+      }), searchPosition === 'bottom' && groupedSearchComponent, children);
     };
 
     /**
@@ -4753,14 +4759,14 @@
       }, /*#__PURE__*/React__default["default"].createElement(Text, {
         className: "list__item-line2",
         size: "small"
-      }, line2))), meta && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, line2))), actions && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "list__item-actions",
+        role: "toolbar"
+      }, actions), meta && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "list__item-meta"
       }, typeof meta === 'string' ? /*#__PURE__*/React__default["default"].createElement(Text, {
         size: "small"
-      }, meta) : meta), actions && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "list__item-actions",
-        role: "toolbar"
-      }, actions));
+      }, meta) : meta));
     };
 
     // PropTypes for List component
@@ -4802,6 +4808,8 @@
       searchPlaceholder: PropTypes.string,
       /** Properties to search by */
       searchBy: PropTypes.arrayOf(PropTypes.string),
+      /** Search position */
+      searchPosition: PropTypes.oneOf(['top', 'bottom']),
       /** Enable sorting */
       sortable: PropTypes.bool,
       /** Property to sort by */
@@ -4816,6 +4824,8 @@
       onMultiSelect: PropTypes.func,
       /** Dense layout */
       dense: PropTypes.bool,
+      /** Outlined variant with borders */
+      outlined: PropTypes.bool,
       /** Disabled state */
       disabled: PropTypes.bool,
       /** Enable animations */
@@ -9782,6 +9792,9 @@
       var _useState4 = React.useState(true),
         isValid = _useState4[0],
         setIsValid = _useState4[1];
+      var _useState5 = React.useState(false),
+        hasBeenTouched = _useState5[0],
+        setHasBeenTouched = _useState5[1];
       var inputRef = React.useRef(null);
       var debounceRef = React.useRef(null);
 
@@ -9790,8 +9803,14 @@
         console.warn('TextField2 component: id prop is required');
       }
 
-      // Validate value and set error states
+      // Validate value and set error states - only after user interaction
       React.useEffect(function () {
+        // Don't validate required fields until user has interacted with the field
+        if (!hasBeenTouched && required && !value) {
+          setIsValid(true);
+          setInternalError('');
+          return;
+        }
         if (validation && value !== undefined) {
           var validationResult = validation(value);
           var valid = typeof validationResult === 'boolean' ? validationResult : validationResult.valid;
@@ -9801,14 +9820,14 @@
           if (onValidation) {
             onValidation(id, valid, errorMessage);
           }
-        } else if (required && !value) {
+        } else if (required && !value && hasBeenTouched) {
           setIsValid(false);
           setInternalError('This field is required');
         } else {
           setIsValid(true);
           setInternalError('');
         }
-      }, [value, required, id]); // Removed validation and onValidation from dependencies to prevent infinite loops
+      }, [value, required, id, hasBeenTouched]); // Added hasBeenTouched to dependencies
 
       // Handle input changes with debouncing
       var handleChange = React.useCallback(function (event) {
@@ -9816,6 +9835,11 @@
         event.stopPropagation();
         var newValue = event.target.value;
 
+        // Mark field as touched on first change
+        if (!hasBeenTouched) {
+          setHasBeenTouched(true);
+        }
+
         // Clear previous debounce
         if (debounceRef.current) {
           clearTimeout(debounceRef.current);
@@ -9827,7 +9851,7 @@
         } else {
           if (onChange) onChange(id, newValue, event);
         }
-      }, [disabled, readOnly, id, onChange, debounceMs]);
+      }, [disabled, readOnly, id, onChange, debounceMs, hasBeenTouched]);
 
       // Handle key press events
       var handleKeyPress = React.useCallback(function (event) {
@@ -9859,8 +9883,13 @@
       var handleBlur = React.useCallback(function (event) {
         if (disabled) return;
         setIsFocused(false);
+
+        // Mark field as touched on blur if it hasn't been touched yet
+        if (!hasBeenTouched) {
+          setHasBeenTouched(true);
+        }
         if (onBlur) onBlur(event);
-      }, [disabled, onBlur]);
+      }, [disabled, onBlur, hasBeenTouched]);
 
       // Handle clear action
       var handleClear = React.useCallback(function () {
@@ -10140,18 +10169,18 @@
         onSearch = props.onSearch,
         restProps = _objectWithoutPropertiesLoose(props, _excluded2$3);
       React.useContext(SiteContext);
-      var _useState5 = React.useState(false),
-        isOpen = _useState5[0],
-        setIsOpen = _useState5[1];
-      var _useState6 = React.useState(''),
-        searchTerm = _useState6[0],
-        setSearchTerm = _useState6[1];
-      var _useState7 = React.useState(-1),
-        focusedIndex = _useState7[0],
-        setFocusedIndex = _useState7[1];
-      var _useState8 = React.useState(''),
-        internalError = _useState8[0],
-        setInternalError = _useState8[1];
+      var _useState6 = React.useState(false),
+        isOpen = _useState6[0],
+        setIsOpen = _useState6[1];
+      var _useState7 = React.useState(''),
+        searchTerm = _useState7[0],
+        setSearchTerm = _useState7[1];
+      var _useState8 = React.useState(-1),
+        focusedIndex = _useState8[0],
+        setFocusedIndex = _useState8[1];
+      var _useState9 = React.useState(''),
+        internalError = _useState9[0],
+        setInternalError = _useState9[1];
       var dropdownRef = React.useRef(null);
       var inputRef = React.useRef(null);
       var listRef = React.useRef(null);
@@ -10579,18 +10608,18 @@
         onChange = props.onChange,
         onValidation = props.onValidation,
         restProps = _objectWithoutPropertiesLoose(props, _excluded3$1);
-      var _useState9 = React.useState({
+      var _useState0 = React.useState({
           from: '',
           to: ''
         }),
-        form = _useState9[0],
-        setForm = _useState9[1];
-      var _useState0 = React.useState(''),
-        internalError = _useState0[0],
-        setInternalError = _useState0[1];
-      var _useState1 = React.useState(true),
-        isValid = _useState1[0],
-        setIsValid = _useState1[1];
+        form = _useState0[0],
+        setForm = _useState0[1];
+      var _useState1 = React.useState(''),
+        internalError = _useState1[0],
+        setInternalError = _useState1[1];
+      var _useState10 = React.useState(true),
+        isValid = _useState10[0],
+        setIsValid = _useState10[1];
 
       // Validate required props
       if (!id) {