kahuna-base-react-components 1.2.7 → 1.2.9

package/dist/types.d.ts

@@ -176,6 +176,7 @@ interface KDropdownProps {
     allowContainerShrink?: boolean;
     border?: string;
     activeBorder?: string;
+    onInputChange?: (text: string) => void;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/assets/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C9.65751 14 10.7315 13.6424 11.6176 13.0317L15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071C17.0976 16.3165 17.0976 15.6834 16.7071 15.2928L13.0318 11.6175C13.6424 10.7315 14 9.65749 14 8.5C14 5.46243 11.5376 3 8.5 3ZM5 8.5C5 6.567 6.567 5 8.5 5C10.433 5 12 6.567 12 8.5C12 10.433 10.433 12 8.5 12C6.567 12 5 10.433 5 8.5Z" fill="black"/>
+</svg>

package/src/components/KDropdown/KDropdown.stories.tsx

@@ -79,6 +79,7 @@ KDropdownSingle.args = {
   placeholder: "Select single...",
   isClearable: true,
   isEllipsis: true,
+  selected: {label: "1", value: 1},
   allowContainerShrink: true,
   hideChosenOptionIcon: true,
   onBlur: (value: any) => {

package/src/components/KDropdown/KDropdown.tsx

@@ -52,6 +52,7 @@ export interface KDropdownProps {
   allowContainerShrink?: boolean // allows container to shrink if label is smaller than width, width should be fixed value
   border?: string
   activeBorder?: string
+  onInputChange?: (text: string) => void
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
@@ -72,7 +73,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
 
     setBackground(background)
     setBorder(border)
-  
+    setSelectedOption(props.selected)
   }, [props.selected])
 
   const width = props.width || "100%"
@@ -234,11 +235,15 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         placeholder={props.placeholder || ""}
         options={props.options}
         className={"k-dropdown"}
+        onInputChange={(text) => {
+          if (props.onInputChange) props.onInputChange(text)
+        }}
         onBlur={() => {
           if (props.onBlur) props.onBlur(selectedOption)
         }}
         filterOption={customFilterOption}
         isClearable={isClearable}
+        value={selectedOption}
         hideSelectedOptions={!isMulti ? false : showOnlyIconsInMulti ? false : true}
         styles={{
           control: (baseStyles, state) => ({

package/src/main.css

@@ -253,4 +253,4 @@
 .k-code-input-character-container:disabled {
     background: #F7F7F7 !important;
     border: none !important;
-}
+}