@dhasdk/simple-ui 1.0.61 → 1.0.63

package/README.md

@@ -53,6 +53,10 @@ Tooltip
 
 ## Changelog
 
+1.0.63 - added **selected** prop to the **`Select`** component
+
+1.0.62 - fixed 'checked' and 'indeterminate' prop usage for CheckBox, updated documentation for CheckBox re their usage w/ CheckBox and CheckBoxGroup
+
 1.0.61 - added **selectedId** prop to **`RadioGroup`** as well as updated documentation with the **RadioOptions** interface
 
 1.0.60 - added **classNameSvgLine** and **classNameIcon** props to **`CheckBox`** the former to share duties with and more focus **classNameSvg**. The latter allows for positioning of the checkbox icon if needed.
@@ -791,6 +795,8 @@ The **CheckBoxGroup** component can be optionally used with any number of **Chec
 
 **CheckBoxGroup** also takes three props that are directly passed down to **CheckBox**, allowing you to specify any of these values in one place instead of in each instance of **CheckBox**. These three props are all boolean values, described below. They are **`fill`**, **`icon`**, and **`marker`**.
 
+**Note:** Using **checked** or **indeterminate** on a **`CheckBox`** inside a **`CheckBoxGroup`** will only effect that CheckBox and will not have an effect on the child or parent CheckBoxes as is done when an individual CheckBox is manually clicked inside a CheckBoxGroup. This can for example place a CheckBox in a checked state leaving its children unchecked. If you wish to use **checked** or **indeterminate** on a CheckBox inside a CheckBoxGroup, it is up to the developer to manage the values for all CheckBoxes in that group on initial state.
+
 Used by itself, **CheckBox** behaves as a normal checkbox component and can be used individually or in groups. It also takes the same attributes that a normal **`html input type="checkbox"`** would.
 
 ### Props for CheckBoxGroup
@@ -817,6 +823,7 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | Prop        | Type     | Optional | Default  | Description |
 | ----------- | -------- | -------- | -------- | ----------- |
 | ariaLabel   | string   | Yes  | 'CheckBox Component' | The **aria-label** to assign to this CheckBox |
+| checked | boolean | Yes | **`false`** | if present, checkbox is initially displayed in a 'checked' state. See above note for more information |
 | className | string | Yes | **`'flex items-center'`** | alternate css classes to add/change styling of the **div** that wraps the **input** element. |
 | classNameIcon | string | Yes | **`''`** | CSS classes that will be applied to the custom icon (non html default) that is the checkbox, indeterminate checkbox, or blank checkbox.  Can be useful for positioning, etc. |
 | classNameInput | string | Yes | **`''`** | alternate css classes to add/change styling of the **input** html element. |
@@ -827,6 +834,7 @@ Used by itself, **CheckBox** behaves as a normal checkbox component and can be u
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the div element that wraps the CheckBox component for testing purposes |
 | fill | boolean | Yes | {false} | specifies using the **fill** variant or not. If used, the checkbox itself will have a darker solid background. |
 | icon | boolean | Yes | {true} | When true (default value) this prop will utilize one of two UX created icons to represent a checked, indeterminate, and blank checkbox. When **marker** is true as well, a marker icon is used in place of the checked. |
+| indeterminate | boolean | Yes | **`false`** | if present, checkbox is initially displayed in an 'indeterminate' state. See above note for more information |
 | marker | boolean | Yes | {false} | When true this boolean will cause the normal checked checkbox to instead display an 'x' marker icon. |
 | ...props	 | string | Yes | undefined  | takes additional props that are not specifically defined in the component, i.e. aria-label |
 | ref | string | Yes | undefined | ref is exposed as a prop, and can be assigned and used on this component as normal |
@@ -1763,6 +1771,7 @@ Full list of props below
 | label | string   | Yes      | undefined | text used as the label for the input, i.e. 'Border Color' above |
 | options  | {{name: ..., value:...}, ...}   | Yes  | undefined | options is an array of objects, each with a **name** and an optional **value** property. If value is not present, name is used in the handler function. |
 | optionsLabel   | string   | Yes | undefined | appears as the label in the Select component, i.e. 'Choose a Color' above. Note, this is not the label above the component. |
+| selected | string | Yes | undefined | The **value** or **name** inside the options array to pre-select or display. Is case sensitive. |
 | setSelectedOption | (string) => void | Yes  | undefined | calls the function passed in as **`setSelectedOption`** with the selected **value** if present, otherwise with **name** |
 | variant | string | Yes | undefined | The predefined variant of Select to display. Current options are 'default', 'MedCard', 'Outline', and 'nonHover' |
 | width | string | Yes |  | This prop is intended to like **`className`** take in css class name values. These are intended though to only take class names relevant to the component width, as they will be applied to both the **button** and the **drop down** elements of the **`Select`** component.  For instance, the **`width`** prop is a good way to ensure that the button and drop down are of the same width. Note the default classes below, i.e. widths specified on various break points. |