Added disabled feature

src/Burger.tsx

@@ -18,6 +18,7 @@ export const Burger = (({
   size = 32,
   toggle,
   toggled,
+  disabled = false
 }) => {
   const [toggledInternal, toggleInternal] = useState(false)
 
@@ -42,7 +43,7 @@ export const Burger = (({
   const time = Math.max(0, duration)
 
   const burgerStyles: CSSProperties = {
-    cursor: 'pointer',
+    cursor: disabled ? 'not-allowed' : 'pointer',
     height: `${area}px`,
     position: 'relative',
     transition: `${time}s ${easing}`,

src/Cross.tsx

@@ -9,8 +9,8 @@ export const Cross = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="cross"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={o.burgerStyles}
       tabIndex={0}

src/Divide.tsx

@@ -9,8 +9,8 @@ export const Divide = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="divide"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={o.burgerStyles}
       tabIndex={0}

src/Fade.tsx

@@ -9,8 +9,8 @@ export const Fade = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="fade"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={o.burgerStyles}
       tabIndex={0}

src/Pivot.tsx

@@ -9,8 +9,8 @@ export const Pivot = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="pivot"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/Rotate.tsx

@@ -9,8 +9,8 @@ export const Rotate = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="rotate"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/Slant.tsx

@@ -9,8 +9,8 @@ export const Slant = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="slant"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/Sling.tsx

@@ -9,8 +9,8 @@ export const Sling = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="sling"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/Spin.tsx

@@ -9,8 +9,8 @@ export const Spin = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="spin"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/Spiral.tsx

@@ -9,8 +9,8 @@ export const Spiral = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="spiral"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/Squash.tsx

@@ -9,8 +9,8 @@ export const Squash = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="squash"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={o.burgerStyles}
       tabIndex={0}

src/Squeeze.tsx

@@ -9,8 +9,8 @@ export const Squeeze = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="squeeze"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={o.burgerStyles}
       tabIndex={0}

src/Tilt.tsx

@@ -9,8 +9,8 @@ export const Tilt = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="tilt"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/Turn.tsx

@@ -9,8 +9,8 @@ export const Turn = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="turn"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={o.burgerStyles}
       tabIndex={0}

src/Twirl.tsx

@@ -9,8 +9,8 @@ export const Twirl = ((props) => (
       aria-label={o.label}
       aria-expanded={o.isToggled}
       data-testid="twirl"
-      onClick={o.handler}
-      onKeyUp={(e) => e.key === 'Enter' && o.handler()}
+      onClick={props.disabled ? undefined : o.handler}
+      onKeyUp={props.disabled ? undefined : (e) => e.key === 'Enter' && o.handler()}
       role="button"
       style={{
         ...o.burgerStyles,

src/index.ts

@@ -44,6 +44,8 @@ export interface CommonBurgerProps {
   toggle?: Dispatch<SetStateAction<boolean>>
   /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */
   toggled?: boolean;
+  /** Specifies if the hamburger should be disabled. */
+  disabled?: boolean;
 }
 
 export interface RenderOptions {