@dhasdk/simple-ui 1.0.60 → 1.0.62

package/README.md

@@ -53,6 +53,10 @@ Tooltip
 
 ## Changelog
 
+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.
 
 1.0.59 - added **method** property to the **RadioOption** type for RadioGroup, allowing user to pass in a callback method for checked/unchecked state changes
@@ -789,6 +793,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
@@ -815,6 +821,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. |
@@ -825,6 +832,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 |
@@ -1052,7 +1060,7 @@ A reference can also be created and passed to the input component, and the compo
 
 ### Additional Properties & Attributes
 
-This component as mentioned also takes any other property or attribute that a normnal input form field would take, including the **required** property. Setting this property to true will not only requires this input field to have a value for form completion, but also adds an asterisk to the beginning of the label.
+This component as mentioned also takes any other property or attribute that a normal input form field would take, including the **required** property. Setting this property to true will not only requires this input field to have a value for form completion, but also adds an asterisk to the beginning of the label.
 
 ### Example Usage
 
@@ -1421,6 +1429,7 @@ Full list of props below
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the fieldset element that wraps RadioGroup for testing purposes |
 | method | (id: string, value: string) => void  | Yes | undefined | A callback method that is called anytime a radio item is clicked on. The value **`method={(id, value) => console.log("id/value: " + id + "/" + value)}`** might print something like **id/value: 2/value-2** |
 | options  | **`string`**  | No |  | Array of RadioOption objects that define the options available for selection. | 
+| selectedId  | **`string`**  | Yes |  | A string value matching one of the passed in **`id`** values in the options array. This **`selectedId`** will be pre-selected. |
 
 1. Base CSS Classes
 
@@ -1433,6 +1442,18 @@ Full list of props below
   **`appearance-none w-4 h-4 rounded-[50%] border border-black bg-clip-content checked:bg-black checked:p-[2.5px] checked:border-black`**
 
 
+2. Options interface
+
+```ts
+  export type RadioOption = {
+    label: string;
+    value: string;
+    id: string;
+    disabled?: boolean;
+  };
+```
+
+
 ### Example Usage
 
 Basic RadioGroup