diff --git a/README.md b/README.md index 594178a..808fddb 100644 --- a/README.md +++ b/README.md @@ -36,8 +36,8 @@ styled-components >=5.3.0 react-modal >=3.16.1 @emotion/react ^11.13.0 @emotion/styled ^11.13.0 -@mui/material ^6.1.4 || ^7.0.0 -@mui/icons-material ^6.1.4 || ^7.0.0 +@mui/material ^6.4.9 || ^7.0.0 +@mui/icons-material ^6.4.9 || ^7.0.0 prop-types ^15.8.1 react-icons ^5.5.0 ``` diff --git a/package-lock.json b/package-lock.json index b519358..419758a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,8 +58,8 @@ "peerDependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", - "@mui/icons-material": "^6.1.4 || ^7.0.0", - "@mui/material": "^6.1.4 || ^7.0.0", + "@mui/icons-material": "^6.4.9 || ^7.0.0", + "@mui/material": "^6.4.9 || ^7.0.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/package.json b/package.json index f053f60..3ecd134 100644 --- a/package.json +++ b/package.json @@ -280,8 +280,8 @@ "peerDependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", - "@mui/icons-material": "^6.1.4 || ^7.0.0", - "@mui/material": "^6.1.4 || ^7.0.0", + "@mui/icons-material": "^6.4.9 || ^7.0.0", + "@mui/material": "^6.4.9 || ^7.0.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md index d488011..9cffe0a 100644 --- a/src/components/Toggle/README.md +++ b/src/components/Toggle/README.md @@ -46,4 +46,4 @@ import { BBBToggle } from 'bbb-ui-components-react'; | `ariaLabel` | `string` | | The accessible name for the toggle. | | `ariaLabelledBy` | `string` | | The ID of the element that labels the toggle. | | `ariaDescribedBy` | `string` | | The ID of the element that describes the toggle. | -| `...props` | `SwitchProps` | | Any other props will be passed down to the underlying Material-UI Switch component. | +| `...props` | `Omit` | | Any other props will be passed down to the underlying Material-UI Switch component. Use `slotProps.input` to set attributes on the ``. | diff --git a/src/components/Toggle/component.tsx b/src/components/Toggle/component.tsx index b159190..ae7afb7 100644 --- a/src/components/Toggle/component.tsx +++ b/src/components/Toggle/component.tsx @@ -1,4 +1,5 @@ import React, { JSX, useId } from 'react'; +import { SwitchOwnerState } from '@mui/material'; import { ToggleProps } from './types'; import * as Styled from './styles'; import { DEFAULT_TEXT_POSITION } from './constants'; @@ -19,6 +20,7 @@ function Toggle ({ ariaLabelledBy, ariaDescribedBy, id: providedId, + slotProps, ...rest }: ToggleProps): JSX.Element { const generatedUniqueId = useId(); @@ -26,6 +28,21 @@ function Toggle ({ const labelId = label ? `${id}-label` : undefined; const helperTextId = helperText ? `${id}-helper` : undefined; + const ariaLabelledByValue = ariaLabel ? undefined : ariaLabelledBy || labelId; + // Without a name source, the