@luscii-healthtech/web-ui 54.3.2 → 54.3.3

package/dist/index.development.js

@@ -25,6 +25,7 @@ var RadixHC = require('@radix-ui/react-hover-card');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var PropTypes = require('prop-types');
 var ReactSelect = require('react-select');
+var Creatable = require('react-select/creatable');
 var RadixSwitch = require('@radix-ui/react-switch');
 var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
@@ -64,6 +65,7 @@ var RadixHC__namespace = /*#__PURE__*/_interopNamespace(RadixHC);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
+var Creatable__default = /*#__PURE__*/_interopDefault(Creatable);
 var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
@@ -4540,9 +4542,30 @@ function generateCustomStyles(hasError) {
   };
 }
 const Select = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className, skipValueProcessing } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className", "skipValueProcessing"]);
+  var _b, _c;
+  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className, skipValueProcessing, isCreatable = false, onCreateOption, formatCreateLabel } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className", "skipValueProcessing", "isCreatable", "onCreateOption", "formatCreateLabel"]);
+  const internalRef = React__namespace.default.useRef(null);
+  const mergedRef = React__namespace.default.useCallback((instance) => {
+    internalRef.current = instance;
+    if (typeof innerRef === "function") {
+      innerRef(instance);
+    } else if (innerRef) {
+      innerRef.current = instance;
+    }
+  }, [innerRef]);
   const customStyles = generateCustomStyles(isError);
   const mergedStyles = ReactSelect.mergeStyles(customStyles, styles);
+  const handleCreateOption = React__namespace.default.useCallback((inputValue) => {
+    if (onCreateOption) {
+      onCreateOption(inputValue);
+    }
+    const timeoutId = setTimeout(() => {
+      if (internalRef.current && internalRef.current.focus) {
+        internalRef.current.focus();
+      }
+    }, 0);
+    return () => clearTimeout(timeoutId);
+  }, [onCreateOption]);
   const isOptionsGrouped = !options ? false : options.reduce((acc, o) => acc || "options" in o && !("values" in o), false);
   const flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap((g) => g.options) : options;
   const onChangeWrapped = !onChange ? void 0 : isMulti ? (val, a) => onChange(val.map((v) => v.value), a) : (val, a) => onChange(val === null || val === void 0 ? void 0 : val.value, a);
@@ -4557,20 +4580,38 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
     return dataProps;
   };
   const CustomContainer = (_a2) => {
-    var { children } = _a2, commonProps = __rest(_a2, ["children"]);
-    return jsxRuntime.jsx(ReactSelect.components.SelectContainer, Object.assign({}, commonProps, { innerProps: Object.assign({}, commonProps.innerProps, Object.assign({}, getDataAttributes())), children }));
+    var { children } = _a2, commonProps2 = __rest(_a2, ["children"]);
+    return jsxRuntime.jsx(ReactSelect.components.SelectContainer, Object.assign({}, commonProps2, { innerProps: Object.assign({}, commonProps2.innerProps, Object.assign({}, getDataAttributes())), children }));
   };
-  return jsxRuntime.jsx(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: skipValueProcessing ? onChange : onChangeWrapped, value: skipValueProcessing ? value : valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
-    "ui:w-16": width === "sm",
-    "ui:w-32": width === "md",
-    "ui:w-56": width === "lg",
-    "ui:w-80": width === "xl",
-    "ui:grow": width === "full"
-  }), components: {
-    SelectContainer: CustomContainer,
-    DropdownIndicator: SelectDropdownIndicator,
-    LoadingIndicator: SelectLoadingIndicator
-  } }));
+  const commonProps = Object.assign(Object.assign({}, otherProps), {
+    ref: mergedRef,
+    styles: mergedStyles,
+    options,
+    onChange: skipValueProcessing ? onChange : onChangeWrapped,
+    value: skipValueProcessing ? value : valueWrapped,
+    isMulti,
+    // For multi-select or creatable, default to keeping the input focused and menu open
+    // after selection so users can continue adding options without re-focusing.
+    // Users can explicitly override this by passing these props.
+    blurInputOnSelect: (_b = otherProps.blurInputOnSelect) !== null && _b !== void 0 ? _b : isMulti || isCreatable ? false : void 0,
+    closeMenuOnSelect: (_c = otherProps.closeMenuOnSelect) !== null && _c !== void 0 ? _c : isMulti || isCreatable ? false : void 0,
+    className: classNames__default.default("customized-select", className, {
+      "ui:w-16": width === "sm",
+      "ui:w-32": width === "md",
+      "ui:w-56": width === "lg",
+      "ui:w-80": width === "xl",
+      "ui:grow": width === "full"
+    }),
+    components: {
+      SelectContainer: CustomContainer,
+      DropdownIndicator: SelectDropdownIndicator,
+      LoadingIndicator: SelectLoadingIndicator
+    }
+  });
+  if (isCreatable) {
+    return jsxRuntime.jsx(Creatable__default.default, Object.assign({}, commonProps, { onCreateOption: handleCreateOption, formatCreateLabel }));
+  }
+  return jsxRuntime.jsx(ReactSelect__default.default, Object.assign({}, commonProps));
 });
 
 const LabeledSelect = React__namespace.default.forwardRef((props, ref) => {