diff --git a/.all-contributorsrc b/.all-contributorsrc
index ea8e748a7295..8e35967872d8 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -165,6 +165,15 @@
"a11y"
]
},
+ {
+ "login": "erifsx",
+ "name": "Eric Marcoux",
+ "avatar_url": "https://avatars3.githubusercontent.com/u/997572?v=4",
+ "profile": "https://github.com/erifsx",
+ "contributions": [
+ "code"
+ ]
+ },
{
"login": "vpicone",
"name": "Vince Picone",
diff --git a/README.md b/README.md
index a49cb7d437d8..cf749e7b7ec4 100644
--- a/README.md
+++ b/README.md
@@ -102,144 +102,145 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
DAK π» π π οΈοΈοΈοΈβΏοΈ Josefina Mancilla π» π π οΈοΈοΈοΈβΏοΈ emyarod π» π π οΈοΈοΈοΈβΏοΈ Vince Picone π» π π οΈοΈοΈοΈβΏοΈ Eric Marcoux π»
+ Vince Picone π» π π οΈοΈοΈοΈβΏοΈ jillianhowarth π π¨ π Ricardo Henriquez π» π π οΈοΈοΈοΈβΏοΈ johnbister π¨ π Dominik Brugger π» π§ Jan Hassel π» π οΈοΈοΈοΈβΏοΈ π¨ Alexander Lyon π» Rosie Z π»
+ Rosie Z π» Nishith P π Eric Charpentier π» Luiza Mendes π» π§ Akmal Hakimi Mohd Zamri π» sanjitbauli π Laszlo Moczo π» LMapes π π
+ LMapes π π conradennis π¨ Eric Liu π» π Richard VΕ‘ianskΓ½ π» Lee Chase π» π Anton π» Panpan Lin π Ashley Harrison π»
+ Ashley Harrison π» Jen Downs π» π οΈοΈοΈοΈβΏοΈ Abdul Rehman π» MIchael Dudley π¨ David Bradshaw π» Simon Finney π» οΈοΈοΈοΈβΏοΈ Attila Bartha π» λ°°νλ π»
+ λ°°νλ π» Yohanna Gadelrab π Akira Sudoh π» π οΈοΈοΈοΈβΏοΈ π Oyinkan Oyetunmibi π pbenson322 π Abbey Hart π» π οΈοΈοΈοΈβΏοΈ Lucas π» Dylan Klohr π
+ Dylan Klohr π Gilli Sigurdsson π¨ kennylam π» οΈοΈοΈοΈβΏοΈ SΓ©bastien π» Dusan Milko π» Taras Polovyi π» Chris Connors π¨ π David Conner π» οΈοΈοΈοΈβΏοΈ
+ David Conner π» οΈοΈοΈοΈβΏοΈ Harish Mohanani π» Frivalszky-Mayer PΓ©ter π» οΈοΈοΈοΈβΏοΈ s100 π» Taranveer Virk π» Niall Cargill π Matt Chapman π» Boston Cartwright π»
+ Boston Cartwright π» DavidSCChen π» molyholy π» Scott Dickerson π» Evgeniy Podgaetskiy π» CassidyJensen π» οΈοΈοΈοΈβΏοΈ Zsolt Lattmann π» Conrad Schmidt π»
+ Conrad Schmidt π» Ignacio Becerra π» Swapnil Patil π Fei Z π» Ignas Ausiejus π Ryan O. Mackey π» DΓ‘vid HalΓ‘sz π» Bill Guigue π»
+ Bill Guigue π» szymonbrandys π» Adam Alston π Krithika S Udupa π Eshin Griffith π» @RianTavaresOn π» π¨ ColbyJohnIBM π» HΓ₯kon π» π
+ HΓ₯kon π» π Tanner Summers π» Zhen Wang π» π Cathal Kenneally π» Joel Humberto GΓ³mez Paredes π» James Nash π» π Jakub Faliszewski π» Nick Gong π»
+ Nick Gong π» Hannele Valtanen π» Llam4u π» π G. Torres π» Fiona π» kindoflew π» Mario Gueyraud π» Dongjoon Lee π»
+ Dongjoon Lee π» ShankarV-CodeJunkie π» dario platania π» Mateusz KrzyΕΌanowski π» jpsorensen π» jae kaplan π Sierra Wetmore π» kcprevatt π»
+ kcprevatt π» Marcin Lewandowski π» remolueoend π» Jesse Hull π» οΈοΈοΈοΈβΏοΈ Ashvin Warrier π» GalvinGao π» Bianca Sparxs π» Mahmoud Abdulazim π»
+ Mahmoud Abdulazim π» Dave Steinberg π» Seong-Hyun Ryoo π» Pratik Karad π» οΈοΈοΈοΈβΏοΈ Gerzon π» Guilherme Datilio Ribeiro π» π οΈοΈοΈοΈβΏοΈ π Josef KubΓΔek π» Sunny Johal π»
+ Sunny Johal π» Steven Black π» οΈοΈοΈοΈβΏοΈ Mark Judy π» Anton Tsymuk π» ,
+ ExcludedAttributes
+ > {
+ /**
+ * Specify another element's id to be used as the label for this toggle
+ */
+ 'aria-labelledby'?: string;
+
+ /**
+ * Provide an id that unique represents the underlying ``
+ */
+
+ id: string;
+
+ /**
+ * Specify the label for the "off" position
+ */
+ labelA?: string | undefined;
+
+ /**
+ * Specify the label for the "on" position
+ */
+ labelB?: string | undefined;
+
+ /**
+ * Provide the text that will be read by a screen reader when visiting this
+ * control. This should be provided unless 'aria-labelledby' is set instead
+ * or you use an external element with its "for" attribute set to the
+ * toggle's id.
+ */
+ labelText?: string | undefined;
+
+ /**
+ * If true, the side labels (props.labelA and props.labelB) will be replaced by
+ * props.labelText (if passed), so that the toggle doesn't render a top label.
+ */
+ hideLabel?: boolean;
+
+ /**
+ * Provide an event listener that is called when the control is toggled
+ */
+ onClick:
+ | MouseEventHandler
+ | KeyboardEventHandler
+ | undefined;
+
+ /**
+ * Provide an event listener that is called when the control is toggled
+ */
+ onToggle?(checked: boolean): void;
+
+ /**
+ * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
+ */
+ size?: 'sm' | 'md' | undefined;
+
+ /**
+ * Whether the toggle should be read-only
+ */
+ readOnly?: boolean | undefined;
+
+ /**
+ * Specify whether the toggle should be on by default
+ */
+ defaultToggled?: boolean | undefined;
+
+ /**
+ * Specify whether the control is toggled
+ */
+ toggled?: boolean | undefined;
+}
+
export function Toggle({
'aria-labelledby': ariaLabelledby,
className,
@@ -27,9 +110,9 @@ export function Toggle({
size = 'md',
toggled,
...other
-}) {
+}: ToggleProps) {
const prefix = usePrefix();
- const buttonElement = useRef(null);
+ const buttonElement = useRef(null);
const [checked, setChecked] = useControllableState({
value: toggled,
onChange: onToggle,
@@ -92,7 +175,7 @@ export function Toggle({
buttonElement.current.focus();
}
}
- : null
+ : undefined
}>
{labelText && {labelText} }
diff --git a/packages/react/src/components/Toggle/index.js b/packages/react/src/components/Toggle/index.tsx
similarity index 74%
rename from packages/react/src/components/Toggle/index.js
rename to packages/react/src/components/Toggle/index.tsx
index e26ea08d4cbc..a7faffef8c91 100644
--- a/packages/react/src/components/Toggle/index.js
+++ b/packages/react/src/components/Toggle/index.tsx
@@ -5,8 +5,11 @@
* LICENSE file in the root directory of this source tree.
*/
-import Toggle from './Toggle';
+import { default as Toggle, ToggleProps } from './Toggle';
export * from './Toggle.Skeleton';
export default Toggle;
+
export { Toggle };
+
+export type { ToggleProps };
diff --git a/packages/react/src/internal/useControllableState.js b/packages/react/src/internal/useControllableState.js
index a64140334ae8..e7743c25a43a 100644
--- a/packages/react/src/internal/useControllableState.js
+++ b/packages/react/src/internal/useControllableState.js
@@ -22,7 +22,7 @@ import { warning } from './warning';
* @param {string} [config.name] - the name of the custom component
* @param {any} config.defaultValue - the default value used for the state. This will be
* the fallback value used if `value` is not defined.
- * @param {Function} config.onChange - an optional function that is called when
+ * @param {Function|undefined} config.onChange - an optional function that is called when
* the value of the state changes. This is useful for communicating to parents of
* controlled components that the value is requesting to be changed.
* @param {any} config.value - a controlled value. Omitting this means that the state is
