accept RAC props for toggle button components and add disabled style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.17.4",
+  "version": "1.18.1",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/ToggleButtonGroup.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ToggleButtonGroup } from "./ToggleButtonGroup/index";
+import { ToggleButton, ToggleButtonGroup } from "./ToggleButtonGroup/index";
 import type { Key } from "react-aria-components";
 
 const childrenListWithKeys = [
@@ -38,3 +38,17 @@
     </>
   );
 };
+
+export const Disabled = () => {
+  const [selectedItem, setSelectedItem] = React.useState('');
+  return (
+    <>
+      <ToggleButtonGroup
+        selectedItems={new Set<Key>([selectedItem])}
+        onSelectionChange={(newSet) => setSelectedItem(newSet.size ? [...newSet][0] as string : '')}
+        disallowEmptySelection={true}
+        items={[...childrenListWithKeys, { id: 'purple', value: 'Purple', isDisabled: true }]}
+      />
+    </>
+  );
+};

src/components/ToggleButtonGroup/index.tsx

@@ -1,12 +1,9 @@
 import { StyledToggleButtonGroup, StyledToggleButton } from "./styles";
-import { Key } from "react-aria-components";
+import { ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, Key } from "react-aria-components";
 
-export interface ToggleButtonGroupProps {
-  items: { id: string, value: string }[];
+export interface ToggleButtonGroupProps extends RACToggleButtonGroupProps {
+  items: (RACToggleButtonProps & { value: string })[];
   selectedItems?: Iterable<Key>;
-  onSelectionChange?: ((keys: Set<Key>) => void);
-  selectionMode?: 'single' | 'multiple';
-  className?: string;
 }
 
 export const ToggleButton = StyledToggleButton;
@@ -15,27 +12,23 @@ export const ToggleButtonGroup = (
   {
     items,
     selectedItems,
-    onSelectionChange,
-    selectionMode = 'single',
     ...props
   }: ToggleButtonGroupProps) => {
 
   return (
     <StyledToggleButtonGroup
-      selectionMode={selectionMode}
       selectedKeys={selectedItems}
-      onSelectionChange={onSelectionChange}
       {...props}
     >
-      {items.map((item) =>
+      {items.map(({ value, ...itemProps }) =>
         <StyledToggleButton
-          key={item.id}
-          data-button-id={item.id}
-          id={item.id}
+          key={itemProps.id}
+          data-button-id={itemProps.id}
+          {...itemProps}
           // Allow parents to trigger handlers, works with onPointer events but not with onMouse events
           onPressStart={e => e.continuePropagation()}
         >
-          {item.value}
+          {value}
         </StyledToggleButton>
       )}
     </StyledToggleButtonGroup>

src/components/ToggleButtonGroup/styles.ts

@@ -27,6 +27,10 @@ export const StyledToggleButton = styled(ToggleButton)`
     background-color: ${colors.palette.neutralLighter};
   }
 
+  &[data-disabled] {
+    color: ${colors.palette.neutralLight};
+  }
+
   &[data-focus-visible] {
     outline: none;
     box-shadow: inset 0 0 0 0.1rem ${colors.palette.black};

src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
 >
   <button
     aria-pressed={true}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="red"
     data-rac=""
     data-react-aria-pressable={true}
@@ -39,7 +39,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="green"
     data-rac=""
     data-react-aria-pressable={true}
@@ -64,7 +64,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="blue"
     data-rac=""
     data-react-aria-pressable={true}
@@ -89,7 +89,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="yellow"
     data-rac=""
     data-react-aria-pressable={true}
@@ -114,7 +114,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="orange"
     data-rac=""
     data-react-aria-pressable={true}
@@ -153,7 +153,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
 >
   <button
     aria-checked={true}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="red"
     data-rac=""
     data-react-aria-pressable={true}
@@ -180,7 +180,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="green"
     data-rac=""
     data-react-aria-pressable={true}
@@ -206,7 +206,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="blue"
     data-rac=""
     data-react-aria-pressable={true}
@@ -232,7 +232,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="yellow"
     data-rac=""
     data-react-aria-pressable={true}
@@ -258,7 +258,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="orange"
     data-rac=""
     data-react-aria-pressable={true}
@@ -298,7 +298,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
 >
   <button
     aria-checked={true}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="red"
     data-rac=""
     data-react-aria-pressable={true}
@@ -325,7 +325,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="green"
     data-rac=""
     data-react-aria-pressable={true}
@@ -351,7 +351,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="blue"
     data-rac=""
     data-react-aria-pressable={true}
@@ -377,7 +377,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="yellow"
     data-rac=""
     data-react-aria-pressable={true}
@@ -403,7 +403,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf cQxaky"
+    className="sc-dkzDqf ivRDBW"
     data-button-id="orange"
     data-rac=""
     data-react-aria-pressable={true}