@rescui/select 0.18.4 → 0.19.1

package/lib/native-select.js

@@ -1,5 +1,7 @@
 "use client";
-import React from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -46,143 +48,439 @@ const THEME_STYLES = {
   dark: styles.themeDark
 }; // eslint-disable-next-line complexity
 
-const NativeSelect = _ref => {
-  let {
-    options = [],
-    size = 'm',
-    theme: themeFromProps,
-    className = null,
-    id,
-    style,
-    value,
-    onChange,
-    placeholder,
-    isLoading = false,
-    isDisabled = false,
-    isClearable = false,
-    trigger,
-    label,
-    note,
-    error,
-    reserveErrorLine = false,
-    noOptionsMessage,
-    name,
-    boldLabel = true,
-    ...rest
-  } = _ref;
-  const triggerRef = React.useRef(null);
+const NativeSelect = t0 => {
+  const $ = c(104);
+  let error;
+  let id;
+  let label;
+  let name;
+  let noOptionsMessage;
+  let note;
+  let onChange;
+  let placeholder;
+  let rest;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let themeFromProps;
+  let trigger;
+  let value;
+
+  if ($[0] !== t0) {
+    ({
+      options: t1,
+      size: t2,
+      theme: themeFromProps,
+      className: t3,
+      id,
+      style,
+      value,
+      onChange,
+      placeholder,
+      isLoading: t4,
+      isDisabled: t5,
+      isClearable: t6,
+      trigger,
+      label,
+      note,
+      error,
+      reserveErrorLine: t7,
+      noOptionsMessage,
+      name,
+      boldLabel: t8,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = error;
+    $[2] = id;
+    $[3] = label;
+    $[4] = name;
+    $[5] = noOptionsMessage;
+    $[6] = note;
+    $[7] = onChange;
+    $[8] = placeholder;
+    $[9] = rest;
+    $[10] = style;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
+    $[19] = themeFromProps;
+    $[20] = trigger;
+    $[21] = value;
+  } else {
+    error = $[1];
+    id = $[2];
+    label = $[3];
+    name = $[4];
+    noOptionsMessage = $[5];
+    note = $[6];
+    onChange = $[7];
+    placeholder = $[8];
+    rest = $[9];
+    style = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    t5 = $[15];
+    t6 = $[16];
+    t7 = $[17];
+    t8 = $[18];
+    themeFromProps = $[19];
+    trigger = $[20];
+    value = $[21];
+  }
+
+  let t9;
+
+  if ($[22] !== t1) {
+    t9 = t1 === undefined ? [] : t1;
+    $[22] = t1;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+
+  const options = t9;
+  const size = t2 === undefined ? "m" : t2;
+  const className = t3 === undefined ? null : t3;
+  const isLoading = t4 === undefined ? false : t4;
+  const isDisabled = t5 === undefined ? false : t5;
+  const isClearable = t6 === undefined ? false : t6;
+  const reserveErrorLine = t7 === undefined ? false : t7;
+  const boldLabel = t8 === undefined ? true : t8;
+  const [triggerEl, setTriggerEl] = useState(null);
+  let t10;
+
+  if ($[24] !== error || $[25] !== isDisabled || $[26] !== label || $[27] !== note || $[28] !== triggerEl) {
+    t10 = {
+      prefix: "native-select",
+      error,
+      description: note,
+      label,
+      fieldEl: triggerEl,
+      isDisabled
+    };
+    $[24] = error;
+    $[25] = isDisabled;
+    $[26] = label;
+    $[27] = note;
+    $[28] = triggerEl;
+    $[29] = t10;
+  } else {
+    t10 = $[29];
+  }
+
   const {
     labelProps,
     fieldProps,
     errorMessageProps,
     descriptionProps
-  } = useA11y({
-    prefix: 'native-select',
-    error,
-    description: note,
-    label,
-    fieldRef: triggerRef,
-    isDisabled
-  });
+  } = useA11y(t10);
+  let t11;
+
+  if ($[30] !== onChange) {
+    t11 = () => onChange(null);
 
-  const reset = () => onChange(null);
+    $[30] = onChange;
+    $[31] = t11;
+  } else {
+    t11 = $[31];
+  }
 
+  const reset = t11;
   const theme = useThemeWithUndefined(themeFromProps);
+  let t12;
 
-  const handleChange = event => {
-    const newValue = event.target.value;
-    const selectedOption = findSelectedOption(options, newValue);
+  if ($[32] !== onChange || $[33] !== options) {
+    t12 = event => {
+      const newValue = event.target.value;
+      const selectedOption = findSelectedOption(options, newValue);
 
-    if (onChange) {
-      onChange(selectedOption);
-    }
-  }; // delete it when triggerFunc is migrated to the css-states instead of js-props for hover/focus
-  // replace it with ":focus + &" selector in that case
+      if (onChange) {
+        onChange(selectedOption);
+      }
+    };
 
+    $[32] = onChange;
+    $[33] = options;
+    $[34] = t12;
+  } else {
+    t12 = $[34];
+  }
+
+  const handleChange = t12;
+  let t13;
+
+  if ($[35] !== isDisabled) {
+    t13 = {
+      isDisabled
+    };
+    $[35] = isDisabled;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
 
   const {
     isFocused,
     focusProps
-  } = useFocus({
-    isDisabled
-  }); // same as above, could be replaced with ":hover + &" selector
+  } = useFocus(t13);
+  let t14;
+
+  if ($[37] !== isDisabled) {
+    t14 = {
+      isDisabled
+    };
+    $[37] = isDisabled;
+    $[38] = t14;
+  } else {
+    t14 = $[38];
+  }
 
   const {
     isHovered,
     hoverProps
-  } = useHover({
-    isDisabled
-  });
-  const emptyListMessage = getEmptyMessage({
-    isLoading,
-    isNothingFound: false,
-    noOptionsMessage
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.root, SIZE_STYLES[size], THEME_STYLES[theme], styles.classic, isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error),
-    id: id,
-    style: style,
-    "data-test": "native-select"
-  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
-    theme: theme,
-    size: size,
-    disabled: isDisabled,
-    label: label,
-    labelProps: mergeProps(labelProps),
-    boldLabel: boldLabel,
-    error: error,
-    errorMessageProps: errorMessageProps,
-    reserveErrorLine: reserveErrorLine,
-    note: note,
-    descriptionProps: descriptionProps
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.triggerContainer
-  }, /*#__PURE__*/React.createElement("select", { ...rest,
-    ...mergeProps(fieldProps, focusProps, hoverProps, {
-      onKeyDown: event => {
-        // backspace and backspace removing the last selected item (when popup is closed)
-        if (isClearable && (event.key === 'Backspace' || event.key === 'Delete')) {
-          reset();
-        }
+  } = useHover(t14);
+  let t15;
+
+  if ($[39] !== isLoading || $[40] !== noOptionsMessage) {
+    t15 = getEmptyMessage({
+      isLoading,
+      isNothingFound: false,
+      noOptionsMessage
+    });
+    $[39] = isLoading;
+    $[40] = noOptionsMessage;
+    $[41] = t15;
+  } else {
+    t15 = $[41];
+  }
+
+  const emptyListMessage = t15;
+  const t16 = SIZE_STYLES[size];
+  const t17 = THEME_STYLES[theme];
+  const t18 = isDisabled ? styles.disabled : styles.enabled;
+  const t19 = Boolean(error) && styles.error;
+  let t20;
+
+  if ($[42] !== className || $[43] !== t16 || $[44] !== t17 || $[45] !== t18 || $[46] !== t19) {
+    t20 = cn(className, styles.root, t16, t17, styles.classic, t18, t19);
+    $[42] = className;
+    $[43] = t16;
+    $[44] = t17;
+    $[45] = t18;
+    $[46] = t19;
+    $[47] = t20;
+  } else {
+    t20 = $[47];
+  }
+
+  let t21;
+
+  if ($[48] !== labelProps) {
+    t21 = mergeProps(labelProps);
+    $[48] = labelProps;
+    $[49] = t21;
+  } else {
+    t21 = $[49];
+  }
+
+  let t22;
+
+  if ($[50] !== isClearable || $[51] !== reset) {
+    t22 = event_0 => {
+      if (isClearable && (event_0.key === "Backspace" || event_0.key === "Delete")) {
+        reset();
       }
-    }),
-    ref: triggerRef,
-    "data-test": "native-select_select",
-    "data-rs-internal": 'select-native__select',
-    className: styles.select,
-    disabled: isDisabled ? true : undefined,
-    onChange: handleChange,
-    name: name,
-    value: value?.value ?? ''
-  }, /*#__PURE__*/React.createElement(NativeSelectOptionsWithGroups, {
-    optionsWithGroups: options,
-    placeholder: placeholder,
-    emptyListMessage: emptyListMessage
-  })), trigger ? trigger({
-    focused: isFocused,
-    hovered: isHovered,
-    selectedLabel: value?.label,
-    selectedValue: value?.value,
-    placeholder
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.trigger),
-    "data-test": 'native-select_trigger',
-    "data-rs-internal": 'select-native-trigger'
-  }, /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.triggerText, !value?.value && styles.labelNotSelected),
-    "data-test": 'native-select_trigger_text',
-    "aria-hidden": "true"
-  }, value?.label ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
-    isLoading: isLoading,
-    triggerId: fieldProps.id,
-    onClear: () => {
-      reset();
-      triggerRef.current?.focus({
-        focusVisible: false
-      });
-    },
-    canHaveClearIcon: isClearable && !isDisabled && Boolean(value?.value)
-  })))));
+    };
+
+    $[50] = isClearable;
+    $[51] = reset;
+    $[52] = t22;
+  } else {
+    t22 = $[52];
+  }
+
+  let t23;
+
+  if ($[53] !== fieldProps || $[54] !== focusProps || $[55] !== hoverProps || $[56] !== t22) {
+    t23 = mergeProps(fieldProps, focusProps, hoverProps, {
+      onKeyDown: t22
+    });
+    $[53] = fieldProps;
+    $[54] = focusProps;
+    $[55] = hoverProps;
+    $[56] = t22;
+    $[57] = t23;
+  } else {
+    t23 = $[57];
+  }
+
+  const t24 = isDisabled ? true : undefined;
+  const t25 = value?.value ?? "";
+  let t26;
+
+  if ($[58] !== emptyListMessage || $[59] !== options || $[60] !== placeholder) {
+    t26 = /*#__PURE__*/React.createElement(NativeSelectOptionsWithGroups, {
+      optionsWithGroups: options,
+      placeholder: placeholder,
+      emptyListMessage: emptyListMessage
+    });
+    $[58] = emptyListMessage;
+    $[59] = options;
+    $[60] = placeholder;
+    $[61] = t26;
+  } else {
+    t26 = $[61];
+  }
+
+  let t27;
+
+  if ($[62] !== handleChange || $[63] !== name || $[64] !== rest || $[65] !== t23 || $[66] !== t24 || $[67] !== t25 || $[68] !== t26) {
+    t27 = /*#__PURE__*/React.createElement("select", _extends({}, rest, t23, {
+      ref: setTriggerEl,
+      "data-test": "native-select_select",
+      "data-rs-internal": "select-native__select",
+      className: styles.select,
+      disabled: t24,
+      onChange: handleChange,
+      name: name,
+      value: t25
+    }), t26);
+    $[62] = handleChange;
+    $[63] = name;
+    $[64] = rest;
+    $[65] = t23;
+    $[66] = t24;
+    $[67] = t25;
+    $[68] = t26;
+    $[69] = t27;
+  } else {
+    t27 = $[69];
+  }
+
+  let t28;
+
+  if ($[70] !== fieldProps || $[71] !== isClearable || $[72] !== isDisabled || $[73] !== isFocused || $[74] !== isHovered || $[75] !== isLoading || $[76] !== placeholder || $[77] !== reset || $[78] !== trigger || $[79] !== triggerEl || $[80] !== value?.label || $[81] !== value?.value) {
+    t28 = trigger ? trigger({
+      focused: isFocused,
+      hovered: isHovered,
+      selectedLabel: value?.label,
+      selectedValue: value?.value,
+      placeholder
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: cn(styles.trigger),
+      "data-test": "native-select_trigger",
+      "data-rs-internal": "select-native-trigger"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: cn(styles.triggerText, !value?.value && styles.labelNotSelected),
+      "data-test": "native-select_trigger_text",
+      "aria-hidden": "true"
+    }, value?.label ?? placeholder), /*#__PURE__*/React.createElement(Icons, {
+      isLoading: isLoading,
+      triggerId: fieldProps.id,
+      onClear: () => {
+        reset();
+        triggerEl?.focus({
+          focusVisible: false
+        });
+      },
+      canHaveClearIcon: isClearable && !isDisabled && Boolean(value?.value)
+    }));
+    $[70] = fieldProps;
+    $[71] = isClearable;
+    $[72] = isDisabled;
+    $[73] = isFocused;
+    $[74] = isHovered;
+    $[75] = isLoading;
+    $[76] = placeholder;
+    $[77] = reset;
+    $[78] = trigger;
+    $[79] = triggerEl;
+    $[80] = value?.label;
+    $[81] = value?.value;
+    $[82] = t28;
+  } else {
+    t28 = $[82];
+  }
+
+  let t29;
+
+  if ($[83] !== t27 || $[84] !== t28) {
+    t29 = /*#__PURE__*/React.createElement("div", {
+      className: styles.triggerContainer
+    }, t27, t28);
+    $[83] = t27;
+    $[84] = t28;
+    $[85] = t29;
+  } else {
+    t29 = $[85];
+  }
+
+  let t30;
+
+  if ($[86] !== boldLabel || $[87] !== descriptionProps || $[88] !== error || $[89] !== errorMessageProps || $[90] !== isDisabled || $[91] !== label || $[92] !== note || $[93] !== reserveErrorLine || $[94] !== size || $[95] !== t21 || $[96] !== t29 || $[97] !== theme) {
+    t30 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+      theme: theme,
+      size: size,
+      disabled: isDisabled,
+      label: label,
+      labelProps: t21,
+      boldLabel: boldLabel,
+      error: error,
+      errorMessageProps: errorMessageProps,
+      reserveErrorLine: reserveErrorLine,
+      note: note,
+      descriptionProps: descriptionProps
+    }, t29);
+    $[86] = boldLabel;
+    $[87] = descriptionProps;
+    $[88] = error;
+    $[89] = errorMessageProps;
+    $[90] = isDisabled;
+    $[91] = label;
+    $[92] = note;
+    $[93] = reserveErrorLine;
+    $[94] = size;
+    $[95] = t21;
+    $[96] = t29;
+    $[97] = theme;
+    $[98] = t30;
+  } else {
+    t30 = $[98];
+  }
+
+  let t31;
+
+  if ($[99] !== id || $[100] !== style || $[101] !== t20 || $[102] !== t30) {
+    t31 = /*#__PURE__*/React.createElement("div", {
+      className: t20,
+      id: id,
+      style: style,
+      "data-test": "native-select"
+    }, t30);
+    $[99] = id;
+    $[100] = style;
+    $[101] = t20;
+    $[102] = t30;
+    $[103] = t31;
+  } else {
+    t31 = $[103];
+  }
+
+  return t31;
 };
 
 NativeSelect.propTypes = {