@northlight/ui 2.23.0 → 2.24.0

package/dist/es/northlight.d.ts

@@ -4178,6 +4178,10 @@ interface CreatableSelectDropdownProps {
      *
     */
     variant?: Variant;
+    /**
+     * Value of the initially selected option.
+     */
+    initialValue?: string;
 }
 
 /**
@@ -4186,36 +4190,69 @@ interface CreatableSelectDropdownProps {
  * @see {@link https://northlight.dev/reference/creatable-select-dropdown}
  *
  * @example (Example)
- * ##Select the best artist
  * (?
  * () => {
  *   const [artist, setArtist] = useState(null);
- *   const options = [
+ *   const [element, setElement] = useState({ label: 'Technique', value: 'technique' })
+ *   const someOptions = [
  *     { label: 'Scooter', value: 'scooter' },
  *     { label: 'Snoop Doggy Dogg', value: 'snoop-dogg' },
  *   ];
  *
- *   const handleOptionChange = (newOption) => {
- *     setArtist(newOption);
- *     // Perform additional actions with the selected or created option
- *   };
+*   const someOtherOptions = [
+ *     { label: 'Vision', value: 'vision' },
+ *     { label: 'Technique', value: 'technique' },
+ *     { label: 'Expression', value: 'expression' }
+ *   ];
  *
  *   return (
- *     <Box align="left">
- *       <CreatableSelectDropdown
- *         standardOptions={options}
- *         onOptionChange={handleOptionChange}
- *         width="300px"
- *       />
- *       { artist && artist.value !== 'Add option...' && (
- *          <H3 py={8}>The best artist is: { artist.label }</H3>
- *        ) }
- *     </Box>
+ *     <VStack gap={10} alignItems={"flex-start"}>
+ *       <Box align="left">
+ *         <H1>Basic example</H1>
+ *         <H3>Select the best artist</H3>
+ *         <CreatableSelectDropdown
+ *           standardOptions={someOptions}
+ *           onOptionChange={setArtist}
+ *           width="300px"
+ *         />
+ *         {artist && artist.value !== 'Add option...' && (
+ *           <H3 py={8}>The best artist is: {artist.label}</H3>
+ *         )}
+ *       </Box>
+ *       <Box align="left">
+ *         <H1>Pre-selected option</H1>
+ *         <H3>What is the quintessential element of an exceptional artisan?</H3>
+ *         <CreatableSelectDropdown
+ *           standardOptions={someOtherOptions}
+ *           onOptionChange={setElement}
+ *           width="300px"
+ *           initialValue="technique"
+ *         />
+ *         {element && element.value !== 'Add option...' && (
+ *           <H3 py={8}>
+ *             {element.value === 'vision' && (
+ *               'The artist\'s vision shapes their creative world.'
+ *             )}
+ *             {element.value === 'technique' && (
+ *               'Technique is the legacy\'s bedrock.'
+ *             )}
+ *             {element.value === 'expression' && (
+ *               'Expression communicates the artist\'s inner voice.'
+ *             )}
+ *             {element.value !== 'vision' &&
+ *                element.value !== 'technique' &&
+ *                element.value !== 'expression' && (
+ *               'Absent the selection of legitimate alternatives.'
+ *              )}
+ *           </H3>
+ *         )}
+ *       </Box>
+ *     </VStack>
  *   );
  * }
  * ?)
  */
-declare const CreatableSelectDropdown: ({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, }: CreatableSelectDropdownProps) => JSX.Element;
+declare const CreatableSelectDropdown: ({ standardOptions, initialPlaceholder, addOptionPlaceholder, creationOption, onOptionChange, width, variant, initialValue, }: CreatableSelectDropdownProps) => JSX.Element;
 
 declare const useDebounce: <T>(value: T, delay: number) => T;
 

package/dist/es/northlight.js

@@ -13845,9 +13845,16 @@ const CreatableSelectDropdown = ({
   },
   onOptionChange,
   width = "100%",
-  variant = "outline"
+  variant = "outline",
+  initialValue = ""
 }) => {
-  const [selectedOption, setSelectedOption] = useState(null);
+  const initialSelectedOption = useMemo(
+    () => standardOptions.find(
+      (option) => option.value === initialValue
+    ) || null,
+    []
+  );
+  const [selectedOption, setSelectedOption] = useState(initialSelectedOption);
   const [newOptionText, setNewOptionText] = useState("");
   const [newOptionPlaceholder, setNewOptionPlaceholder] = useState(initialPlaceholder);
   const [createdOptions, setCreatedOptions] = useState([]);
@@ -13869,7 +13876,8 @@ const CreatableSelectDropdown = ({
   function isCreationOption(option) {
     return option && typeof option.isCreation === "string";
   }
-  const handleChange = (option) => {
+  const handleChange = (newValue, _actionMeta) => {
+    const option = newValue;
     if (option === null) {
       return;
     }
@@ -13898,18 +13906,19 @@ const CreatableSelectDropdown = ({
   return /* @__PURE__ */ React.createElement(
     CreatableSelect,
     {
-      chakraStyles: {
+      chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
         container: (provided) => __spreadProps(__spreadValues({}, provided), {
           width
         }),
         option: (provided, { isSelected }) => __spreadValues(__spreadValues({}, provided), isSelected && {
           color: "black"
         })
-      },
+      }),
       components: customComponents,
       options: customOptions,
       value: selectedOption,
       onChange: handleChange,
+      isMulti: false,
       onInputChange: handleInputChange,
       onKeyDown: handleKeyDown,
       onCreateOption: handleCreateOption,