@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/input/select/index.js

@@ -0,0 +1,436 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import NativeSelect from "@mui/material/NativeSelect";
+import { transformDataset } from "../../../utils/transformedDataset-utils";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "app-select-wrapper ng-dirty";
+const WmSelect = React.memo(
+  (props) => {
+    var _a, _b;
+    const {
+      autofocus,
+      className,
+      datafield = "key",
+      dataset,
+      datavalue,
+      disabled = false,
+      displayExpression,
+      displaylabel,
+      displayfield = "value",
+      groupby,
+      hint,
+      dataPath,
+      arialabel,
+      multiple = false,
+      name,
+      styles,
+      orderby,
+      placeholder,
+      readonly = false,
+      required = false,
+      shortcutkey,
+      listener,
+      tabindex = 0,
+      match,
+      onClick,
+      onChange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onEnter,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyUp
+    } = props;
+    const selectRef = useRef(null);
+    const lastDatavalueRef = useRef(datavalue);
+    const externalDatavalueRef = useRef(null);
+    const [displayValue, setDisplayValue] = useState("");
+    const [localDatavalue, setLocalDatavalue] = useState(
+      multiple ? Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [] : datavalue
+    );
+    const [isTouched, setIsTouched] = useState(false);
+    const [showError, setShowError] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [prevDatavalue, setPrevDatavalue] = useState(datavalue);
+    const resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+    const transformedDataset = transformDataset(
+      resolvedDataset,
+      datafield,
+      displayfield,
+      displaylabel,
+      displayExpression,
+      orderby,
+      groupby,
+      dataPath,
+      "",
+      match
+    );
+    const validateInput = useCallback(
+      (value) => {
+        if (value === "") {
+          return { isValid: !required, message: required ? "This field is required" : "" };
+        }
+        if (!value || !value.toString().trim()) {
+          return { isValid: !required, message: required ? "This field is required" : "" };
+        }
+        return { isValid: true, message: "" };
+      },
+      [required]
+    );
+    const handleValueChange = async (event) => {
+      var _a2, _b2, _c;
+      if (props.readonly || disabled) {
+        return;
+      }
+      const newValue = multiple ? Array.from(event.target.selectedOptions, (option) => option.value) : event.target.selectedIndex;
+      if (multiple) {
+        const filteredValues = newValue.filter((val) => val !== placeholder);
+        setLocalDatavalue(filteredValues);
+        const selectedTexts = Array.from(
+          event.target.selectedOptions,
+          (option) => option.text
+        ).filter((text) => text !== placeholder);
+        setDisplayValue(selectedTexts.join(", "));
+        if (listener == null ? void 0 : listener.onChange) {
+          if (filteredValues.length === 0) {
+            await listener.onChange(props.fieldName || name, {
+              datavalue: [],
+              displayValue: []
+            });
+          } else {
+            const findItem = (val) => transformedDataset.find(
+              (item) => typeof item.value === "object" ? String(item.key) === String(val) : String(item.value) === String(val)
+            );
+            const selectedValues = filteredValues.map(
+              (val) => {
+                const item = findItem(val);
+                return item ? item.value : val;
+              }
+            );
+            const selectedDisplayValues = filteredValues.map(
+              (val) => {
+                const item = findItem(val);
+                return item ? item.label : val;
+              }
+            );
+            listener.onChange(props.fieldName || name, {
+              datavalue: selectedValues,
+              displayValue: selectedDisplayValues
+            });
+          }
+        }
+      } else {
+        setLocalDatavalue(event.target.value);
+        setDisplayValue(((_a2 = event.target.options[event.target.selectedIndex]) == null ? void 0 : _a2.text) || "");
+        if (listener == null ? void 0 : listener.onChange) {
+          if (newValue === 0 || event.target.value === placeholder) {
+            await listener.onChange(props.fieldName || name, {
+              datavalue: "",
+              displayValue: ""
+            });
+          } else {
+            await listener.onChange(props.fieldName || name, {
+              datavalue: transformedDataset[newValue - 1].value,
+              displayValue: transformedDataset[newValue - 1].label
+            });
+          }
+        }
+      }
+      if (onChange)
+        onChange == null ? void 0 : onChange(
+          event,
+          (_b2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b2[name],
+          ((_c = transformedDataset == null ? void 0 : transformedDataset[newValue - 1]) == null ? void 0 : _c.value) || "en",
+          prevDatavalue
+        );
+      setPrevDatavalue(newValue);
+    };
+    const handleBlur = (e) => {
+      const newValue = e.target.value;
+      const selectedItem = transformedDataset.find((item) => String(item.value) === newValue);
+      const validation = validateInput(selectedItem == null ? void 0 : selectedItem.value);
+      setIsTouched(true);
+      if (!validation.isValid) {
+        setIsDirty(true);
+      } else {
+        setIsDirty(false);
+      }
+      setShowError(!validation.isValid);
+      onBlur == null ? void 0 : onBlur(e, props);
+    };
+    const handleFloatingLabel = useCallback(
+      (event) => {
+        var _a2, _b2, _c, _d;
+        const captionEl = (_a2 = selectRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
+        if (!captionEl) return;
+        const placeholderOption = (_b2 = selectRef.current) == null ? void 0 : _b2.querySelector("#placeholderOption");
+        if (!placeholderOption) return;
+        if (event.type === "mousedown" && (!datavalue || datavalue && ((_d = (_c = selectRef.current) == null ? void 0 : _c.querySelector("option:checked")) == null ? void 0 : _d.textContent) === "")) {
+          if (placeholder) {
+            placeholderOption.textContent = placeholder;
+          }
+        } else if (!datavalue) {
+          if (placeholder) {
+            placeholderOption.textContent = "";
+          }
+          captionEl.classList.remove("float-active");
+        }
+      },
+      [datavalue, placeholder]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === "Enter") {
+          onEnter == null ? void 0 : onEnter(event);
+        }
+        onKeyDown == null ? void 0 : onKeyDown(event);
+      },
+      [onEnter, onKeyDown]
+    );
+    useEffect(() => {
+      if (datavalue !== void 0) {
+        if (multiple) {
+          const normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
+          const selectedOptions = normalizedValue.map(
+            (val) => transformedDataset.find((item) => String(item.value) === String(val))
+          );
+          const displayText = selectedOptions.map((option) => option == null ? void 0 : option.label).join(", ");
+          setDisplayValue(displayText);
+        } else {
+          const selectedOption = transformedDataset.find((item) => item.selected);
+          if (selectedOption) {
+            setDisplayValue(selectedOption.label);
+          }
+        }
+      }
+    }, [transformedDataset, datavalue, multiple]);
+    useEffect(() => {
+      var _a2;
+      if (lastDatavalueRef.current !== datavalue) {
+        lastDatavalueRef.current = datavalue;
+      } else {
+        return;
+      }
+      if (multiple) {
+        const normalizedValue = Array.isArray(datavalue) ? datavalue : datavalue ? [datavalue] : [];
+        if (JSON.stringify(normalizedValue) !== JSON.stringify(localDatavalue)) {
+          setLocalDatavalue(normalizedValue);
+        }
+      } else {
+        if (datavalue !== localDatavalue) {
+          let computedDisplayValue = "";
+          if (typeof datavalue === "object" && datavalue !== null) {
+            const matchingItem = transformedDataset.find(
+              (item) => item.value === datavalue || JSON.stringify(item.value) === JSON.stringify(datavalue)
+            );
+            computedDisplayValue = (matchingItem == null ? void 0 : matchingItem.label) || "";
+          } else {
+            const matchingItem = transformedDataset.find((item) => item.value == datavalue);
+            computedDisplayValue = (matchingItem == null ? void 0 : matchingItem.label) || "";
+          }
+          externalDatavalueRef.current = datavalue;
+          setLocalDatavalue(datavalue);
+          (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
+            datavalue,
+            displayValue: computedDisplayValue
+          });
+        }
+      }
+    }, [datavalue, multiple, transformedDataset]);
+    const handleClick = useCallback(
+      (event) => {
+        onClick == null ? void 0 : onClick(event);
+      },
+      [onClick]
+    );
+    const handleFocus = useCallback(
+      (event) => {
+        onFocus == null ? void 0 : onFocus(event);
+      },
+      [onFocus]
+    );
+    const handleMouseEnter = useCallback(
+      (event) => {
+        onMouseEnter == null ? void 0 : onMouseEnter(event);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (event) => {
+        onMouseLeave == null ? void 0 : onMouseLeave(event);
+      },
+      [onMouseLeave]
+    );
+    const handleKeyUp = useCallback(
+      (event) => {
+        onKeyUp == null ? void 0 : onKeyUp(event);
+      },
+      [onKeyUp]
+    );
+    const events = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+      onChange: handleValueChange,
+      onBlur: (e) => {
+        handleFloatingLabel(e);
+        handleBlur(e);
+      }
+    }, onFocus ? { onFocus: handleFocus } : {}), onKeyDown ? { onKeyDown: handleKeyDown } : {}), onKeyUp ? { onKeyUp: handleKeyUp } : {}), onClick ? { onClick: handleClick } : {}), onMouseEnter ? { onMouseEnter: handleMouseEnter } : {}), onMouseLeave ? { onMouseLeave: handleMouseLeave } : {});
+    const computedSelectValue = useMemo(() => {
+      if (multiple) {
+        return Array.isArray(localDatavalue) ? localDatavalue : [];
+      }
+      if (typeof localDatavalue === "object" && localDatavalue !== null) {
+        const matchingItem2 = transformedDataset.find(
+          (item) => item.value === localDatavalue || JSON.stringify(item.value) === JSON.stringify(localDatavalue)
+        );
+        if (matchingItem2) {
+          return { key: matchingItem2.key, displayValue: matchingItem2.label };
+        }
+      }
+      const matchingItem = transformedDataset.find((item) => item.value == localDatavalue);
+      const displayLabel = (matchingItem == null ? void 0 : matchingItem.label) || "";
+      return { key: localDatavalue, displayValue: displayLabel };
+    }, [localDatavalue, transformedDataset, multiple]);
+    const prevComputedValueRef = useRef(null);
+    useEffect(() => {
+      var _a2;
+      if (multiple) return;
+      const currentValue = computedSelectValue;
+      const isExternalChange = externalDatavalueRef.current !== null && (localDatavalue === externalDatavalueRef.current || typeof localDatavalue === "object" && typeof externalDatavalueRef.current === "object" && JSON.stringify(localDatavalue) === JSON.stringify(externalDatavalueRef.current));
+      if (externalDatavalueRef.current !== null) {
+        if (isExternalChange) {
+          externalDatavalueRef.current = null;
+        }
+        prevComputedValueRef.current = currentValue;
+        return;
+      }
+      const prevValue = prevComputedValueRef.current;
+      if (currentValue.displayValue && (!prevValue || prevValue.key !== currentValue.key || prevValue.displayValue !== currentValue.displayValue)) {
+        (_a2 = listener == null ? void 0 : listener.onChange) == null ? void 0 : _a2.call(listener, props.fieldName || name, {
+          displayValue: currentValue.displayValue
+        });
+      }
+      prevComputedValueRef.current = currentValue;
+    }, [computedSelectValue, multiple, listener, props.fieldName, name, localDatavalue]);
+    return /* @__PURE__ */ jsx("div", { className: clsx(DEFAULT_CLASS, className), hidden: props.hidden, children: /* @__PURE__ */ jsxs(
+      NativeSelect,
+      __spreadProps(__spreadValues({
+        name,
+        IconComponent: () => null,
+        className: clsx(
+          isTouched ? "ng-touched" : "ng-untouched",
+          isDirty ? "ng-invalid" : "ng-valid",
+          className,
+          "wm-native-select-root"
+        ),
+        value: multiple ? computedSelectValue : (_b = (_a = computedSelectValue.key) != null ? _a : placeholder) != null ? _b : ""
+      }, events), {
+        sx: {
+          "& .MuiNativeSelect-select": {
+            WebkitAppearance: (styles == null ? void 0 : styles.WebkitAppearance) || "auto"
+          },
+          "& .MuiNativeSelect-icon": {
+            display: "none"
+          }
+        },
+        inputProps: {
+          id: name,
+          name,
+          required,
+          autoFocus: autofocus,
+          tabIndex: tabindex,
+          "aria-label": arialabel,
+          multiple,
+          disabled,
+          "aria-readonly": readonly,
+          className: `app-select ${className} ${DEFAULT_CLASS}  form-control ng-valid ng-touched ng-dirty wm-app `,
+          accessKey: shortcutkey,
+          title: hint,
+          style: styles
+        },
+        readOnly: readonly,
+        children: [
+          /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: placeholder,
+              id: "placeholderOption",
+              hidden: !placeholder,
+              children: placeholder
+            },
+            "placeholder-text"
+          ),
+          groupby && transformedDataset ? transformedDataset.map((group) => /* @__PURE__ */ jsx("optgroup", { label: group.key, children: group.data.map((item) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: typeof item.value === "object" ? item.key : item.value,
+              children: item.label
+            },
+            `${group.key}-${item.key}`
+          )) }, group.key)) : transformedDataset && transformedDataset.map((item) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: typeof item.value === "object" ? item.key : item.value,
+              children: item.label
+            },
+            item.key
+          ))
+        ]
+      }),
+      name
+    ) });
+  },
+  (prevProps, nextProps) => {
+    const keys = [
+      "dataset",
+      "datafield",
+      "displayfield",
+      "displaylabel",
+      "displayExpression",
+      "orderby",
+      "groupby",
+      "dataPath",
+      "arialabel",
+      "multiple",
+      "styles",
+      "autofocus",
+      "disabled",
+      "readonly",
+      "required",
+      "datavalue",
+      "hidden",
+      "className"
+    ];
+    return keys.every((key) => prevProps[key] === nextProps[key]);
+  }
+);
+WmSelect.displayName = "WmSelect";
+const WithForm = withFormController(WmSelect);
+const WmSelectStandalone = withStandalone(WithForm);
+var select_default = withBaseWrapper(WithForm);
+export {
+  WmSelectStandalone as WmSelect,
+  select_default as default
+};

package/components/input/select/props.d.ts

@@ -0,0 +1,134 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Props specific to the WmSelect component.
+ */
+export interface SelectProps {
+    /**
+     * Whether the select should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * CSS class name override.
+     */
+    class?: string;
+    /**
+     * The field from the dataset to use as the data value.
+     */
+    datafield?: string;
+    /**
+     * The data source bound to the select widget.
+     */
+    dataset?: unknown[] | string | Record<string, unknown>;
+    /**
+     * Data path for nested data access.
+     */
+    dataPath?: string;
+    /**
+     * The currently selected data value.
+     */
+    datavalue?: string | number | boolean | null | Array<string | number | boolean>;
+    /**
+     * Expression to compute the display text for each option.
+     */
+    displayExpression?: string | ((item: Record<string, unknown>) => string);
+    /**
+     * The field from the dataset to display as the option label.
+     */
+    displayfield?: string;
+    /**
+     * Display label expression for the option text.
+     */
+    displaylabel?: string;
+    /**
+     * The field to group options by.
+     */
+    groupby?: string;
+    /**
+     * Match mode for filtering options.
+     */
+    match?: string;
+    /**
+     * Whether multiple selections are allowed.
+     */
+    multiple?: boolean;
+    /**
+     * The unique name of the select widget (required).
+     */
+    name: string;
+    /**
+     * Field(s) to order the options by.
+     */
+    orderby?: string;
+    /**
+     * Placeholder text shown when no option is selected.
+     */
+    placeholder?: string;
+    /**
+     * Whether the select is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * Whether a selection is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Keyboard shortcut key to focus the select.
+     */
+    shortcutkey?: string;
+    /**
+     * Callback invoked when the selection changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLSelectElement> | React.SyntheticEvent, widget: Record<string, unknown>, value: string | number | boolean | null | Array<string | number | boolean>, prevDatavalue: string | number | boolean | null | Array<string | number | boolean>) => void;
+    /**
+     * Callback invoked when the select is clicked.
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the select receives focus.
+     */
+    onFocus?: (event: React.FocusEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked on key down.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when enter is pressed.
+     */
+    onEnter?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse enters the select element.
+     */
+    onMouseEnter?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when the mouse leaves the select element.
+     */
+    onMouseLeave?: (event: React.MouseEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked on key up.
+     */
+    onKeyUp?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Callback invoked on key press.
+     */
+    onKeyPress?: (event: React.KeyboardEvent<HTMLElement>, widget?: Record<string, unknown>) => void;
+    /**
+     * Whether the input has a validation error.
+     */
+    error?: boolean;
+    /**
+     * Field name used by the form controller.
+     */
+    fieldName?: string;
+    /**
+     * Display value for the selected option.
+     */
+    displayValue?: string;
+}
+/**
+ * Combined props for the WmSelect component, including base WaveMaker props.
+ */
+export type WmSelectProps = Prettify<SelectProps & BaseProps>;