ywana-core8 0.1.81 → 0.1.83

package/dist/index.cjs

@@ -4310,8 +4310,8 @@ var PasswordField = function PasswordField(props) {
   }));
 };
 
-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"];
 
 /**
@@ -4338,6 +4338,8 @@ var List = function List(props) {
     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,
@@ -4349,6 +4351,8 @@ var List = function List(props) {
     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,
@@ -4397,7 +4401,7 @@ var List = function List(props) {
   }, [disabled, multiSelect, selected, onSelect, onMultiSelect]);
 
   // Handle search
-  var handleSearch = React.useCallback(function (searchId, value) {
+  var handleSearch = React.useCallback(function (_, value) {
     setSearchTerm(value);
   }, []);
 
@@ -4438,8 +4442,23 @@ var List = function List(props) {
     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 = {
@@ -4466,22 +4485,12 @@ var List = function List(props) {
     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
@@ -4498,17 +4507,7 @@ var List = function List(props) {
     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",
@@ -4537,7 +4536,7 @@ var List = function List(props) {
       disabled: disabled,
       animated: animated
     });
-  })), children);
+  })), searchPosition === 'bottom' && searchComponent, children);
 };
 
 /**
@@ -4557,6 +4556,8 @@ var GroupedList = function GroupedList(props) {
     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,
@@ -4603,20 +4604,25 @@ var GroupedList = function GroupedList(props) {
       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, {
@@ -4659,7 +4665,7 @@ var GroupedList = function GroupedList(props) {
         animated: animated
       });
     })));
-  }), children);
+  }), searchPosition === 'bottom' && groupedSearchComponent, children);
 };
 
 /**
@@ -4760,14 +4766,14 @@ var ListItem = function ListItem(_ref) {
   }, /*#__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
@@ -4809,6 +4815,8 @@ List.propTypes = {
   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 */
@@ -4823,6 +4831,8 @@ List.propTypes = {
   onMultiSelect: PropTypes.func,
   /** Dense layout */
   dense: PropTypes.bool,
+  /** Outlined variant with borders */
+  outlined: PropTypes.bool,
   /** Disabled state */
   disabled: PropTypes.bool,
   /** Enable animations */
@@ -9789,6 +9799,9 @@ var TextField2 = function TextField2(props) {
   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);
 
@@ -9797,8 +9810,14 @@ var TextField2 = function TextField2(props) {
     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;
@@ -9808,14 +9827,14 @@ var TextField2 = function TextField2(props) {
       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) {
@@ -9823,6 +9842,11 @@ var TextField2 = function TextField2(props) {
     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);
@@ -9834,7 +9858,7 @@ var TextField2 = function TextField2(props) {
     } 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) {
@@ -9866,8 +9890,13 @@ var TextField2 = function TextField2(props) {
   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 () {
@@ -10147,18 +10176,18 @@ var DropDown2 = function DropDown2(props) {
     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);
@@ -10586,18 +10615,18 @@ var DateRange2 = function DateRange2(props) {
     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) {