@dhasdk/simple-ui 1.0.15 → 1.0.17

package/README.md

@@ -1325,15 +1325,20 @@ Full list of props below
 | ----------- | -------- | -------- | -------- | ----------- |
 | airaLabel | **`string`** | Yes | **`'Search'`** | The aria-label to assign to this Search component |
 | className | **`string`** | Yes | see (1) below | alternate css classes to add/change styling of the div that wraps the input element. |
+| classNameContainer | **`string`** | Yes | **`h-12 md:h-[50px] lg:h-14 flex items-center relative`** | alternate css classes to add/change styling of the span tag that wraps the search component. |
+| classNameInputContainer | **`string`** | Yes | **`border-[#6a686b] w-[309px] md:w-[334px] lg:w-[350px] inline-flex bg-white items-center`** | alternate css classes to add/change styling of the span tag that wraps the search component. |
+| classNameListOutput | **`string`** | Yes | see (2) below | alternate css classes to add/change styling of the output list or search results box. |
 | iconLink | **`boolean`** | Yes | **`{false}`** | If set to true, a search icon is displayed that when clicked will expand into a wider Search component. |
 | searchableData | **`SearchDataItem[]`** | No | undefined | The data that the search component uses as its data source. This data must conform to the SearchDataItem interface. An example data file is shown above. |
-| searchHint | **`string`** | Yes | **`"Search result"`** | Changes the default input element hint text |
 | setSearchResults | **`(DataSearchResults) => return void`** | Yes |undefined | If the use case entails sending the user to a separate results page, provide a function here that takes those search and performs the desired action. See (2) below for the DataSearchResults definition. |
 
 1. Default className
   
   **`grow appearance-none h-8 md:h-[32px] lg:h-14 py-2 lg:ps-[19px] rounded-tl rounded-bl rounded-br-none rounded-tr-none lg:border border-[#07192d] font-['Arial'] bg-white text-[#333234] text-base lg:text-lg hover:border-[#5992fa] focus:border-[#5992fa] outline-hidden`**
 
+2. Default classNameListOutput
+
+**`absolute w-[309px] md:w-[334px] lg:w-[293px] top-[calc(100%+4px)] -mt-1 pt-1 focus:outline-hidden z-10 ms overflow-hidden bg-white lg:shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] border-[#6a686b] border-l border-b border-r lg:border-none`**
 
 ### Example Usage
 
@@ -1401,6 +1406,16 @@ The Search Results Interface
   }
 ```
 
+Example **`classNameContainer`** and **`classNameInputContainer`** usage:
+
+```jsx
+<Search
+    searchableData={SearchableData}
+    classNameContainer='w-full'
+    classNameInputContainer="w-full md:w-full lg:w-full"
+  />
+```
+
 ### Dependencies
 
 **_none_**
@@ -1649,6 +1664,7 @@ Full list of props below
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | appName | string   | No  | undefined | The application name to dispilay |
+| children | ReactNode | Yes | undefined | This prop takes in any children and displays them between the horizontal rule and the list of menu items. It is intended for to allow developers to add a Search component.  See usage example above. |
 | className   | string   | Yes      | (1) below | a group of alternate css classes that can be specified by the developer and applied to the outer **`div`** element. |
 | clickOutsideCloses   | boolean   | Yes  | **`false`** | clicking or tapping elsewhere on the application will close the SideBarNav |
 | image | string   | No      | undefined | string path to the application logo to display |
@@ -1713,7 +1729,11 @@ const menuItems = [
   clickOutsideCloses
   menu
   className='bg-slate-200 border border-slate-400 rounded-l-md h-full'
-  />
+  >
+  <div className="my-4">
+    <Search searchableData={SearchableData} />
+  </div>
+</SideBarNav>
 ```
 
 ### Dependencies