@northlight/ui 2.25.1 → 2.26.0

package/dist/es/northlight.d.ts

@@ -4181,7 +4181,11 @@ interface CreatableSelectDropdownProps<T extends string = string> {
     /**
      * Value of the initially selected option.
      */
-    initialValue?: T;
+    defaultValue?: T;
+    /**
+     * Selected value.
+     */
+    value?: T;
     /**
      *
       Default placement of the menu in relation to the control. 'auto'
@@ -4220,6 +4224,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
  *           standardOptions={someOptions}
  *           onOptionChange={setArtist}
  *           width="300px"
+ *           value={artist ? artist.value : undefined}
  *         />
  *         {artist && artist.value !== 'Add option...' && (
  *           <H3 py={8}>The best artist is: {artist.label}</H3>
@@ -4232,7 +4237,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
  *           standardOptions={someOtherOptions}
  *           onOptionChange={setElement}
  *           width="300px"
- *           initialValue="technique"
+ *           value={element ? element.value : undefined}
  *         />
  *         {element && element.value !== 'Add option...' && (
  *           <H3 py={8}>
@@ -4258,7 +4263,7 @@ interface CreatableSelectDropdownProps<T extends string = string> {
  * }
  * ?)
  */
-declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
+declare const CreatableSelectDropdown: <T extends string = string>({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, defaultValue, value, menuPlacement, }: CreatableSelectDropdownProps<T>) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 

package/dist/es/northlight.js

@@ -13903,18 +13903,22 @@ const CreatableSelectDropdown = ({
   onOptionChange,
   width = "100%",
   variant = "outline",
-  initialValue,
+  defaultValue,
+  value,
   menuPlacement = "bottom"
 }) => {
   const initialSelectedOption = useMemo(
     () => {
-      var _a;
-      if (isNil(initialValue)) {
-        return null;
+      var _a, _b;
+      if (!isNil(value)) {
+        return (_a = standardOptions.find((option) => option.value === value)) != null ? _a : null;
       }
-      return (_a = standardOptions.find((option) => option.value === initialValue)) != null ? _a : null;
+      if (!isNil(defaultValue)) {
+        return (_b = standardOptions.find((option) => option.value === defaultValue)) != null ? _b : null;
+      }
+      return null;
     },
-    []
+    [value]
   );
   const [selectedOption, setSelectedOption] = useState(initialSelectedOption);
   const [newOptionText, setNewOptionText] = useState("");