x-ui-design 0.4.37 → 0.4.38

package/dist/esm/types/components/ConditionalWrapper/index.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+type Props = {
+    condition: boolean;
+    wrapper: (children: PropsWithChildren['children']) => ReactElement;
+} & PropsWithChildren;
+export declare const ConditionalWrapper: FC<Props>;
+export {};

package/dist/index.esm.js

@@ -3139,6 +3139,12 @@ var Tag$1 = /*#__PURE__*/Object.freeze({
 	default: Tag
 });
 
+const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children
+}) => condition ? wrapper(children) : children;
+
 var css_248z$5 = "@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-select{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);box-sizing:border-box;color:var(--xui-text-color);display:inline-flex;flex-direction:row-reverse;min-height:24px;padding:2px 8px;position:relative;width:100%}.xUi-select-disabled{background:rgba(0,0,0,.04)}.xUi-select-arrow{align-items:center;color:var(--xui-text-color-light);display:flex;gap:6px;margin:0 4px}.xUi-select-arrow svg{align-items:center;display:flex;justify-content:center}.xUi-select-loading{animation:spin 1s linear infinite;color:var(--xui-text-color-light);display:inline-block;margin:0 8px}.xUi-select .xUi-select-trigger{align-items:center;background:transparent;border-radius:var(--xui-border-radius-sm);cursor:pointer;display:flex;justify-content:space-between;width:100%}.xUi-select .xUi-select-clear-btn{background:none;border:none;color:#999;cursor:pointer;font-size:var(--xui-font-size-lg);line-height:1;margin:0 8px;padding:0}.xUi-select .xUi-select-clear-btn:hover{color:var(--xui-primary-color)}.xUi-select-dropdown{background-color:var(--xui-select-background-color);border-radius:var(--xui-border-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.15);left:0;margin-top:5px;max-height:350px;overflow-y:auto;position:absolute;right:unset;top:100%;width:inherit;z-index:10}.xUi-select-dropdown.bottomRight,.xUi-select-dropdown.topRight{left:unset;right:0}.xUi-select .xUi-select-loading-spinner{color:#999;padding:10px;text-align:center}.xUi-select:focus-within{border-color:var(--xui-primary-color-light);box-shadow:none}.xUi-select:hover:not(.xUi-select-disabled){border-color:var(--xui-primary-color)}.xUi-select-disabled,.xUi-select-disabled .xUi-select-input,.xUi-select-disabled .xUi-select-trigger{cursor:not-allowed!important;opacity:.6!important}.xUi-select-selected-icon{color:var(--xui-primary-color-light)}.xUi-select-error{border-color:var(--xui-error-color)}.xUi-select-arrow .error-svg-icon,.xUi-select-error .error-svg-icon{color:var(--xui-error-color)}.xUi-select .xUi-select-input{align-items:center;background:transparent;border:none;color:var(--xui-text-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);height:-webkit-fill-available;outline:none;padding:0;user-select:none;width:100%}.xUi-select .xUi-select-input:focus{border:none;box-shadow:none;outline:none}.xUi-select.middle{border-radius:var(--xui-border-radius-md);min-height:30px}.xUi-select.middle,.xUi-select.middle input{font-size:var(--xui-font-size-md)}.xUi-select.middle .xUi-select-trigger{border-radius:var(--xui-border-radius-md)}.xUi-select.large{font-size:var(--xui-font-size-lg);min-height:44px}.xUi-select.large,.xUi-select.large .xUi-select-trigger{border-radius:var(--xui-border-radius-lg)}.xUi-select input{font-size:var(--xui-font-size-lg)}";
 styleInject(css_248z$5);
 
@@ -3534,7 +3540,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
         className: `${prefixCls}-selected-icon`
       }, menuItemSelectedIcon === true ? /*#__PURE__*/React.createElement(CheckIcon, null) : menuItemSelectedIcon));
     });
-    return dropdownRender ? dropdownRender(options) : options;
+    return options;
   })();
   const dropdownContent = !loading && open && isOpen && /*#__PURE__*/React.createElement("div", {
     className: clsx([`${prefixCls}-dropdown`, {
@@ -3543,7 +3549,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     }]),
     style: {
       ...dropdownPosition,
-      maxHeight: listHeight,
+      maxHeight: dropdownRender ? 'unset' : listHeight,
       opacity: Object.keys(dropdownPosition).length ? 1 : 0
     }
   }, filterable && /*#__PURE__*/React.createElement("input", {
@@ -3552,7 +3558,16 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     value: searchQuery,
     onChange: handleSearch,
     placeholder: "Search..."
-  }), !loading && /*#__PURE__*/React.createElement("div", {
+  }), !loading &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  React.createElement(ConditionalWrapper, {
+    wrapper: element => {
+      return dropdownRender?.(element || /*#__PURE__*/React.createElement(React.Fragment, null, " ")) || /*#__PURE__*/React.createElement(React.Fragment, null, " ");
+    },
+    condition: !!dropdownRender
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-options`,
     style: {
       maxHeight: listHeight,
@@ -3566,7 +3581,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       handleSelect(e, searchQuery);
     },
     "data-value": searchQuery
-  }, searchQuery), filteredOptions.length ? dataRender : !asTag ? notFoundContent || /*#__PURE__*/React.createElement(EmptyContent, null) : null));
+  }, searchQuery), filteredOptions.length ? dataRender : !asTag ? notFoundContent || /*#__PURE__*/React.createElement(EmptyContent, null) : null)));
   const selectedOption = (() => {
     const option = extractedOptions.find(e => e.value === selected || e.label === selected || e.children === selected) || selected;
     return option?.children || option?.label || option?.value || null;