@dhasdk/simple-ui 1.0.49 → 1.0.51

package/README.md

@@ -53,6 +53,10 @@ Tooltip
 
 ## Changelog
 
+1.0.51 - **`Search`** added iconLinkHandler prop + updates to documentation, **`ExpandableText`** added a **`clickHandler`** prop
+
+1.0.50 - fixes for **`Search`** results display on tailwindcss lg: breakpoint
+
 1.0.49 - bug fix for **`Search`** layout
 
 1.0.47/48 - bug fix for **`Search`** on dark backgrounds
@@ -896,6 +900,7 @@ buttons.
 | className   | **`string`**   | Yes      | **`''`**  | tailwind classes to style the component container with |
 | classNameCollapseButton | **`string`** | Yes | **`ml-2 text-blue-600 underline hover:text-blue-800 focus:outline-none`** | tailwind classes to style the collapse button |
 | classNameMoreButton | **`string`** | Yes | **`ml-2 text-blue-600 underline hover:text-blue-800 focus:outline-none`** | tailwind classes to style the more button |
+| clickHandler | **`(expanded: boolean) => void`** | Yes | **`undefined`** | Takes a user-defined function that accepts a boolean value indicating whether the text is expanded or not (true or false). |
 | collapseButton | **`boolean`** | Yes | **`false`** | to display a collapse button or not |
 | collapseText | **`string`** | Yes | **`'collapse'`** | text label for 'collapse' button |
 | initialChars | **`number`** | Yes | 40 | number of characters to display by default in collapsed state |
@@ -1434,9 +1439,10 @@ 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 input element. |
 | classNameContainer | **`string`** | Yes | **`h-12 md:h-[50px] lg:h-14 flex items-center max-w-full 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 lg:bg-transparent`** | 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 lg:bg-transparent pe-2`** | 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. |
+| iconLinkHandler | **`() => void`** | Yes | **undefined** | If **iconLink** is true, this handler will fire when the user clicks the icon to expand the Search bar. This can be used in case the parent container should be notified the Search component is expanded. |
 | 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. |
 | 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. |
 | variant | **`string`** | Yes | undefined | There is one non-default optional variant type, and that is 'rounded'. This variant type will cause the ends of the **`Search`** component to be full rounded in appearance. |
@@ -1447,7 +1453,8 @@ Full list of props below
 
 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`**
+**`absolute w-[100%] lg:w-[calc(100%-56px)] top-[calc(100%+4px)] -mt-1 pt-1 focus:outline-hidden z-50 overflow-auto 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 lg:ms-[-4px]`**
+
 
 ### Example Usage