added singleSelect props

Author: biomathcode

README.md

@@ -90,7 +90,7 @@ export default function App() {
 The `onChange` callback returns an **array of selected teeth objects**:
 
 ```ts
-type ToothSelection = {
+type ToothDetail = {
   id: string;
   notations: {
     fdi: string;
@@ -133,16 +133,151 @@ Example JSON output:
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `defaultSelected` | `string[]` | `[]` | Tooth IDs selected on first render. |
-| `onChange` | `(selectedTeeth: ToothSelection[]) => void` | — | Called whenever selection changes. |
+| `singleSelect` | `boolean` | `false` | Allow selecting only one tooth at a time (clicking the selected tooth clears it). |
+| `onChange` | `(selectedTeeth: ToothDetail[]) => void` | — | Called whenever selection changes. |
 | `name` | `string` | `"teeth"` | Name used for hidden form input. |
 | `className` | `string` | `""` | Additional class for wrapper customization. |
 | `theme` | `"light" \| "dark"` | `"light"` | Applies built-in light/dark palette. |
 | `colors` | `{ darkBlue?: string; baseBlue?: string; lightBlue?: string }` | `{}` | Override palette colors. |
 | `notation` | `"FDI" \| "Universal" \| "Palmer"` | `"FDI"` | Display notation in native tooth titles/tooltips. |
-| `tooltip` | `{ placement?: Placement; margin?: number; content?: ReactNode \| ((payload?: ToothSelection) => ReactNode) }` | `{ placement: "top", margin: 10 }` | Tooltip behavior and custom content renderer. |
+| `tooltip` | `{ placement?: Placement; margin?: number; content?: ReactNode \| ((payload?: ToothDetail) => ReactNode) }` | `{ placement: "top", margin: 10 }` | Tooltip behavior and custom content renderer. |
 | `showTooltip` | `boolean` | `true` | Enables/disables tooltip rendering. |
 | `showHalf` | `"full" \| "upper" \| "lower"` | `"full"` | Render full chart or only upper/lower arches. |
 | `maxTeeth` | `number` | `8` | Number of teeth per quadrant (for baby/mixed dentition views). |
+| `teethConditions` | `ToothConditionGroup[]` | `undefined` | Colorize specific teeth by condition. |
+| `readOnly` | `boolean` | `false` | Disable interactions and selection changes. |
+| `showLabels` | `boolean` | `false` | Show the condition legend under the chart. |
+| `layout` | `"circle" \| "square"` | `"circle"` | Render classic arch layout or square/row layout. |
+| `styles` | `React.CSSProperties` | `undefined` | Inline styles applied to the root container. |
+
+`Placement` values:
+
+```ts
+type Placement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "right"
+  | "right-start"
+  | "right-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end";
+```
+
+`teethConditions` shape:
+
+```ts
+type ToothConditionGroup = {
+  label: string;
+  teeth: string[]; // e.g. ["teeth-11", "teeth-12"]
+  outlineColor: string;
+  fillColor: string;
+};
+```
+
+---
+
+## 🧩 Common Recipes
+
+### 1) Render a custom tooltip
+
+```tsx
+import { Odontogram } from "react-odontogram";
+import "react-odontogram/style.css";
+
+export default function CustomTooltipExample() {
+  return (
+    <Odontogram
+      tooltip={{
+        placement: "top",
+        content: (payload) => (
+          <div style={{ minWidth: 140 }}>
+            <strong>Tooth {payload?.notations.fdi}</strong>
+            <div>{payload?.type}</div>
+            <small>Universal: {payload?.notations.universal}</small>
+          </div>
+        ),
+      }}
+    />
+  );
+}
+```
+
+### 2) Change theme and colors
+
+```tsx
+import { Odontogram } from "react-odontogram";
+import "react-odontogram/style.css";
+
+export default function ThemeExample() {
+  return (
+    <Odontogram
+      className="my-odontogram"
+      theme="dark"
+      colors={{
+        darkBlue: "#7c9cff",
+        baseBlue: "#c7d2fe",
+        lightBlue: "#4f46e5",
+      }}
+    />
+  );
+}
+```
+
+```css
+.my-odontogram {
+  --odontogram-tooltip-bg: #0f172a;
+  --odontogram-tooltip-fg: #f8fafc;
+}
+```
+
+### 3) Show `teethConditions` (with legend)
+
+```tsx
+import { Odontogram } from "react-odontogram";
+import "react-odontogram/style.css";
+
+const conditions = [
+  {
+    label: "caries",
+    teeth: ["teeth-16", "teeth-26", "teeth-36"],
+    fillColor: "#ef4444",
+    outlineColor: "#b91c1c",
+  },
+  {
+    label: "filling",
+    teeth: ["teeth-14", "teeth-24"],
+    fillColor: "#60a5fa",
+    outlineColor: "#1d4ed8",
+  },
+];
+
+export default function ConditionsExample() {
+  return <Odontogram teethConditions={conditions} showLabels readOnly />;
+}
+```
+
+### 4) Adjust tooltip position
+
+```tsx
+import { Odontogram } from "react-odontogram";
+import "react-odontogram/style.css";
+
+export default function TooltipPositionExample() {
+  return (
+    <Odontogram
+      tooltip={{
+        placement: "right-start", // try: top, right, bottom-end, left-start...
+        margin: 18, // larger = farther from tooth, smaller = closer
+      }}
+    />
+  );
+}
+```
 
 ---
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-odontogram",
   "description": "dental chart for selecting teeth",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "author": "Pratik Sharma <sharma.pratik2016@gmail.com>",
   "license": "MIT",
   "keywords": [

package.json

@@ -54,6 +54,7 @@ export function getViewBox(layout: Layout, showHalf: ShowHalf): string {
 
 export const Odontogram: FC<OdontogramProps> = ({
   defaultSelected = [],
+  singleSelect = false,
   onChange,
   className = "",
   theme = "light",
@@ -136,7 +137,10 @@ export const Odontogram: FC<OdontogramProps> = ({
    * State
    */
   const [selected, setSelected] = useState<Set<string>>(
-    () => new Set(defaultSelected)
+    () =>
+      new Set(
+        singleSelect ? defaultSelected.slice(0, 1) : defaultSelected
+      )
   );
 
   const svgRef = useRef<SVGSVGElement>(null);
@@ -156,13 +160,23 @@ export const Odontogram: FC<OdontogramProps> = ({
 
       setSelected((previous) => {
         const updated = new Set(previous);
-        updated.has(id) ? updated.delete(id) : updated.add(id);
+
+        if (singleSelect) {
+          if (updated.has(id)) {
+            updated.delete(id);
+          } else {
+            updated.clear();
+            updated.add(id);
+          }
+        } else {
+          updated.has(id) ? updated.delete(id) : updated.add(id);
+        }
 
         onChange?.(Array.from(updated).map(buildToothDetail));
         return updated;
       });
     },
-    [onChange, readOnly, buildToothDetail]
+    [onChange, readOnly, buildToothDetail, singleSelect]
   );
 
   const handleKeyDown = useCallback(
@@ -335,7 +349,7 @@ export const Odontogram: FC<OdontogramProps> = ({
       }}
       role="listbox"
       aria-label="Odontogram"
-      aria-multiselectable="true"
+      aria-multiselectable={!singleSelect}
       data-read-only={readOnly ? "true" : "false"}
     >
       <input
@@ -389,4 +403,4 @@ export const Odontogram: FC<OdontogramProps> = ({
   );
 };
 
-export default Odontogram;
+export default Odontogram;

src/Odontogram.tsx

@@ -31,6 +31,7 @@ export default {
     colors: {
       control: "object",
     },
+    singleSelect: { control: "boolean" },
     onChange: { action: "changed" },
 
   },
@@ -82,6 +83,15 @@ Default.args = {
   defaultSelected: ["teeth-11", "teeth-12", "teeth-22"],
 };
 
+export const SingleSelect = Template.bind({});
+SingleSelect.args = {
+  theme: "light",
+  colors: {},
+  singleSelect: true,
+  defaultSelected: ["teeth-11"],
+};
+SingleSelect.storyName = "Single Select";
+
 export const WithCustomTooltip = Template.bind({});
 WithCustomTooltip.args = {
   theme: "light",
@@ -139,4 +149,3 @@ LowerHalf.args = {
 LowerHalf.storyName = "LowerHalf";
 
 
-

src/stories/Example.stories.tsx

@@ -71,6 +71,7 @@ export interface TeethProps {
 export interface OdontogramProps {
   name?: string;
   defaultSelected?: string[];
+  singleSelect?: boolean;
   onChange?: (selected: ToothDetail[]) => void;
   className?: string;
   selectedColor?: string;

src/type.ts

@@ -68,6 +68,60 @@ describe("Odontogram", () => {
     expect(onChange).toHaveBeenLastCalledWith([]);
   });
 
+  it("limits selection to one tooth in singleSelect mode", () => {
+    const onChange = vi.fn();
+
+    const { container } = render(
+      <Odontogram onChange={onChange} singleSelect={true} readOnly={false} />
+    );
+
+    expect(
+      screen.getByRole("listbox", { name: "Odontogram" })
+    ).toHaveAttribute("aria-multiselectable", "false");
+
+    const tooth11 = screen.getByRole("option", { name: "Tooth 11" });
+    const tooth12 = screen.getByRole("option", { name: "Tooth 12" });
+
+    fireEvent.click(tooth11);
+    expect(tooth11).toHaveAttribute("aria-selected", "true");
+    expect(tooth12).toHaveAttribute("aria-selected", "false");
+
+    fireEvent.click(tooth12);
+    expect(tooth11).toHaveAttribute("aria-selected", "false");
+    expect(tooth12).toHaveAttribute("aria-selected", "true");
+
+    const hiddenInput = container.querySelector<HTMLInputElement>(
+      "input[type='hidden'][name='teeth']"
+    );
+
+    expect(hiddenInput?.value).toBe(JSON.stringify(["teeth-12"]));
+    expect(onChange).toHaveBeenLastCalledWith([
+      expect.objectContaining({ id: "teeth-12" }),
+    ]);
+
+    fireEvent.click(tooth12);
+    expect(hiddenInput?.value).toBe(JSON.stringify([]));
+    expect(onChange).toHaveBeenLastCalledWith([]);
+  });
+
+  it("keeps only first defaultSelected tooth in singleSelect mode", () => {
+    render(
+      <Odontogram
+        singleSelect={true}
+        defaultSelected={["teeth-11", "teeth-12"]}
+      />
+    );
+
+    expect(screen.getByRole("option", { name: "Tooth 11" })).toHaveAttribute(
+      "aria-selected",
+      "true"
+    );
+    expect(screen.getByRole("option", { name: "Tooth 12" })).toHaveAttribute(
+      "aria-selected",
+      "false"
+    );
+  });
+
   it("supports keyboard selection with Enter and Space", () => {
     render(<Odontogram />);
 
@@ -117,4 +171,4 @@ describe("notation helpers", () => {
       "--base-blue": "#2",
     });
   });
-});
+});