@amboss/design-system 3.35.4 → 3.35.5

package/build/esm/components/ColorPicker/ColorPicker.d.ts

@@ -2,9 +2,13 @@ import { type AriaAttributes, type ReactElement } from "react";
 import { type InlineProps } from "../Inline/Inline";
 import { type ColorPickerOptionProps } from "./ColorPickerOption";
 import type { ColorIndicatorProps } from "../ColorIndicator/ColorIndicator";
+export type ColorOption = {
+    color: ColorIndicatorProps["color"];
+    ariaLabel: string;
+};
 export type ColorPickerProps = Pick<ColorPickerOptionProps, "size"> & {
     alignItems?: InlineProps["alignItems"];
-    colors?: Array<ColorIndicatorProps["color"]>;
+    colors: Array<ColorOption>;
     disabled?: boolean;
     onColorSelected: (color: ColorPickerOptionProps["color"]) => void;
     selectedColor?: ColorPickerOptionProps["color"];

package/build/esm/components/ColorPicker/ColorPicker.js

@@ -1 +1 @@
-import React from"react";import{Inline}from"../Inline/Inline";import{Button}from"../Button/Button";import{ColorPickerOption}from"./ColorPickerOption";export const ColorPicker=({alignItems="left",colors=["gray","blue","green","yellow","red","purple"],onColorSelected,disabled,selectedColor,size=["m","s"],ariaAttributes:deprecatedAriaAttributes,...ariaAttributes})=>React.createElement(Inline,{space:"s"===size?"zero":"xxxs",alignItems:alignItems},colors.map(color=>React.createElement(Button,{key:color,variant:"tertiary",size:"s",onClick:()=>onColorSelected(color),disabled:disabled,"data-color":color,ariaAttributes:{"aria-label":`button-${color}`,...deprecatedAriaAttributes},...ariaAttributes},React.createElement(ColorPickerOption,{"data-e2e-test-id":"color-indicator",color:color,isSelected:color===selectedColor,size:size}))));
+import React,{useRef}from"react";import{Inline}from"../Inline/Inline";import{Button}from"../Button/Button";import{ColorPickerOption}from"./ColorPickerOption";import{useKeyboard}from"../../shared/useKeyboard";export const ColorPicker=({alignItems="left",colors,onColorSelected,disabled,selectedColor,size=["m","s"],ariaAttributes:deprecatedAriaAttributes,...ariaAttributes})=>{let selectedIndex=selectedColor?colors.findIndex(c=>c.color===selectedColor):-1,tabbableIndex=selectedIndex>=0?selectedIndex:0,groupRef=useRef(null),focusedIndex=useRef(tabbableIndex),focusByDelta=delta=>{let buttons=groupRef.current?.querySelectorAll("[data-color]");if(!buttons)return;let next=(focusedIndex.current+delta+buttons.length)%buttons.length;focusedIndex.current=next,buttons[next]?.focus(),onColorSelected(colors[next].color)};return useKeyboard({"ArrowRight ArrowDown":()=>focusByDelta(1),"ArrowLeft ArrowUp":()=>focusByDelta(-1),"Enter Space":()=>onColorSelected(colors[focusedIndex.current].color)},groupRef,!disabled),React.createElement("div",{ref:groupRef,role:"radiogroup",...deprecatedAriaAttributes,...ariaAttributes},React.createElement(Inline,{space:"s"===size?"zero":"xxxs",alignItems:alignItems},colors.map((colorOption,index)=>React.createElement(Button,{key:colorOption.color,variant:"tertiary",size:"s",onClick:()=>onColorSelected(colorOption.color),onFocus:()=>{focusedIndex.current=index},disabled:disabled,"data-color":colorOption.color,role:"radio","aria-checked":colorOption.color===selectedColor,tabIndex:index===tabbableIndex?0:-1,"aria-label":colorOption.ariaLabel},React.createElement(ColorPickerOption,{"data-e2e-test-id":"color-indicator",color:colorOption.color,isSelected:colorOption.color===selectedColor,size:size})))))};