@dhasdk/simple-ui 1.0.15 → 1.0.16

package/README.md

@@ -1325,6 +1325,8 @@ 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. |
 | 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 |
@@ -1401,6 +1403,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 +1661,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 +1726,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