@luscii-healthtech/web-ui 8.0.1 → 8.0.3

package/dist/components/CheckboxList/CheckboxList.types.d.ts

@@ -4,34 +4,52 @@ export declare enum CheckboxState {
     UNCHECKED = "unchecked"
 }
 export interface CheckboxListProps {
+    /**
+     * An array of items to render as checkboxes. Each item can be a single item or a group. When the
+     * title isn't specified, the group will render as a non-collapsible list. This is the way to
+     * render a regular list of checkboxes.
+     *
+     * @example
+     * Single list of checkboxes without visual grouping.
+     *
+     * ```tsx
+     * const groups = [{
+     *   items: [
+     *     {
+     *       id: "1",
+     *       label: "Item 1",
+     *     },
+     *     {
+     *       id: "2",
+     *       label: "Item 2",
+     *     },
+     *   ],
+     * }]
+     * ```
+     */
     groups: CheckboxGroup[];
     onChange: (event: CheckboxChangeEvent) => void;
+    /**
+     * Renders dividers between each item, including groups and inside of groups.
+     */
     hasDividers?: boolean;
     className?: string;
 }
 type WithCollapsible = {
     /**
-     * When `false`, will prevent the checkbox list from being collapsed (also disabling clicking to expand/collapse)
+     * When `false` will prevent the checkbox list from being collapsed (also disabling clicking to expand/collapse)
      * in the component and it will be displayed expanded by default.
      * @default true
      */
     collapsible?: boolean;
 };
-export type CheckboxGroupProps = {
-    title?: string;
-    items: CheckboxListItem[];
+export type CheckboxGroupProps = CheckboxGroup & {
     onChange: (event: CheckboxChangeEvent) => void;
     hasDividers?: boolean;
     className?: string;
-    isCollapsed?: boolean;
 } & WithCollapsible;
-export interface CheckboxGroupItemProps {
-    id: string;
-    label: string;
-    isChecked?: boolean;
-    isDisabled?: boolean;
+export interface CheckboxGroupItemProps extends CheckboxListItem {
     onChange: (event: CheckboxChangeEvent) => void;
-    className?: string;
 }
 export interface CheckboxListItem {
     id: string;
@@ -41,8 +59,17 @@ export interface CheckboxListItem {
     className?: string;
 }
 export type CheckboxGroup = {
+    /**
+     * When the title isn't specified, the group will render as a non-collapsible list.
+     */
     title?: string;
+    /**
+     * The checkbox items to be shown inside of this group.
+     */
     items: CheckboxListItem[];
+    /**
+     * Whether the group is initially collapsed or not.
+     */
     isCollapsed?: boolean;
 } & WithCollapsible;
 export interface CheckboxChangeEvent {

package/dist/index.development.js

@@ -212,35 +212,33 @@ const allowedGroupHoverColors = {
   white: "ui-group-hover:ui-text-white"
 };
 const Text = (props) => {
-  var _a, _b, _c;
-  const { children } = props, rest = __rest(props, ["children"]);
-  const Component = props.inline ? "span" : "p";
-  const resolvedVariant = (_a = props.type) !== null && _a !== void 0 ? _a : props.variant;
-  const selectedHoverColor = props.hoverColor && !props.hoverInGroup && allowedHoverColors[props.hoverColor];
-  const selectedGroupHoverColor = props.hoverColor && props.hoverInGroup && allowedGroupHoverColors[props.hoverColor];
+  var _a;
+  const { children, text, type, variant, inline, color, hoverColor, hoverInGroup, className, containsDangerousHtml, truncate, clampLines } = props, rest = __rest(props, ["children", "text", "type", "variant", "inline", "color", "hoverColor", "hoverInGroup", "className", "containsDangerousHtml", "truncate", "clampLines"]);
+  const Component = inline ? "span" : "p";
+  const resolvedVariant = type !== null && type !== void 0 ? type : variant;
+  const selectedHoverColor = hoverColor && !hoverInGroup && allowedHoverColors[hoverColor];
+  const selectedGroupHoverColor = hoverColor && hoverInGroup && allowedGroupHoverColors[hoverColor];
   const containerProps = {
-    title: props.title,
-    "data-test-id": props["data-test-id"],
     className: classNames__default.default(
       // apply different style classes
       // for now we stick with ui-font-size 16px on the body
       // so I am adjusting our styles accordingly (one step down)
       allowedTextStyles[resolvedVariant !== null && resolvedVariant !== void 0 ? resolvedVariant : "base"],
-      allowedColors[(_b = props.color) !== null && _b !== void 0 ? _b : "base"],
+      allowedColors[color !== null && color !== void 0 ? color : "base"],
       selectedHoverColor,
       selectedGroupHoverColor,
       {
-        "ui-inline": props.inline,
+        "ui-inline": inline,
         // FIXME: this class doesn't do anything without a ui-max-width
-        "ui-truncate": props.truncate,
-        "ui-text-two-lines-max": props.clampLines,
-        "in-html-link": props.containsDangerousHtml
+        "ui-truncate": truncate,
+        "ui-text-two-lines-max": clampLines,
+        "in-html-link": containsDangerousHtml
       },
-      //can be used to overwrite other classes like the color
-      props.className
+      // can be used to overwrite other classes like the color
+      className
     )
   };
-  return props.containsDangerousHtml ? React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps, { dangerouslySetInnerHTML: { __html: (_c = children !== null && children !== void 0 ? children : props.text) !== null && _c !== void 0 ? _c : "" } })) : React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps), children !== null && children !== void 0 ? children : props.text);
+  return containsDangerousHtml ? React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps, { dangerouslySetInnerHTML: { __html: (_a = children !== null && children !== void 0 ? children : text) !== null && _a !== void 0 ? _a : "" } })) : React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps), children !== null && children !== void 0 ? children : text);
 };
 Text.defaultProps = {
   variant: "base",