From ba5dcd472283ff5037c24b66acf52bfdb9b47e83 Mon Sep 17 00:00:00 2001
From: Blake Vandercar <blake.vandercar@validatek.com>
Date: Mon, 23 Sep 2024 18:11:36 -0600
Subject: [PATCH 1/5] feat(SegmentedControl): compact prop, custom button
 styling prop

---
 .../segmented-control/_segmented-control.scss |  7 ++-
 .../segmented-control/segmentedControl.tsx    | 54 +++++++++++++++----
 .../core-examples/segmentedControlExample.tsx |  5 +-
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/segmented-control/_segmented-control.scss b/packages/core/src/components/segmented-control/_segmented-control.scss
index e6b083f931..da52f674a1 100644
--- a/packages/core/src/components/segmented-control/_segmented-control.scss
+++ b/packages/core/src/components/segmented-control/_segmented-control.scss
@@ -8,6 +8,11 @@
   gap: 3px;
   padding: 3px;
 
+  &.#{$ns}-compact {
+    gap: 0px;
+    padding: 0px;
+  }
+
   &.#{$ns}-inline {
     display: inline-flex;
   }
@@ -20,7 +25,7 @@
     }
   }
 
-  > .#{$ns}-button:not(.#{$ns}-minimal) {
+  > .#{$ns}-button.#{$ns}-selected {
     &:not(.#{$ns}-intent-primary) {
       background-color: $white;
 
diff --git a/packages/core/src/components/segmented-control/segmentedControl.tsx b/packages/core/src/components/segmented-control/segmentedControl.tsx
index ee48c4d4bb..add16a5f73 100644
--- a/packages/core/src/components/segmented-control/segmentedControl.tsx
+++ b/packages/core/src/components/segmented-control/segmentedControl.tsx
@@ -30,6 +30,8 @@ import { Button } from "../button/buttons";
 
 export type SegmentedControlIntent = typeof Intent.NONE | typeof Intent.PRIMARY;
 
+type SegmentedControlButtonProps = Pick<ButtonProps, "className" | "intent" | "active" | "minimal">;
+
 /**
  * SegmentedControl component props.
  */
@@ -37,6 +39,13 @@ export interface SegmentedControlProps
     extends Props,
         ControlledValueProps<string>,
         React.RefAttributes<HTMLDivElement> {
+    /**
+     * Whether the control should use compact styles.
+     *
+     * @default false
+     */
+    compact?: boolean;
+
     /**
      * Whether the control should take up the full width of its container.
      *
@@ -66,6 +75,27 @@ export interface SegmentedControlProps
      */
     options: Array<OptionProps<string>>;
 
+    /**
+     * Style props for the button elements.
+     */
+    buttonProps?: {
+        /**
+         * Props applied to selected button
+         * @default { className: 'bp5-selected' }
+         */
+        selected?: SegmentedControlButtonProps;
+        /**
+         * Props applied to non-selected buttons
+         * @default { className: 'bp5-minimal' }
+         */
+        nonSelected?: SegmentedControlButtonProps;
+        /**
+         * Props applied to all buttons (selected and non-selected)
+         * @default undefined
+         */
+        all?: SegmentedControlButtonProps;
+    };
+
     /**
      * Aria role for the overall component. Child buttons get appropriate roles.
      *
@@ -90,7 +120,9 @@ export interface SegmentedControlProps
  */
 export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRef((props, ref) => {
     const {
+        buttonProps,
         className,
+        compact,
         defaultValue,
         fill,
         inline,
@@ -122,7 +154,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
             if (role === "radiogroup") {
                 // in a `radiogroup`, arrow keys select next item, not tab key.
                 const direction = Utils.getArrowKeyDirection(e, ["ArrowLeft", "ArrowUp"], ["ArrowRight", "ArrowDown"]);
-                const { current: outerElement } = outerRef;
+                const outerElement = outerRef.current;
                 if (direction === undefined || !outerElement) return;
 
                 const focusedElement = Utils.getActiveElement(outerElement)?.closest<HTMLButtonElement>("button");
@@ -148,6 +180,8 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
     );
 
     const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
+        [Classes.COMPACT]: compact,
+        [Classes.BUTTON_GROUP]: compact,
         [Classes.FILL]: fill,
         [Classes.INLINE]: inline,
     });
@@ -166,9 +200,12 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
                 const isSelected = selectedValue === option.value;
                 return (
                     <SegmentedControlOption
-                        {...option}
                         intent={intent}
-                        isSelected={isSelected}
+                        {...(isSelected
+                            ? buttonProps?.selected ?? { className: Classes.SELECTED }
+                            : buttonProps?.nonSelected ?? { className: Classes.MINIMAL })}
+                        {...buttonProps?.all}
+                        {...option}
                         key={option.value}
                         large={large}
                         onClick={handleOptionClick}
@@ -198,21 +235,16 @@ SegmentedControl.defaultProps = {
 };
 SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;
 
-interface SegmentedControlOptionProps
-    extends OptionProps<string>,
-        Pick<SegmentedControlProps, "intent" | "small" | "large">,
-        Pick<ButtonProps, "role" | "tabIndex">,
-        React.AriaAttributes {
-    isSelected: boolean;
+interface SegmentedControlOptionProps extends OptionProps<string>, Omit<ButtonProps, "text" | "onClick" | "value"> {
     onClick: (value: string, targetElement: HTMLElement) => void;
 }
 
-function SegmentedControlOption({ isSelected, label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
+function SegmentedControlOption({ label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
     const handleClick = React.useCallback(
         (event: React.MouseEvent<HTMLElement>) => onClick?.(value, event.currentTarget),
         [onClick, value],
     );
 
-    return <Button {...buttonProps} onClick={handleClick} minimal={!isSelected} text={label} />;
+    return <Button {...buttonProps} onClick={handleClick} text={label} />;
 }
 SegmentedControlOption.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControlOption`;
diff --git a/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx b/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
index 272a5ca519..8736fec5c6 100644
--- a/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
@@ -25,8 +25,9 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
     const [intent, setIntent] = React.useState<SegmentedControlIntent>("none");
     const handleIntentChange = React.useCallback(newIntent => setIntent(newIntent as SegmentedControlIntent), []);
 
-    const [fill, setFill] = React.useState<boolean>(false);
     const [inline, setInline] = React.useState<boolean>(false);
+    const [fill, setFill] = React.useState<boolean>(false);
+    const [compact, setCompact] = React.useState<boolean>(false);
     const [size, setSize] = React.useState<Size>("small");
 
     const options = (
@@ -34,6 +35,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
             <H5>Props</H5>
             <Switch checked={inline} label="Inline" onChange={handleBooleanChange(setInline)} />
             <Switch checked={fill} label="Fill" onChange={handleBooleanChange(setFill)} />
+            <Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
             <Divider />
             <FormGroup label="Intent">
                 <SegmentedControl
@@ -60,6 +62,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
     return (
         <Example options={options} {...props}>
             <SegmentedControl
+                compact={compact}
                 defaultValue="list"
                 fill={fill}
                 inline={inline}

From b2cee0a15d7821ad18c5f1814b1c9242131cc928 Mon Sep 17 00:00:00 2001
From: Blake Vandercar <blake.vandercar@validatek.com>
Date: Mon, 23 Sep 2024 22:27:00 -0600
Subject: [PATCH 2/5] improve type

---
 .../segmented-control/segmentedControl.tsx    | 249 ++++++++++--------
 .../core-examples/common/alignmentSelect.tsx  |  10 +-
 .../common/booleanOrUndefinedSelect.tsx       |   6 +-
 .../core-examples/common/layoutSelect.tsx     |  32 +--
 .../core-examples/common/sizeSelect.tsx       |  34 ++-
 .../examples/core-examples/drawerExample.tsx  |  12 +-
 .../core-examples/menuItemExample.tsx         |  14 +-
 .../core-examples/multistepDialogExample.tsx  |  10 +-
 .../core-examples/nonIdealStateExample.tsx    |  32 +--
 .../core-examples/segmentedControlExample.tsx |   5 +-
 10 files changed, 203 insertions(+), 201 deletions(-)

diff --git a/packages/core/src/components/segmented-control/segmentedControl.tsx b/packages/core/src/components/segmented-control/segmentedControl.tsx
index add16a5f73..a0cd9f7bcd 100644
--- a/packages/core/src/components/segmented-control/segmentedControl.tsx
+++ b/packages/core/src/components/segmented-control/segmentedControl.tsx
@@ -35,9 +35,9 @@ type SegmentedControlButtonProps = Pick<ButtonProps, "className" | "intent" | "a
 /**
  * SegmentedControl component props.
  */
-export interface SegmentedControlProps
+export interface SegmentedControlProps<T extends string = string>
     extends Props,
-        ControlledValueProps<string>,
+        ControlledValueProps<T>,
         React.RefAttributes<HTMLDivElement> {
     /**
      * Whether the control should use compact styles.
@@ -73,7 +73,7 @@ export interface SegmentedControlProps
     /**
      * List of available options.
      */
-    options: Array<OptionProps<string>>;
+    options: Array<OptionProps<T>>;
 
     /**
      * Style props for the button elements.
@@ -113,133 +113,152 @@ export interface SegmentedControlProps
     small?: boolean;
 }
 
+// This allows the ability to pass a more strict type for `options`/`onValueChange`
+// i.e. <SegmentedControl<Intent> />
+interface ReactFCWithGeneric extends React.FC<SegmentedControlProps> {
+    <T extends string>(props: SegmentedControlProps<T>): ReturnType<React.FC<SegmentedControlProps<T>>>;
+}
+
 /**
  * Segmented control component.
  *
  * @see https://blueprintjs.com/docs/#core/components/segmented-control
  */
-export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRef((props, ref) => {
-    const {
-        buttonProps,
-        className,
-        compact,
-        defaultValue,
-        fill,
-        inline,
-        intent,
-        large,
-        onValueChange,
-        options,
-        role = "radiogroup",
-        small,
-        value: controlledValue,
-        ...htmlProps
-    } = props;
-
-    const [localValue, setLocalValue] = React.useState<string | undefined>(defaultValue);
-    const selectedValue = controlledValue ?? localValue;
-
-    const outerRef = React.useRef<HTMLDivElement>(null);
-
-    const handleOptionClick = React.useCallback(
-        (newSelectedValue: string, targetElement: HTMLElement) => {
-            setLocalValue(newSelectedValue);
-            onValueChange?.(newSelectedValue, targetElement);
-        },
-        [onValueChange],
-    );
+export const SegmentedControl: ReactFCWithGeneric = React.forwardRef(
+    <T extends string>(props: SegmentedControlProps<T>, ref: React.ForwardedRef<HTMLDivElement>) => {
+        const {
+            buttonProps,
+            className,
+            compact,
+            defaultValue,
+            fill,
+            inline,
+            intent,
+            large,
+            onValueChange,
+            options,
+            role = "radiogroup",
+            small,
+            value: controlledValue,
+            ...htmlProps
+        } = props;
 
-    const handleKeyDown = React.useCallback(
-        (e: React.KeyboardEvent<HTMLDivElement>) => {
-            if (role === "radiogroup") {
-                // in a `radiogroup`, arrow keys select next item, not tab key.
-                const direction = Utils.getArrowKeyDirection(e, ["ArrowLeft", "ArrowUp"], ["ArrowRight", "ArrowDown"]);
-                const outerElement = outerRef.current;
-                if (direction === undefined || !outerElement) return;
-
-                const focusedElement = Utils.getActiveElement(outerElement)?.closest<HTMLButtonElement>("button");
-                if (!focusedElement) return;
-
-                // must rely on DOM state because we have no way of mapping `focusedElement` to a React.JSX.Element
-                const enabledOptionElements = Array.from(
-                    outerElement.querySelectorAll<HTMLButtonElement>("button:not(:disabled)"),
-                );
-                const focusedIndex = enabledOptionElements.indexOf(focusedElement);
-                if (focusedIndex < 0) return;
-
-                e.preventDefault();
-                // auto-wrapping at 0 and `length`
-                const newIndex =
-                    (focusedIndex + direction + enabledOptionElements.length) % enabledOptionElements.length;
-                const newOption = enabledOptionElements[newIndex];
-                newOption.click();
-                newOption.focus();
-            }
-        },
-        [outerRef, role],
-    );
+        const [localValue, setLocalValue] = React.useState<T | undefined>(defaultValue);
+        const selectedValue = controlledValue ?? localValue;
 
-    const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
-        [Classes.COMPACT]: compact,
-        [Classes.BUTTON_GROUP]: compact,
-        [Classes.FILL]: fill,
-        [Classes.INLINE]: inline,
-    });
-
-    const isAnySelected = options.some(option => selectedValue === option.value);
-
-    return (
-        <div
-            {...removeNonHTMLProps(htmlProps)}
-            role={role}
-            onKeyDown={handleKeyDown}
-            className={classes}
-            ref={mergeRefs(ref, outerRef)}
-        >
-            {options.map((option, index) => {
-                const isSelected = selectedValue === option.value;
-                return (
-                    <SegmentedControlOption
-                        intent={intent}
-                        {...(isSelected
-                            ? buttonProps?.selected ?? { className: Classes.SELECTED }
-                            : buttonProps?.nonSelected ?? { className: Classes.MINIMAL })}
-                        {...buttonProps?.all}
-                        {...option}
-                        key={option.value}
-                        large={large}
-                        onClick={handleOptionClick}
-                        small={small}
-                        {...(role === "radiogroup"
-                            ? {
-                                  "aria-checked": isSelected,
-                                  role: "radio",
-                                  // "roving tabIndex" on a radiogroup: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
-                                  // `!isAnySelected` accounts for case where no value is currently selected
-                                  // (passed value/defaultValue is not one of the values of the passed options.)
-                                  // In this case, set first item to be tabbable even though it's unselected.
-                                  tabIndex: isSelected || (index === 0 && !isAnySelected) ? 0 : -1,
-                              }
-                            : {
-                                  "aria-pressed": isSelected,
-                              })}
-                    />
-                );
-            })}
-        </div>
-    );
-});
+        const outerRef = React.useRef<HTMLDivElement>(null);
+
+        const handleOptionClick = React.useCallback(
+            (newSelectedValue: T, targetElement: HTMLElement) => {
+                setLocalValue(newSelectedValue);
+                onValueChange?.(newSelectedValue, targetElement);
+            },
+            [onValueChange],
+        );
+
+        const handleKeyDown = React.useCallback(
+            (e: React.KeyboardEvent<HTMLDivElement>) => {
+                if (role === "radiogroup") {
+                    // in a `radiogroup`, arrow keys select next item, not tab key.
+                    const direction = Utils.getArrowKeyDirection(
+                        e,
+                        ["ArrowLeft", "ArrowUp"],
+                        ["ArrowRight", "ArrowDown"],
+                    );
+                    const outerElement = outerRef.current;
+                    if (direction === undefined || !outerElement) return;
+
+                    const focusedElement = Utils.getActiveElement(outerElement)?.closest<HTMLButtonElement>("button");
+                    if (!focusedElement) return;
+
+                    // must rely on DOM state because we have no way of mapping `focusedElement` to a React.JSX.Element
+                    const enabledOptionElements = Array.from(
+                        outerElement.querySelectorAll<HTMLButtonElement>("button:not(:disabled)"),
+                    );
+                    const focusedIndex = enabledOptionElements.indexOf(focusedElement);
+                    if (focusedIndex < 0) return;
+
+                    e.preventDefault();
+                    // auto-wrapping at 0 and `length`
+                    const newIndex =
+                        (focusedIndex + direction + enabledOptionElements.length) % enabledOptionElements.length;
+                    const newOption = enabledOptionElements[newIndex];
+                    newOption.click();
+                    newOption.focus();
+                }
+            },
+            [outerRef, role],
+        );
+
+        const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
+            [Classes.COMPACT]: compact,
+            [Classes.BUTTON_GROUP]: compact,
+            [Classes.FILL]: fill,
+            [Classes.INLINE]: inline,
+        });
+
+        const isAnySelected = options.some(option => selectedValue === option.value);
+
+        return (
+            <div
+                {...removeNonHTMLProps(htmlProps)}
+                role={role}
+                onKeyDown={handleKeyDown}
+                className={classes}
+                ref={mergeRefs(ref, outerRef)}
+            >
+                {options.map((option, index) => {
+                    const isSelected = selectedValue === option.value;
+                    return (
+                        <SegmentedControlOption<T>
+                            intent={intent}
+                            {...(isSelected
+                                ? buttonProps?.selected ?? { className: Classes.SELECTED }
+                                : buttonProps?.nonSelected ?? { className: Classes.MINIMAL })}
+                            {...buttonProps?.all}
+                            {...option}
+                            key={option.value}
+                            large={large}
+                            onClick={handleOptionClick}
+                            small={small}
+                            {...(role === "radiogroup"
+                                ? {
+                                      "aria-checked": isSelected,
+                                      role: "radio",
+                                      // "roving tabIndex" on a radiogroup: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+                                      // `!isAnySelected` accounts for case where no value is currently selected
+                                      // (passed value/defaultValue is not one of the values of the passed options.)
+                                      // In this case, set first item to be tabbable even though it's unselected.
+                                      tabIndex: isSelected || (index === 0 && !isAnySelected) ? 0 : -1,
+                                  }
+                                : {
+                                      "aria-pressed": isSelected,
+                                  })}
+                        />
+                    );
+                })}
+            </div>
+        );
+    },
+);
 SegmentedControl.defaultProps = {
     defaultValue: undefined,
     intent: Intent.NONE,
 };
 SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;
 
-interface SegmentedControlOptionProps extends OptionProps<string>, Omit<ButtonProps, "text" | "onClick" | "value"> {
-    onClick: (value: string, targetElement: HTMLElement) => void;
+interface SegmentedControlOptionProps<T extends string = string>
+    extends OptionProps<T>,
+        Omit<ButtonProps, "text" | "onClick" | "value"> {
+    onClick: (value: T, targetElement: HTMLElement) => void;
 }
 
-function SegmentedControlOption({ label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
+function SegmentedControlOption<T extends string = string>({
+    label,
+    onClick,
+    value,
+    ...buttonProps
+}: SegmentedControlOptionProps<T>) {
     const handleClick = React.useCallback(
         (event: React.MouseEvent<HTMLElement>) => onClick?.(value, event.currentTarget),
         [onClick, value],
diff --git a/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx b/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx
index 112cbd7b6c..8ba67bd221 100644
--- a/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx
@@ -37,11 +37,15 @@ export const AlignmentSelect: React.FC<AlignmentSelectProps> = ({
         { label: "Right", value: Alignment.RIGHT },
     ].filter(Boolean);
 
-    const handleChange = React.useCallback((value: string) => onChange(value as Alignment), [onChange]);
-
     return (
         <FormGroup label={label}>
-            <SegmentedControl small={true} fill={true} options={options} onValueChange={handleChange} value={align} />
+            <SegmentedControl<Alignment>
+                small={true}
+                fill={true}
+                options={options}
+                onValueChange={onChange}
+                value={align}
+            />
         </FormGroup>
     );
 };
diff --git a/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx b/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx
index 3148bf99db..010c65990a 100644
--- a/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx
@@ -43,9 +43,9 @@ export const BooleanOrUndefinedSelect: React.FC<BooleanOrUndefinedSelectProps> =
             <SegmentedControl
                 fill={true}
                 options={[
-                    { disabled, label: "undefined", value: "undefined" },
-                    { disabled, label: "true", value: "true" },
-                    { disabled, label: "false", value: "false" },
+                    { disabled, value: "undefined" },
+                    { disabled, value: "true" },
+                    { disabled, value: "false" },
                 ]}
                 onValueChange={handleChange}
                 small={true}
diff --git a/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx b/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx
index e391681367..aa6712183a 100644
--- a/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx
@@ -26,21 +26,17 @@ export interface LayoutSelectProps {
 }
 
 /** Button radio group to switch between horizontal and vertical layouts. */
-export const LayoutSelect: React.FC<LayoutSelectProps> = ({ layout, onChange }) => {
-    const handleChange = React.useCallback((value: string) => onChange(value as Layout), [onChange]);
-
-    return (
-        <FormGroup label="Layout">
-            <SegmentedControl
-                fill={true}
-                onValueChange={handleChange}
-                options={[
-                    { label: "Horizontal", value: "horizontal" },
-                    { label: "Vertical", value: "vertical" },
-                ]}
-                small={true}
-                value={layout}
-            />
-        </FormGroup>
-    );
-};
+export const LayoutSelect: React.FC<LayoutSelectProps> = ({ layout, onChange }) => (
+    <FormGroup label="Layout">
+        <SegmentedControl<Layout>
+            fill={true}
+            onValueChange={onChange}
+            options={[
+                { label: "Horizontal", value: "horizontal" },
+                { label: "Vertical", value: "vertical" },
+            ]}
+            small={true}
+            value={layout}
+        />
+    </FormGroup>
+);
diff --git a/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx b/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx
index 20d845b54e..31413881c6 100644
--- a/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx
@@ -27,25 +27,21 @@ export interface SizeSelectProps {
     onChange: (size: Size) => void;
 }
 
-export const SizeSelect: React.FC<SizeSelectProps> = ({ label, size, optionLabels, onChange }) => {
-    const handleChange = React.useCallback((value: string) => onChange(value as Size), [onChange]);
-
-    return (
-        <FormGroup label={label}>
-            <SegmentedControl
-                fill={true}
-                small={true}
-                options={[
-                    { label: optionLabels[0], value: "small" },
-                    { label: optionLabels[1], value: "regular" },
-                    { label: optionLabels[2], value: "large" },
-                ]}
-                onValueChange={handleChange}
-                value={size}
-            />
-        </FormGroup>
-    );
-};
+export const SizeSelect: React.FC<SizeSelectProps> = ({ label, size, optionLabels, onChange }) => (
+    <FormGroup label={label}>
+        <SegmentedControl<Size>
+            fill={true}
+            small={true}
+            options={[
+                { label: optionLabels[0], value: "small" },
+                { label: optionLabels[1], value: "regular" },
+                { label: optionLabels[2], value: "large" },
+            ]}
+            onValueChange={onChange}
+            value={size}
+        />
+    </FormGroup>
+);
 SizeSelect.defaultProps = {
     label: "Size",
     optionLabels: ["Small", "Regular", "Large"],
diff --git a/packages/docs-app/src/examples/core-examples/drawerExample.tsx b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
index 54f4ca2e7e..3646fa19a5 100644
--- a/packages/docs-app/src/examples/core-examples/drawerExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
@@ -72,7 +72,7 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
 
     private handleUsePortalChange = handleBooleanChange(usePortal => this.setState({ usePortal }));
 
-    private handlePositionChange = (position: string) => this.setState({ position: position as Position });
+    private handlePositionChange = (position: Position) => this.setState({ position });
 
     private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));
 
@@ -147,13 +147,13 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
             <>
                 <H5>Props</H5>
                 <FormGroup label="Position">
-                    <SegmentedControl
+                    <SegmentedControl<Position>
                         fill={true}
                         options={[
-                            { label: Position.TOP, value: Position.TOP },
-                            { label: Position.RIGHT, value: Position.RIGHT },
-                            { label: Position.BOTTOM, value: Position.BOTTOM },
-                            { label: Position.LEFT, value: Position.LEFT },
+                            { value: Position.TOP },
+                            { value: Position.RIGHT },
+                            { value: Position.BOTTOM },
+                            { value: Position.LEFT },
                         ]}
                         onValueChange={this.handlePositionChange}
                         small={true}
diff --git a/packages/docs-app/src/examples/core-examples/menuItemExample.tsx b/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
index 2bb403b5fc..5d211767db 100644
--- a/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
@@ -44,11 +44,6 @@ export function MenuItemExample(props: ExampleProps) {
     const [submenuEnabled, setSubmenuEnabled] = React.useState(true);
     const [roleStructure, setRoleStructure] = React.useState<MenuItemProps["roleStructure"]>("menuitem");
 
-    const handleRoleStructureChange = React.useCallback(
-        (newValue: string) => setRoleStructure(newValue as MenuItemProps["roleStructure"]),
-        [],
-    );
-
     const isSelectable = roleStructure === "listoption";
 
     const options = (
@@ -78,12 +73,9 @@ export function MenuItemExample(props: ExampleProps) {
             <Switch label="Enable submenu" checked={submenuEnabled} onChange={handleBooleanChange(setSubmenuEnabled)} />
             <IntentSelect intent={intent} onChange={setIntent} showClearButton={true} />
             <FormGroup label="Role structure">
-                <SegmentedControl
-                    options={[
-                        { label: "menuitem", value: "menuitem" },
-                        { label: "listoption", value: "listoption" },
-                    ]}
-                    onValueChange={handleRoleStructureChange}
+                <SegmentedControl<MenuItemProps["roleStructure"]>
+                    options={[{ value: "menuitem" }, { value: "listoption" }]}
+                    onValueChange={setRoleStructure}
                     small={true}
                     value={roleStructure}
                 />
diff --git a/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx b/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx
index 166cc14ef4..b6bdc9bb83 100644
--- a/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx
@@ -52,7 +52,7 @@ export interface MultistepDialogExampleState {
     initialStepIndex: number;
 }
 
-const NAV_POSITIONS = ["left", "top", "right"];
+const NAV_POSITIONS = ["left", "top", "right"] as const;
 
 export class MultistepDialogExample extends React.PureComponent<
     ExampleProps<BlueprintExampleData>,
@@ -90,8 +90,8 @@ export class MultistepDialogExample extends React.PureComponent<
 
     private handleHasTitleChange = handleBooleanChange(hasTitle => this.setState({ hasTitle }));
 
-    private handleNavPositionChange = (newValue: string) =>
-        this.setState({ navPosition: newValue as MultistepDialogNavPosition });
+    private handleNavPositionChange = (newValue: MultistepDialogNavPosition) =>
+        this.setState({ navPosition: newValue });
 
     public render() {
         const finalButtonProps: Partial<ButtonProps> = {
@@ -171,10 +171,10 @@ export class MultistepDialogExample extends React.PureComponent<
                 <Switch checked={canEscapeKeyClose} label="Escape key to close" onChange={this.handleEscapeKeyChange} />
                 <Divider />
                 <FormGroup label="Navigation Position">
-                    <SegmentedControl
+                    <SegmentedControl<MultistepDialogNavPosition>
                         fill={true}
                         onValueChange={this.handleNavPositionChange}
-                        options={NAV_POSITIONS.map(p => ({ label: p, value: p }))}
+                        options={NAV_POSITIONS.map(p => ({ value: p }))}
                         small={true}
                         value={navPosition}
                     />
diff --git a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
index 64a592366e..48f0b9450a 100644
--- a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
@@ -138,21 +138,17 @@ type NonIdealStateVisualKind = "icon" | "spinner";
 const NonIdealStateVisualSelect: React.FC<{
     visual: NonIdealStateVisualKind;
     onChange: (option: NonIdealStateVisualKind) => void;
-}> = ({ visual, onChange }) => {
-    const handleChange = React.useCallback((value: string) => onChange(value as NonIdealStateVisualKind), [onChange]);
-
-    return (
-        <FormGroup label="Visual">
-            <SegmentedControl
-                fill={true}
-                onValueChange={handleChange}
-                options={[
-                    { label: "Icon", value: "icon" },
-                    { label: "Spinner", value: "spinner" },
-                ]}
-                small={true}
-                value={visual}
-            />
-        </FormGroup>
-    );
-};
+}> = ({ visual, onChange }) => (
+    <FormGroup label="Visual">
+        <SegmentedControl<NonIdealStateVisualKind>
+            fill={true}
+            onValueChange={onChange}
+            options={[
+                { label: "Icon", value: "icon" },
+                { label: "Spinner", value: "spinner" },
+            ]}
+            small={true}
+            value={visual}
+        />
+    </FormGroup>
+);
diff --git a/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx b/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
index 8736fec5c6..b0745c36d2 100644
--- a/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
@@ -23,7 +23,6 @@ import { type Size, SizeSelect } from "./common/sizeSelect";
 
 export const SegmentedControlExample: React.FC<ExampleProps> = props => {
     const [intent, setIntent] = React.useState<SegmentedControlIntent>("none");
-    const handleIntentChange = React.useCallback(newIntent => setIntent(newIntent as SegmentedControlIntent), []);
 
     const [inline, setInline] = React.useState<boolean>(false);
     const [fill, setFill] = React.useState<boolean>(false);
@@ -38,7 +37,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
             <Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
             <Divider />
             <FormGroup label="Intent">
-                <SegmentedControl
+                <SegmentedControl<SegmentedControlIntent>
                     defaultValue="none"
                     inline={true}
                     options={[
@@ -51,7 +50,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
                             value: "primary",
                         },
                     ]}
-                    onValueChange={handleIntentChange}
+                    onValueChange={setIntent}
                     small={true}
                 />
             </FormGroup>

From 7b4b1722772daccf090efecae8c9a7b936406178 Mon Sep 17 00:00:00 2001
From: Blake Vandercar <blake.vandercar@validatek.com>
Date: Tue, 24 Sep 2024 10:38:19 -0600
Subject: [PATCH 3/5] css formatting

---
 .../src/components/segmented-control/_segmented-control.scss  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/segmented-control/_segmented-control.scss b/packages/core/src/components/segmented-control/_segmented-control.scss
index da52f674a1..a34073b1bb 100644
--- a/packages/core/src/components/segmented-control/_segmented-control.scss
+++ b/packages/core/src/components/segmented-control/_segmented-control.scss
@@ -9,8 +9,8 @@
   padding: 3px;
 
   &.#{$ns}-compact {
-    gap: 0px;
-    padding: 0px;
+    gap: 0;
+    padding: 0;
   }
 
   &.#{$ns}-inline {

From ec8b29d9ea82e0d3a5122f0c8848d2c73520b913 Mon Sep 17 00:00:00 2001
From: Blake Vandercar <blake.vandercar@validatek.com>
Date: Tue, 24 Sep 2024 11:05:26 -0600
Subject: [PATCH 4/5] lint fix

---
 .../core/src/components/segmented-control/segmentedControl.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/core/src/components/segmented-control/segmentedControl.tsx b/packages/core/src/components/segmented-control/segmentedControl.tsx
index a0cd9f7bcd..3ed4a52964 100644
--- a/packages/core/src/components/segmented-control/segmentedControl.tsx
+++ b/packages/core/src/components/segmented-control/segmentedControl.tsx
@@ -81,16 +81,19 @@ export interface SegmentedControlProps<T extends string = string>
     buttonProps?: {
         /**
          * Props applied to selected button
+         *
          * @default { className: 'bp5-selected' }
          */
         selected?: SegmentedControlButtonProps;
         /**
          * Props applied to non-selected buttons
+         *
          * @default { className: 'bp5-minimal' }
          */
         nonSelected?: SegmentedControlButtonProps;
         /**
          * Props applied to all buttons (selected and non-selected)
+         *
          * @default undefined
          */
         all?: SegmentedControlButtonProps;

From f27b7216ac36869fe7a06667cc7457849fafa155 Mon Sep 17 00:00:00 2001
From: Blake Vandercar <blake.vandercar@validatek.com>
Date: Thu, 7 Nov 2024 12:38:27 -0700
Subject: [PATCH 5/5] move changes to other PRs

---
 .../segmented-control/segmentedControl.tsx    | 255 ++++++++----------
 .../core-examples/common/alignmentSelect.tsx  |  10 +-
 .../common/booleanOrUndefinedSelect.tsx       |   6 +-
 .../core-examples/common/layoutSelect.tsx     |  32 ++-
 .../core-examples/common/sizeSelect.tsx       |  34 +--
 .../examples/core-examples/drawerExample.tsx  |  12 +-
 .../core-examples/menuItemExample.tsx         |  14 +-
 .../core-examples/multistepDialogExample.tsx  |  10 +-
 .../core-examples/nonIdealStateExample.tsx    |  32 ++-
 .../core-examples/segmentedControlExample.tsx |   7 +-
 10 files changed, 202 insertions(+), 210 deletions(-)

diff --git a/packages/core/src/components/segmented-control/segmentedControl.tsx b/packages/core/src/components/segmented-control/segmentedControl.tsx
index 3ed4a52964..77bd298723 100644
--- a/packages/core/src/components/segmented-control/segmentedControl.tsx
+++ b/packages/core/src/components/segmented-control/segmentedControl.tsx
@@ -35,9 +35,9 @@ type SegmentedControlButtonProps = Pick<ButtonProps, "className" | "intent" | "a
 /**
  * SegmentedControl component props.
  */
-export interface SegmentedControlProps<T extends string = string>
+export interface SegmentedControlProps
     extends Props,
-        ControlledValueProps<T>,
+        ControlledValueProps<string>,
         React.RefAttributes<HTMLDivElement> {
     /**
      * Whether the control should use compact styles.
@@ -73,7 +73,7 @@ export interface SegmentedControlProps<T extends string = string>
     /**
      * List of available options.
      */
-    options: Array<OptionProps<T>>;
+    options: Array<OptionProps<string>>;
 
     /**
      * Style props for the button elements.
@@ -91,12 +91,6 @@ export interface SegmentedControlProps<T extends string = string>
          * @default { className: 'bp5-minimal' }
          */
         nonSelected?: SegmentedControlButtonProps;
-        /**
-         * Props applied to all buttons (selected and non-selected)
-         *
-         * @default undefined
-         */
-        all?: SegmentedControlButtonProps;
     };
 
     /**
@@ -116,152 +110,133 @@ export interface SegmentedControlProps<T extends string = string>
     small?: boolean;
 }
 
-// This allows the ability to pass a more strict type for `options`/`onValueChange`
-// i.e. <SegmentedControl<Intent> />
-interface ReactFCWithGeneric extends React.FC<SegmentedControlProps> {
-    <T extends string>(props: SegmentedControlProps<T>): ReturnType<React.FC<SegmentedControlProps<T>>>;
-}
-
 /**
  * Segmented control component.
  *
  * @see https://blueprintjs.com/docs/#core/components/segmented-control
  */
-export const SegmentedControl: ReactFCWithGeneric = React.forwardRef(
-    <T extends string>(props: SegmentedControlProps<T>, ref: React.ForwardedRef<HTMLDivElement>) => {
-        const {
-            buttonProps,
-            className,
-            compact,
-            defaultValue,
-            fill,
-            inline,
-            intent,
-            large,
-            onValueChange,
-            options,
-            role = "radiogroup",
-            small,
-            value: controlledValue,
-            ...htmlProps
-        } = props;
-
-        const [localValue, setLocalValue] = React.useState<T | undefined>(defaultValue);
-        const selectedValue = controlledValue ?? localValue;
-
-        const outerRef = React.useRef<HTMLDivElement>(null);
-
-        const handleOptionClick = React.useCallback(
-            (newSelectedValue: T, targetElement: HTMLElement) => {
-                setLocalValue(newSelectedValue);
-                onValueChange?.(newSelectedValue, targetElement);
-            },
-            [onValueChange],
-        );
-
-        const handleKeyDown = React.useCallback(
-            (e: React.KeyboardEvent<HTMLDivElement>) => {
-                if (role === "radiogroup") {
-                    // in a `radiogroup`, arrow keys select next item, not tab key.
-                    const direction = Utils.getArrowKeyDirection(
-                        e,
-                        ["ArrowLeft", "ArrowUp"],
-                        ["ArrowRight", "ArrowDown"],
-                    );
-                    const outerElement = outerRef.current;
-                    if (direction === undefined || !outerElement) return;
-
-                    const focusedElement = Utils.getActiveElement(outerElement)?.closest<HTMLButtonElement>("button");
-                    if (!focusedElement) return;
-
-                    // must rely on DOM state because we have no way of mapping `focusedElement` to a React.JSX.Element
-                    const enabledOptionElements = Array.from(
-                        outerElement.querySelectorAll<HTMLButtonElement>("button:not(:disabled)"),
-                    );
-                    const focusedIndex = enabledOptionElements.indexOf(focusedElement);
-                    if (focusedIndex < 0) return;
-
-                    e.preventDefault();
-                    // auto-wrapping at 0 and `length`
-                    const newIndex =
-                        (focusedIndex + direction + enabledOptionElements.length) % enabledOptionElements.length;
-                    const newOption = enabledOptionElements[newIndex];
-                    newOption.click();
-                    newOption.focus();
-                }
-            },
-            [outerRef, role],
-        );
-
-        const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
-            [Classes.COMPACT]: compact,
-            [Classes.BUTTON_GROUP]: compact,
-            [Classes.FILL]: fill,
-            [Classes.INLINE]: inline,
-        });
+export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRef((props, ref) => {
+    const {
+        buttonProps,
+        className,
+        compact,
+        defaultValue,
+        fill,
+        inline,
+        intent,
+        large,
+        onValueChange,
+        options,
+        role = "radiogroup",
+        small,
+        value: controlledValue,
+        ...htmlProps
+    } = props;
+
+    const [localValue, setLocalValue] = React.useState<string | undefined>(defaultValue);
+    const selectedValue = controlledValue ?? localValue;
+
+    const outerRef = React.useRef<HTMLDivElement>(null);
+
+    const handleOptionClick = React.useCallback(
+        (newSelectedValue: string, targetElement: HTMLElement) => {
+            setLocalValue(newSelectedValue);
+            onValueChange?.(newSelectedValue, targetElement);
+        },
+        [onValueChange],
+    );
 
-        const isAnySelected = options.some(option => selectedValue === option.value);
+    const handleKeyDown = React.useCallback(
+        (e: React.KeyboardEvent<HTMLDivElement>) => {
+            if (role === "radiogroup") {
+                // in a `radiogroup`, arrow keys select next item, not tab key.
+                const direction = Utils.getArrowKeyDirection(e, ["ArrowLeft", "ArrowUp"], ["ArrowRight", "ArrowDown"]);
+                const outerElement = outerRef.current;
+                if (direction === undefined || !outerElement) return;
+
+                const focusedElement = Utils.getActiveElement(outerElement)?.closest<HTMLButtonElement>("button");
+                if (!focusedElement) return;
+
+                // must rely on DOM state because we have no way of mapping `focusedElement` to a React.JSX.Element
+                const enabledOptionElements = Array.from(
+                    outerElement.querySelectorAll<HTMLButtonElement>("button:not(:disabled)"),
+                );
+                const focusedIndex = enabledOptionElements.indexOf(focusedElement);
+                if (focusedIndex < 0) return;
+
+                e.preventDefault();
+                // auto-wrapping at 0 and `length`
+                const newIndex =
+                    (focusedIndex + direction + enabledOptionElements.length) % enabledOptionElements.length;
+                const newOption = enabledOptionElements[newIndex];
+                newOption.click();
+                newOption.focus();
+            }
+        },
+        [outerRef, role],
+    );
 
-        return (
-            <div
-                {...removeNonHTMLProps(htmlProps)}
-                role={role}
-                onKeyDown={handleKeyDown}
-                className={classes}
-                ref={mergeRefs(ref, outerRef)}
-            >
-                {options.map((option, index) => {
-                    const isSelected = selectedValue === option.value;
-                    return (
-                        <SegmentedControlOption<T>
-                            intent={intent}
-                            {...(isSelected
-                                ? buttonProps?.selected ?? { className: Classes.SELECTED }
-                                : buttonProps?.nonSelected ?? { className: Classes.MINIMAL })}
-                            {...buttonProps?.all}
-                            {...option}
-                            key={option.value}
-                            large={large}
-                            onClick={handleOptionClick}
-                            small={small}
-                            {...(role === "radiogroup"
-                                ? {
-                                      "aria-checked": isSelected,
-                                      role: "radio",
-                                      // "roving tabIndex" on a radiogroup: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
-                                      // `!isAnySelected` accounts for case where no value is currently selected
-                                      // (passed value/defaultValue is not one of the values of the passed options.)
-                                      // In this case, set first item to be tabbable even though it's unselected.
-                                      tabIndex: isSelected || (index === 0 && !isAnySelected) ? 0 : -1,
-                                  }
-                                : {
-                                      "aria-pressed": isSelected,
-                                  })}
-                        />
-                    );
-                })}
-            </div>
-        );
-    },
-);
+    const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
+        [Classes.COMPACT]: compact,
+        [Classes.BUTTON_GROUP]: compact,
+        [Classes.FILL]: fill,
+        [Classes.INLINE]: inline,
+    });
+
+    const selectedButtonProps = buttonProps?.selected ?? { className: Classes.SELECTED };
+    const nonSelectedButtonProps = buttonProps?.nonSelected ?? { className: Classes.MINIMAL };
+
+    const isAnySelected = options.some(option => selectedValue === option.value);
+
+    return (
+        <div
+            {...removeNonHTMLProps(htmlProps)}
+            role={role}
+            onKeyDown={handleKeyDown}
+            className={classes}
+            ref={mergeRefs(ref, outerRef)}
+        >
+            {options.map((option, index) => {
+                const isSelected = selectedValue === option.value;
+                return (
+                    <SegmentedControlOption
+                        intent={intent}
+                        {...(isSelected ? selectedButtonProps : nonSelectedButtonProps)}
+                        {...option}
+                        key={option.value}
+                        large={large}
+                        onClick={handleOptionClick}
+                        small={small}
+                        {...(role === "radiogroup"
+                            ? {
+                                  "aria-checked": isSelected,
+                                  role: "radio",
+                                  // "roving tabIndex" on a radiogroup: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+                                  // `!isAnySelected` accounts for case where no value is currently selected
+                                  // (passed value/defaultValue is not one of the values of the passed options.)
+                                  // In this case, set first item to be tabbable even though it's unselected.
+                                  tabIndex: isSelected || (index === 0 && !isAnySelected) ? 0 : -1,
+                              }
+                            : {
+                                  "aria-pressed": isSelected,
+                              })}
+                    />
+                );
+            })}
+        </div>
+    );
+});
 SegmentedControl.defaultProps = {
     defaultValue: undefined,
     intent: Intent.NONE,
 };
 SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;
 
-interface SegmentedControlOptionProps<T extends string = string>
-    extends OptionProps<T>,
-        Omit<ButtonProps, "text" | "onClick" | "value"> {
-    onClick: (value: T, targetElement: HTMLElement) => void;
+interface SegmentedControlOptionProps extends OptionProps<string>, Omit<ButtonProps, "text" | "onClick" | "value"> {
+    onClick: (value: string, targetElement: HTMLElement) => void;
 }
 
-function SegmentedControlOption<T extends string = string>({
-    label,
-    onClick,
-    value,
-    ...buttonProps
-}: SegmentedControlOptionProps<T>) {
+function SegmentedControlOption({ label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
     const handleClick = React.useCallback(
         (event: React.MouseEvent<HTMLElement>) => onClick?.(value, event.currentTarget),
         [onClick, value],
diff --git a/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx b/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx
index 8ba67bd221..112cbd7b6c 100644
--- a/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/alignmentSelect.tsx
@@ -37,15 +37,11 @@ export const AlignmentSelect: React.FC<AlignmentSelectProps> = ({
         { label: "Right", value: Alignment.RIGHT },
     ].filter(Boolean);
 
+    const handleChange = React.useCallback((value: string) => onChange(value as Alignment), [onChange]);
+
     return (
         <FormGroup label={label}>
-            <SegmentedControl<Alignment>
-                small={true}
-                fill={true}
-                options={options}
-                onValueChange={onChange}
-                value={align}
-            />
+            <SegmentedControl small={true} fill={true} options={options} onValueChange={handleChange} value={align} />
         </FormGroup>
     );
 };
diff --git a/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx b/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx
index 010c65990a..3148bf99db 100644
--- a/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/booleanOrUndefinedSelect.tsx
@@ -43,9 +43,9 @@ export const BooleanOrUndefinedSelect: React.FC<BooleanOrUndefinedSelectProps> =
             <SegmentedControl
                 fill={true}
                 options={[
-                    { disabled, value: "undefined" },
-                    { disabled, value: "true" },
-                    { disabled, value: "false" },
+                    { disabled, label: "undefined", value: "undefined" },
+                    { disabled, label: "true", value: "true" },
+                    { disabled, label: "false", value: "false" },
                 ]}
                 onValueChange={handleChange}
                 small={true}
diff --git a/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx b/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx
index aa6712183a..e391681367 100644
--- a/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/layoutSelect.tsx
@@ -26,17 +26,21 @@ export interface LayoutSelectProps {
 }
 
 /** Button radio group to switch between horizontal and vertical layouts. */
-export const LayoutSelect: React.FC<LayoutSelectProps> = ({ layout, onChange }) => (
-    <FormGroup label="Layout">
-        <SegmentedControl<Layout>
-            fill={true}
-            onValueChange={onChange}
-            options={[
-                { label: "Horizontal", value: "horizontal" },
-                { label: "Vertical", value: "vertical" },
-            ]}
-            small={true}
-            value={layout}
-        />
-    </FormGroup>
-);
+export const LayoutSelect: React.FC<LayoutSelectProps> = ({ layout, onChange }) => {
+    const handleChange = React.useCallback((value: string) => onChange(value as Layout), [onChange]);
+
+    return (
+        <FormGroup label="Layout">
+            <SegmentedControl
+                fill={true}
+                onValueChange={handleChange}
+                options={[
+                    { label: "Horizontal", value: "horizontal" },
+                    { label: "Vertical", value: "vertical" },
+                ]}
+                small={true}
+                value={layout}
+            />
+        </FormGroup>
+    );
+};
diff --git a/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx b/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx
index 31413881c6..20d845b54e 100644
--- a/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/sizeSelect.tsx
@@ -27,21 +27,25 @@ export interface SizeSelectProps {
     onChange: (size: Size) => void;
 }
 
-export const SizeSelect: React.FC<SizeSelectProps> = ({ label, size, optionLabels, onChange }) => (
-    <FormGroup label={label}>
-        <SegmentedControl<Size>
-            fill={true}
-            small={true}
-            options={[
-                { label: optionLabels[0], value: "small" },
-                { label: optionLabels[1], value: "regular" },
-                { label: optionLabels[2], value: "large" },
-            ]}
-            onValueChange={onChange}
-            value={size}
-        />
-    </FormGroup>
-);
+export const SizeSelect: React.FC<SizeSelectProps> = ({ label, size, optionLabels, onChange }) => {
+    const handleChange = React.useCallback((value: string) => onChange(value as Size), [onChange]);
+
+    return (
+        <FormGroup label={label}>
+            <SegmentedControl
+                fill={true}
+                small={true}
+                options={[
+                    { label: optionLabels[0], value: "small" },
+                    { label: optionLabels[1], value: "regular" },
+                    { label: optionLabels[2], value: "large" },
+                ]}
+                onValueChange={handleChange}
+                value={size}
+            />
+        </FormGroup>
+    );
+};
 SizeSelect.defaultProps = {
     label: "Size",
     optionLabels: ["Small", "Regular", "Large"],
diff --git a/packages/docs-app/src/examples/core-examples/drawerExample.tsx b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
index 3646fa19a5..54f4ca2e7e 100644
--- a/packages/docs-app/src/examples/core-examples/drawerExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
@@ -72,7 +72,7 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
 
     private handleUsePortalChange = handleBooleanChange(usePortal => this.setState({ usePortal }));
 
-    private handlePositionChange = (position: Position) => this.setState({ position });
+    private handlePositionChange = (position: string) => this.setState({ position: position as Position });
 
     private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));
 
@@ -147,13 +147,13 @@ export class DrawerExample extends React.PureComponent<ExampleProps<BlueprintExa
             <>
                 <H5>Props</H5>
                 <FormGroup label="Position">
-                    <SegmentedControl<Position>
+                    <SegmentedControl
                         fill={true}
                         options={[
-                            { value: Position.TOP },
-                            { value: Position.RIGHT },
-                            { value: Position.BOTTOM },
-                            { value: Position.LEFT },
+                            { label: Position.TOP, value: Position.TOP },
+                            { label: Position.RIGHT, value: Position.RIGHT },
+                            { label: Position.BOTTOM, value: Position.BOTTOM },
+                            { label: Position.LEFT, value: Position.LEFT },
                         ]}
                         onValueChange={this.handlePositionChange}
                         small={true}
diff --git a/packages/docs-app/src/examples/core-examples/menuItemExample.tsx b/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
index 5d211767db..2bb403b5fc 100644
--- a/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
@@ -44,6 +44,11 @@ export function MenuItemExample(props: ExampleProps) {
     const [submenuEnabled, setSubmenuEnabled] = React.useState(true);
     const [roleStructure, setRoleStructure] = React.useState<MenuItemProps["roleStructure"]>("menuitem");
 
+    const handleRoleStructureChange = React.useCallback(
+        (newValue: string) => setRoleStructure(newValue as MenuItemProps["roleStructure"]),
+        [],
+    );
+
     const isSelectable = roleStructure === "listoption";
 
     const options = (
@@ -73,9 +78,12 @@ export function MenuItemExample(props: ExampleProps) {
             <Switch label="Enable submenu" checked={submenuEnabled} onChange={handleBooleanChange(setSubmenuEnabled)} />
             <IntentSelect intent={intent} onChange={setIntent} showClearButton={true} />
             <FormGroup label="Role structure">
-                <SegmentedControl<MenuItemProps["roleStructure"]>
-                    options={[{ value: "menuitem" }, { value: "listoption" }]}
-                    onValueChange={setRoleStructure}
+                <SegmentedControl
+                    options={[
+                        { label: "menuitem", value: "menuitem" },
+                        { label: "listoption", value: "listoption" },
+                    ]}
+                    onValueChange={handleRoleStructureChange}
                     small={true}
                     value={roleStructure}
                 />
diff --git a/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx b/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx
index b6bdc9bb83..166cc14ef4 100644
--- a/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/multistepDialogExample.tsx
@@ -52,7 +52,7 @@ export interface MultistepDialogExampleState {
     initialStepIndex: number;
 }
 
-const NAV_POSITIONS = ["left", "top", "right"] as const;
+const NAV_POSITIONS = ["left", "top", "right"];
 
 export class MultistepDialogExample extends React.PureComponent<
     ExampleProps<BlueprintExampleData>,
@@ -90,8 +90,8 @@ export class MultistepDialogExample extends React.PureComponent<
 
     private handleHasTitleChange = handleBooleanChange(hasTitle => this.setState({ hasTitle }));
 
-    private handleNavPositionChange = (newValue: MultistepDialogNavPosition) =>
-        this.setState({ navPosition: newValue });
+    private handleNavPositionChange = (newValue: string) =>
+        this.setState({ navPosition: newValue as MultistepDialogNavPosition });
 
     public render() {
         const finalButtonProps: Partial<ButtonProps> = {
@@ -171,10 +171,10 @@ export class MultistepDialogExample extends React.PureComponent<
                 <Switch checked={canEscapeKeyClose} label="Escape key to close" onChange={this.handleEscapeKeyChange} />
                 <Divider />
                 <FormGroup label="Navigation Position">
-                    <SegmentedControl<MultistepDialogNavPosition>
+                    <SegmentedControl
                         fill={true}
                         onValueChange={this.handleNavPositionChange}
-                        options={NAV_POSITIONS.map(p => ({ value: p }))}
+                        options={NAV_POSITIONS.map(p => ({ label: p, value: p }))}
                         small={true}
                         value={navPosition}
                     />
diff --git a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
index 48f0b9450a..64a592366e 100644
--- a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
@@ -138,17 +138,21 @@ type NonIdealStateVisualKind = "icon" | "spinner";
 const NonIdealStateVisualSelect: React.FC<{
     visual: NonIdealStateVisualKind;
     onChange: (option: NonIdealStateVisualKind) => void;
-}> = ({ visual, onChange }) => (
-    <FormGroup label="Visual">
-        <SegmentedControl<NonIdealStateVisualKind>
-            fill={true}
-            onValueChange={onChange}
-            options={[
-                { label: "Icon", value: "icon" },
-                { label: "Spinner", value: "spinner" },
-            ]}
-            small={true}
-            value={visual}
-        />
-    </FormGroup>
-);
+}> = ({ visual, onChange }) => {
+    const handleChange = React.useCallback((value: string) => onChange(value as NonIdealStateVisualKind), [onChange]);
+
+    return (
+        <FormGroup label="Visual">
+            <SegmentedControl
+                fill={true}
+                onValueChange={handleChange}
+                options={[
+                    { label: "Icon", value: "icon" },
+                    { label: "Spinner", value: "spinner" },
+                ]}
+                small={true}
+                value={visual}
+            />
+        </FormGroup>
+    );
+};
diff --git a/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx b/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
index b0745c36d2..5e145ff23d 100644
--- a/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx
@@ -23,9 +23,10 @@ import { type Size, SizeSelect } from "./common/sizeSelect";
 
 export const SegmentedControlExample: React.FC<ExampleProps> = props => {
     const [intent, setIntent] = React.useState<SegmentedControlIntent>("none");
+    const handleIntentChange = React.useCallback(newIntent => setIntent(newIntent as SegmentedControlIntent), []);
 
-    const [inline, setInline] = React.useState<boolean>(false);
     const [fill, setFill] = React.useState<boolean>(false);
+    const [inline, setInline] = React.useState<boolean>(false);
     const [compact, setCompact] = React.useState<boolean>(false);
     const [size, setSize] = React.useState<Size>("small");
 
@@ -37,7 +38,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
             <Switch checked={compact} label="Compact" onChange={handleBooleanChange(setCompact)} />
             <Divider />
             <FormGroup label="Intent">
-                <SegmentedControl<SegmentedControlIntent>
+                <SegmentedControl
                     defaultValue="none"
                     inline={true}
                     options={[
@@ -50,7 +51,7 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
                             value: "primary",
                         },
                     ]}
-                    onValueChange={setIntent}
+                    onValueChange={handleIntentChange}
                     small={true}
                 />
             </FormGroup>