@northlight/ui 2.23.0 → 2.24.1

package/dist/es/northlight.d.ts

@@ -32,7 +32,6 @@ import { Props as Props$1 } from 'react-input-mask';
 import { NumericFormatProps } from 'react-number-format';
 import { Schema } from 'joi';
 import { UseClickableProps } from '@chakra-ui/clickable';
-import { Option as Option$1 } from '@northlight/ui';
 import { Variant } from 'chakra-react-select/dist/types/types';
 import * as _react_types_shared from '@react-types/shared';
 import * as _react_aria_focus from '@react-aria/focus';
@@ -4135,7 +4134,7 @@ interface StepStackProps extends StackProps {
 */
 declare const StepStack: ({ children, spacing, rowHeight, stepCircleAlignment, stepCircleMarginTopPx, ...rest }: StepStackProps) => JSX.Element;
 
-interface CreationOption extends Option$1 {
+interface CreationOption extends Option {
     isCreation: boolean;
 }
 interface CreatableSelectDropdownProps {
@@ -4143,12 +4142,12 @@ interface CreatableSelectDropdownProps {
      * An array of "Option" objects that represents the initial options available in the dropdown.
      * Each "Option" object must have a "label" and a "value" property (both strings).
      */
-    standardOptions: Option$1[];
+    standardOptions: Option[];
     /**
      * A callback function that is called whenever the selected option changes.
      * This function receives the newly selected "Option" object as its only argument.
      */
-    onOptionChange: (option: Option$1) => void;
+    onOptionChange: (option: Option) => void;
     /**
      * Optional placeholder text displayed when no option is selected and the dropdown is not focused.
      * Defaults to 'Select or create...' if not provided.
@@ -4178,6 +4177,10 @@ interface CreatableSelectDropdownProps {
      *
     */
     variant?: Variant;
+    /**
+     * Value of the initially selected option.
+     */
+    initialValue?: string;
 }
 
 /**
@@ -4186,36 +4189,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

@@ -13811,7 +13811,7 @@ var __objRest = (source, exclude) => {
 const customComponents = {
   Option: (_a) => {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$1({}, props), /* @__PURE__ */ React.createElement(React.Fragment, null, props.data.isCreation ? /* @__PURE__ */ React.createElement(Flex, { mr: 3, width: 1.5, mb: 0.5, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React.createElement(Icon$2, { mb: "4px", as: PlusSolid, color: "brand" })) : /* @__PURE__ */ React.createElement(Box, { mr: 3, width: 1.5 }), children));
+    return /* @__PURE__ */ React.createElement(chakraComponents.Option, __spreadValues$1({}, props), /* @__PURE__ */ React.createElement(React.Fragment, null, props.data.isCreation ? /* @__PURE__ */ React.createElement(Flex, { mr: 3, width: 1.5, mb: 0.5, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React.createElement(Icon$1, { mb: "4px", as: PlusSolid, color: "brand" })) : /* @__PURE__ */ React.createElement(Box, { mr: 3, width: 1.5 }), children));
   }
 };
 
@@ -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;
     }
@@ -13891,25 +13899,26 @@ const CreatableSelectDropdown = ({
   const combinedOptions = [...standardOptions, ...createdOptions];
   const customOptions = [
     __spreadProps(__spreadValues({}, creationOption), {
-      icon: /* @__PURE__ */ React.createElement(Icon$2, { as: PlusSolid, color: "brand" })
+      icon: /* @__PURE__ */ React.createElement(Icon$1, { as: PlusSolid, color: "brand" })
     }),
     ...combinedOptions
   ];
   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,