@justeattakeaway/pie-checkbox-group 0.1.0 → 0.2.0

package/README.md

@@ -21,6 +21,8 @@
 
 `pie-checkbox-group` is a Web Component built using the Lit library.
 
+It is a helper component that groups PieCheckbox components into a visual and functional group.
+
 This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
 
@@ -29,10 +31,9 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-checkbox-group` in your application, run the following on your command line:
 
 ```bash
-# npm
 $ npm i @justeattakeaway/pie-checkbox-group
-
-# yarn
+```
+```bash
 $ yarn add @justeattakeaway/pie-checkbox-group
 ```
 
@@ -74,18 +75,54 @@ import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| `name` | string | - | The name associated with the group. |
+| `label` | string | - | The label value of the component |
+| `disabled` | boolean | - | Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled. |
+| `assistiveText` | `string` | - | Allows assistive text to be displayed below the checkbox group. |
+| `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox group / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
+
 
 In your markup or JSX, you can then use these to set the properties for the `pie-checkbox-group` component:
 
 ```html
 <!-- Native HTML -->
-<pie-checkbox-group></pie-checkbox-group>
+<pie-checkbox-group name="TESTNAME">
+  <pie-checkbox
+    name="my-checkbox-one"
+    label="Checkbox Label 1">
+  </pie-checkbox>
+  <pie-checkbox
+      name="my-checkbox-two"
+      label="Checkbox Label 2">
+  </pie-checkbox>
+  <pie-checkbox
+      name="my-checkbox-three"
+      label="Checkbox Label 3">
+  </pie-checkbox>
+</pie-checkbox-group>
 
 <!-- JSX -->
-<PieCheckboxGroup></PieCheckboxGroup>
+<PieCheckboxGroup name="TESTNAME">
+  <PieCheckbox
+    name="my-checkbox-one"
+    label="Checkbox Label 1">
+  </PieCheckbox>
+  <PieCheckbox
+      name="my-checkbox-two"
+      label="Checkbox Label 2">
+  </PieCheckbox>
+  <PieCheckbox
+      name="my-checkbox-three"
+      label="Checkbox Label 3">
+  </PieCheckbox>
+</PieCheckboxGroup>
 ```
 
+## Events
+| Event | Type | Description |
+|-------|------|-------------|
+| `pie-checkbox-group-disabled` | `CustomEvent` | Triggered after the disabled state of the checkbox group changes. |
+
 ## Contributing
 
 Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -11,8 +11,59 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "statusTypes",
+          "type": {
+            "text": "['default', 'success', 'error']"
+          },
+          "default": "['default', 'success', 'error']"
+        },
+        {
+          "kind": "variable",
+          "name": "ON_CHECKBOX_GROUP_DISABLED",
+          "type": {
+            "text": "string"
+          },
+          "default": "'pie-checkbox-group-disabled'",
+          "description": "Event name for when checkbox group becomes disabled."
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    status: 'default',\n    disabled: false,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "statusTypes",
+          "declaration": {
+            "name": "statusTypes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ON_CHECKBOX_GROUP_DISABLED",
+          "declaration": {
+            "name": "ON_CHECKBOX_GROUP_DISABLED",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -22,8 +73,120 @@
           "kind": "class",
           "description": "",
           "name": "PieCheckboxGroup",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "CheckboxGroupProps['name'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "CheckboxGroupProps['label'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "assistiveText",
+              "type": {
+                "text": "CheckboxGroupProps['assistiveText'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "assistiveText"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "privacy": "public",
+              "attribute": "status"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_slottedChildren",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleDisabled",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleStatus",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "triggered after the disabled state of the checkbox group changes.",
+              "name": "pie-checkbox-group-disabled"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "CheckboxGroupProps['name'] | undefined"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "CheckboxGroupProps['label'] | undefined"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "assistiveText",
+              "type": {
+                "text": "CheckboxGroupProps['assistiveText'] | undefined"
+              },
+              "fieldName": "assistiveText"
+            },
+            {
+              "name": "status",
+              "fieldName": "status"
+            },
+            {
+              "name": "disabled",
+              "fieldName": "disabled"
+            }
+          ],
           "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"

package/dist/index.d.ts

@@ -1,20 +1,66 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface CheckboxGroupProps {
+    /**
+     * The name associated with the group.
+     */
+    name?: string;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * An optional assistive text to display below the checkbox group.
+     */
+    assistiveText?: string;
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The status of the checkbox component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
 }
 
+export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+
+export declare const defaultProps: DefaultProps;
+
+/**
+ * Event name for when checkbox group becomes disabled.
+ *
+ * @constant
+ */
+export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
+
 /**
  * @tagname pie-checkbox-group
+ * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  */
 export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements CheckboxGroupProps {
+    name?: CheckboxGroupProps['name'];
+    label?: CheckboxGroupProps['label'];
+    assistiveText?: CheckboxGroupProps['assistiveText'];
+    status: "default" | "error" | "success";
+    disabled: boolean;
+    _slottedChildren: Array<HTMLElement>;
+    private _handleDisabled;
+    private _handleStatus;
+    protected updated(_changedProperties: PropertyValues<this>): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieCheckboxGroup_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+
+export declare const statusTypes: readonly ["default", "success", "error"];
 
 export { }

package/dist/index.js

@@ -1,14 +1,86 @@
-import { LitElement as t, html as o, unsafeCSS as r } from "lit";
-import { RtlMixin as n, defineCustomElement as i } from "@justeattakeaway/pie-webc-core";
-const s = `*,*:after,*:before{box-sizing:inherit}
-`, l = "pie-checkbox-group";
-class e extends n(t) {
+import { LitElement as b, html as p, unsafeCSS as m } from "lit";
+import { property as l, queryAssignedElements as v } from "lit/decorators.js";
+import { FormControlMixin as y, RtlMixin as x, validPropertyValues as _, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import "@justeattakeaway/pie-assistive-text";
+const g = `*,*:after,*:before{box-sizing:inherit}
+`, S = ["default", "success", "error"], E = "pie-checkbox-group-disabled", u = {
+  status: "default",
+  disabled: !1
+};
+var $ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (d, t, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? D(t, o) : t, r = d.length - 1, n; r >= 0; r--)
+    (n = d[r]) && (e = (s ? n(t, o, e) : n(e)) || e);
+  return s && e && $(t, o, e), e;
+};
+const f = "pie-checkbox-group", c = "assistive-text";
+class i extends y(x(b)) {
+  constructor() {
+    super(...arguments), this.status = u.status, this.disabled = u.disabled;
+  }
+  _handleDisabled() {
+    this._slottedChildren && this._slottedChildren.forEach((t) => {
+      t.dispatchEvent(new CustomEvent(E, { bubbles: !1, composed: !1, detail: { disabled: this.disabled } }));
+    });
+  }
+  _handleStatus() {
+    this._slottedChildren && this._slottedChildren.forEach((t) => t.setAttribute("status", this.status));
+  }
+  updated(t) {
+    t.has("disabled") && this._handleDisabled(), t.has("status") && this._handleStatus();
+  }
   render() {
-    return o`<h1 data-test-id="pie-checkbox-group">Hello world!</h1>`;
+    const {
+      name: t,
+      label: o,
+      assistiveText: s,
+      status: e,
+      disabled: r
+    } = this;
+    return p`
+            <fieldset
+                name=${h(t)}
+                ?disabled=${r}
+                aria-describedby="${h(s ? c : void 0)}"
+                data-test-id="pie-checkbox-group"
+            >
+                ${o && p`<legend>${o}</legend>`}
+                <slot></slot>
+            </fieldset>
+            ${s && p`
+                <pie-assistive-text
+                    id="${c}"
+                    variant=${e}
+                    data-test-id="pie-checkbox-group-assistive-text">
+                        ${s}
+                </pie-assistive-text>`}
+        `;
   }
 }
-e.styles = r(s);
-i(l, e);
+i.styles = m(g);
+a([
+  l({ type: String })
+], i.prototype, "name", 2);
+a([
+  l({ type: String })
+], i.prototype, "label", 2);
+a([
+  l({ type: String })
+], i.prototype, "assistiveText", 2);
+a([
+  l({ type: String }),
+  _(f, S, u.status)
+], i.prototype, "status", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+a([
+  v({})
+], i.prototype, "_slottedChildren", 2);
+C(f, i);
 export {
-  e as PieCheckboxGroup
+  E as ON_CHECKBOX_GROUP_DISABLED,
+  i as PieCheckboxGroup,
+  u as defaultProps,
+  S as statusTypes
 };

package/dist/react.d.ts

@@ -1,25 +1,75 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface CheckboxGroupProps {
+    /**
+     * The name associated with the group.
+     */
+    name?: string;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * An optional assistive text to display below the checkbox group.
+     */
+    assistiveText?: string;
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The status of the checkbox component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
 }
 
-export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<CheckboxGroupProps & React_2.RefAttributes<PieCheckboxGroup_2> & ReactBaseType>;
+export declare type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+
+export declare const defaultProps: DefaultProps;
+
+/**
+ * Event name for when checkbox group becomes disabled.
+ *
+ * @constant
+ */
+export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
+
+export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<CheckboxGroupProps & React_2.RefAttributes<PieCheckboxGroup_2> & PieCheckboxGroupEvents & ReactBaseType>;
 
 /**
  * @tagname pie-checkbox-group
+ * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  */
 declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements CheckboxGroupProps {
+    name?: CheckboxGroupProps['name'];
+    label?: CheckboxGroupProps['label'];
+    assistiveText?: CheckboxGroupProps['assistiveText'];
+    status: "default" | "error" | "success";
+    disabled: boolean;
+    _slottedChildren: Array<HTMLElement>;
+    private _handleDisabled;
+    private _handleStatus;
+    protected updated(_changedProperties: PropertyValues<this>): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieCheckboxGroup_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+
+declare type PieCheckboxGroupEvents = {
+    onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
+};
+
+declare type ReactBaseType = React_2.FieldsetHTMLAttributes<HTMLFieldSetElement>;
 
-declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+export declare const statusTypes: readonly ["default", "success", "error"];
 
 export { }

package/dist/react.js

@@ -1,15 +1,25 @@
-import * as e from "react";
-import { createComponent as o } from "@lit/react";
+import * as o from "react";
+import { createComponent as e } from "@lit/react";
 import { PieCheckboxGroup as r } from "./index.js";
+import { ON_CHECKBOX_GROUP_DISABLED as h, defaultProps as k, statusTypes as P } from "./index.js";
 import "lit";
+import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-const t = o({
+import "lit/directives/if-defined.js";
+import "@justeattakeaway/pie-assistive-text";
+const p = e({
   displayName: "PieCheckboxGroup",
   elementClass: r,
-  react: e,
+  react: o,
   tagName: "pie-checkbox-group",
-  events: {}
-}), a = t;
+  events: {
+    onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled"
+    // triggered after the disabled state of the checkbox group changes.
+  }
+}), u = p;
 export {
-  a as PieCheckboxGroup
+  h as ON_CHECKBOX_GROUP_DISABLED,
+  u as PieCheckboxGroup,
+  k as defaultProps,
+  P as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,6 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
+    "@justeattakeaway/pie-assistive-text": "0.5.1",
     "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {

package/src/defs-react.ts

@@ -1,8 +1,3 @@
 import React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement>

package/src/defs.ts

@@ -1,3 +1,44 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface CheckboxGroupProps {}
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const statusTypes = ['default', 'success', 'error'] as const;
+
+export interface CheckboxGroupProps {
+    /**
+    * The name associated with the group.
+    */
+    name?: string;
+
+    /**
+     * The label value of the component
+     */
+    label?: string;
+
+    /**
+     * An optional assistive text to display below the checkbox group.
+     */
+    assistiveText?: string;
+
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * The status of the checkbox component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
+}
+
+/**
+ * Event name for when checkbox group becomes disabled.
+ *
+ * @constant
+ */
+export const ON_CHECKBOX_GROUP_DISABLED = 'pie-checkbox-group-disabled';
+
+export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>;
+
+export const defaultProps: DefaultProps = {
+    status: 'default',
+    disabled: false,
+};

package/src/index.ts

@@ -1,20 +1,102 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
-
+import {
+    LitElement, html, unsafeCSS, PropertyValues,
+} from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import {
+    RtlMixin,
+    defineCustomElement,
+    FormControlMixin,
+    validPropertyValues,
+} from '@justeattakeaway/pie-webc-core';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './checkbox-group.scss?inline';
-import { CheckboxGroupProps } from './defs';
+import {
+    ON_CHECKBOX_GROUP_DISABLED,
+    CheckboxGroupProps,
+    defaultProps,
+    statusTypes,
+} from './defs';
+import '@justeattakeaway/pie-assistive-text';
 
 // Valid values available to consumers
 export * from './defs';
 
 const componentSelector = 'pie-checkbox-group';
+const assistiveTextId = 'assistive-text';
 
 /**
  * @tagname pie-checkbox-group
+ * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
  */
-export class PieCheckboxGroup extends RtlMixin(LitElement) implements CheckboxGroupProps {
+export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
+    @property({ type: String })
+    public name?: CheckboxGroupProps['name'];
+
+    @property({ type: String })
+    public label?: CheckboxGroupProps['label'];
+
+    @property({ type: String })
+    public assistiveText?: CheckboxGroupProps['assistiveText'];
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
+    public status = defaultProps.status;
+
+    @property({ type: Boolean, reflect: true })
+    public disabled = defaultProps.disabled;
+
+    @queryAssignedElements({}) _slottedChildren!: Array<HTMLElement>;
+
+    private _handleDisabled () : void {
+        if (this._slottedChildren) {
+            this._slottedChildren.forEach((child) => {
+                child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, { bubbles: false, composed: false, detail: { disabled: this.disabled } }));
+            });
+        }
+    }
+
+    private _handleStatus () : void {
+        if (this._slottedChildren) {
+            this._slottedChildren.forEach((child) => child.setAttribute('status', this.status));
+        }
+    }
+
+    protected updated (_changedProperties: PropertyValues<this>): void {
+        if (_changedProperties.has('disabled')) {
+            this._handleDisabled();
+        }
+
+        if (_changedProperties.has('status')) {
+            this._handleStatus();
+        }
+    }
+
     render () {
-        return html`<h1 data-test-id="pie-checkbox-group">Hello world!</h1>`;
+        const {
+            name,
+            label,
+            assistiveText,
+            status,
+            disabled,
+        } = this;
+        return html`
+            <fieldset
+                name=${ifDefined(name)}
+                ?disabled=${disabled}
+                aria-describedby="${ifDefined(assistiveText ? assistiveTextId : undefined)}"
+                data-test-id="pie-checkbox-group"
+            >
+                ${label && html`<legend>${label}</legend>`}
+                <slot></slot>
+            </fieldset>
+            ${assistiveText && html`
+                <pie-assistive-text
+                    id="${assistiveTextId}"
+                    variant=${status}
+                    data-test-id="pie-checkbox-group-assistive-text">
+                        ${assistiveText}
+                </pie-assistive-text>`}
+        `;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/react.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, EventName } from '@lit/react';
 import { PieCheckboxGroup as PieCheckboxGroupLit } from './index';
 import { CheckboxGroupProps } from './defs';
 
@@ -10,10 +10,16 @@ const PieCheckboxGroupReact = createComponent({
     elementClass: PieCheckboxGroupLit,
     react: React,
     tagName: 'pie-checkbox-group',
-    events: {},
+    events: {
+        onPieCheckboxGroupDisabled: 'pie-checkbox-group-disabled' as EventName<CustomEvent>, // triggered after the disabled state of the checkbox group changes.
+    },
 });
 
-type ReactBaseType = React.HTMLAttributes<HTMLElement>
+type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement>
+
+type PieCheckboxGroupEvents = {
+    onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
+};
 
 export const PieCheckboxGroup = PieCheckboxGroupReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxGroupProps>
-    & React.RefAttributes<PieCheckboxGroupLit> & ReactBaseType>;
+    & React.RefAttributes<PieCheckboxGroupLit> & PieCheckboxGroupEvents & ReactBaseType>;