@amboss/design-system 3.35.4 → 3.35.5

package/build/cjs/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/cjs/components/ColorPicker/ColorPicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ColorPicker",{enumerable:!0,get:function(){return ColorPicker}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_Inline=require("../Inline/Inline"),_Button=require("../Button/Button"),_ColorPickerOption=require("./ColorPickerOption"),ColorPicker=({alignItems="left",colors=["gray","blue","green","yellow","red","purple"],onColorSelected,disabled,selectedColor,size=["m","s"],ariaAttributes:deprecatedAriaAttributes,...ariaAttributes})=>_react.default.createElement(_Inline.Inline,{space:"s"===size?"zero":"xxxs",alignItems:alignItems},colors.map(color=>_react.default.createElement(_Button.Button,{key:color,variant:"tertiary",size:"s",onClick:()=>onColorSelected(color),disabled:disabled,"data-color":color,ariaAttributes:{"aria-label":`button-${color}`,...deprecatedAriaAttributes},...ariaAttributes},_react.default.createElement(_ColorPickerOption.ColorPickerOption,{"data-e2e-test-id":"color-indicator",color:color,isSelected:color===selectedColor,size:size}))));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ColorPicker",{enumerable:!0,get:function(){return ColorPicker}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_Inline=require("../Inline/Inline"),_Button=require("../Button/Button"),_ColorPickerOption=require("./ColorPickerOption"),_useKeyboard=require("../../shared/useKeyboard"),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=(0,_react.useRef)(null),focusedIndex=(0,_react.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(0,_useKeyboard.useKeyboard)({"ArrowRight ArrowDown":()=>focusByDelta(1),"ArrowLeft ArrowUp":()=>focusByDelta(-1),"Enter Space":()=>onColorSelected(colors[focusedIndex.current].color)},groupRef,!disabled),_react.default.createElement("div",{ref:groupRef,role:"radiogroup",...deprecatedAriaAttributes,...ariaAttributes},_react.default.createElement(_Inline.Inline,{space:"s"===size?"zero":"xxxs",alignItems:alignItems},colors.map((colorOption,index)=>_react.default.createElement(_Button.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.default.createElement(_ColorPickerOption.ColorPickerOption,{"data-e2e-test-id":"color-indicator",color:colorOption.color,isSelected:colorOption.color===selectedColor,size:size})))))};