@amboss/design-system 3.42.0 → 3.42.1

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

@@ -10,9 +10,10 @@ export type ColorPickerProps = Pick<ColorPickerOptionProps, "size"> & {
     alignItems?: InlineProps["alignItems"];
     colors: Array<ColorOption>;
     disabled?: boolean;
+    focusOnMount?: boolean;
     onColorSelected: (color: ColorPickerOptionProps["color"]) => void;
     selectedColor?: ColorPickerOptionProps["color"];
     /** @deprecated Use aria-* props directly instead */
     ariaAttributes?: AriaAttributes;
 };
-export declare const ColorPicker: ({ alignItems, colors, onColorSelected, disabled, selectedColor, size, ariaAttributes: deprecatedAriaAttributes, ...ariaAttributes }: ColorPickerProps) => ReactElement;
+export declare const ColorPicker: ({ alignItems, colors, onColorSelected, disabled, focusOnMount, selectedColor, size, ariaAttributes: deprecatedAriaAttributes, ...ariaAttributes }: ColorPickerProps) => ReactElement;

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_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})))))};
+"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,focusOnMount,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);(0,_react.useEffect)(()=>{focusOnMount&&groupRef.current?.querySelector("[data-color]")?.focus()},[focusOnMount]);let 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})))))};

package/build/cjs/components/EntityList/EntityListItem.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityListItem",{enumerable:!0,get:function(){return EntityListItem}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_EntityItemBody=require("./EntityItemBody"),_useKeyboard=require("../../shared/useKeyboard"),_styledcomponents=require("./styled-components"),useButtonKeyboard=({ref:globalRef,isActive,onSpaceEnterPress})=>{let localRef=(0,_react.useRef)(null);return(0,_useKeyboard.useKeyboard)({"Space Enter":onSpaceEnterPress},localRef,isActive,!0),(0,_react.useImperativeHandle)(globalRef,()=>localRef.current),localRef},EntityListItem=_react.default.forwardRef(({checkboxProps,description,hideBorder,isActive,isClickable,isDisabled,onClick,renderLabel,renderLeft,renderRight,role,tabIndex,onSpaceEnterPress,size="m","aria-label":ariaLabel,"data-list-item":dataListItem,isSelected},ref)=>{let handleOnClick=(0,_react.useCallback)(e=>{isClickable&&onClick&&onClick(e)},[onClick,isClickable]),buttonRef=useButtonKeyboard({ref,isActive:isClickable&&!isDisabled&&void 0!==tabIndex,onSpaceEnterPress}),supportsAriaSelected="menuitem"!==role;return _react.default.createElement(_styledcomponents.StyledEntityListItemButton,{role:role,"aria-label":ariaLabel,"aria-selected":supportsAriaSelected?isSelected:void 0,"aria-disabled":isDisabled,size:size,tabIndex:tabIndex,ref:buttonRef,"data-list-item":dataListItem,"data-id":"list-item",onClick:handleOnClick,isClickable:isClickable,isActive:isActive,isDisabled:isDisabled},_react.default.createElement(_styledcomponents.StyledEntityListItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},_react.default.createElement(_EntityItemBody.EntityItemBody,{size:size,tabIndex:tabIndex,checkboxProps:checkboxProps,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight})))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"EntityListItem",{enumerable:!0,get:function(){return EntityListItem}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_EntityItemBody=require("./EntityItemBody"),_useKeyboard=require("../../shared/useKeyboard"),_styledcomponents=require("./styled-components"),useButtonKeyboard=({ref:globalRef,isActive,onSpaceEnterPress})=>{let localRef=(0,_react.useRef)(null);return(0,_useKeyboard.useKeyboard)({"Space Enter":onSpaceEnterPress},localRef,isActive,!0),(0,_react.useImperativeHandle)(globalRef,()=>localRef.current),localRef},EntityListItem=_react.default.forwardRef(({checkboxProps,description,hideBorder,isActive,isClickable,isDisabled,onClick,renderLabel,renderLeft,renderRight,role,tabIndex,onSpaceEnterPress,size="m","aria-label":ariaLabel,"data-list-item":dataListItem,isSelected},ref)=>{let handleOnClick=(0,_react.useCallback)(e=>{isClickable&&onClick&&onClick(e)},[onClick,isClickable]),buttonRef=useButtonKeyboard({ref,isActive:isClickable&&!isDisabled&&void 0!==tabIndex,onSpaceEnterPress}),supportsAriaSelected="menuitem"!==role,supportsAriaCurrent="option"!==role;return _react.default.createElement(_styledcomponents.StyledEntityListItemButton,{role:role,"aria-label":ariaLabel,"aria-selected":supportsAriaSelected?isSelected:void 0,"aria-current":supportsAriaCurrent&&isActive?isActive:void 0,"aria-disabled":isDisabled,size:size,tabIndex:tabIndex,ref:buttonRef,"data-list-item":dataListItem,"data-id":"list-item",onClick:handleOnClick,isClickable:isClickable,isActive:isActive,isDisabled:isDisabled},_react.default.createElement(_styledcomponents.StyledEntityListItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},_react.default.createElement(_EntityItemBody.EntityItemBody,{size:size,tabIndex:tabIndex,checkboxProps:checkboxProps,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight})))});

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

@@ -10,9 +10,10 @@ export type ColorPickerProps = Pick<ColorPickerOptionProps, "size"> & {
     alignItems?: InlineProps["alignItems"];
     colors: Array<ColorOption>;
     disabled?: boolean;
+    focusOnMount?: boolean;
     onColorSelected: (color: ColorPickerOptionProps["color"]) => void;
     selectedColor?: ColorPickerOptionProps["color"];
     /** @deprecated Use aria-* props directly instead */
     ariaAttributes?: AriaAttributes;
 };
-export declare const ColorPicker: ({ alignItems, colors, onColorSelected, disabled, selectedColor, size, ariaAttributes: deprecatedAriaAttributes, ...ariaAttributes }: ColorPickerProps) => ReactElement;
+export declare const ColorPicker: ({ alignItems, colors, onColorSelected, disabled, focusOnMount, selectedColor, size, ariaAttributes: deprecatedAriaAttributes, ...ariaAttributes }: ColorPickerProps) => ReactElement;

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

@@ -1 +1 @@
-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})))))};
+import React,{useEffect,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,focusOnMount,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);useEffect(()=>{focusOnMount&&groupRef.current?.querySelector("[data-color]")?.focus()},[focusOnMount]);let 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})))))};

package/build/esm/components/EntityList/EntityListItem.js

@@ -1 +1 @@
-import React,{useCallback,useImperativeHandle,useRef}from"react";import{EntityItemBody}from"./EntityItemBody";import{useKeyboard}from"../../shared/useKeyboard";import{StyledEntityListItemWrapper,StyledEntityListItemButton}from"./styled-components";let useButtonKeyboard=({ref:globalRef,isActive,onSpaceEnterPress})=>{let localRef=useRef(null);return useKeyboard({"Space Enter":onSpaceEnterPress},localRef,isActive,!0),useImperativeHandle(globalRef,()=>localRef.current),localRef};export const EntityListItem=React.forwardRef(({checkboxProps,description,hideBorder,isActive,isClickable,isDisabled,onClick,renderLabel,renderLeft,renderRight,role,tabIndex,onSpaceEnterPress,size="m","aria-label":ariaLabel,"data-list-item":dataListItem,isSelected},ref)=>{let handleOnClick=useCallback(e=>{isClickable&&onClick&&onClick(e)},[onClick,isClickable]),buttonRef=useButtonKeyboard({ref,isActive:isClickable&&!isDisabled&&void 0!==tabIndex,onSpaceEnterPress}),supportsAriaSelected="menuitem"!==role;return React.createElement(StyledEntityListItemButton,{role:role,"aria-label":ariaLabel,"aria-selected":supportsAriaSelected?isSelected:void 0,"aria-disabled":isDisabled,size:size,tabIndex:tabIndex,ref:buttonRef,"data-list-item":dataListItem,"data-id":"list-item",onClick:handleOnClick,isClickable:isClickable,isActive:isActive,isDisabled:isDisabled},React.createElement(StyledEntityListItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},React.createElement(EntityItemBody,{size:size,tabIndex:tabIndex,checkboxProps:checkboxProps,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight})))});
+import React,{useCallback,useImperativeHandle,useRef}from"react";import{EntityItemBody}from"./EntityItemBody";import{useKeyboard}from"../../shared/useKeyboard";import{StyledEntityListItemWrapper,StyledEntityListItemButton}from"./styled-components";let useButtonKeyboard=({ref:globalRef,isActive,onSpaceEnterPress})=>{let localRef=useRef(null);return useKeyboard({"Space Enter":onSpaceEnterPress},localRef,isActive,!0),useImperativeHandle(globalRef,()=>localRef.current),localRef};export const EntityListItem=React.forwardRef(({checkboxProps,description,hideBorder,isActive,isClickable,isDisabled,onClick,renderLabel,renderLeft,renderRight,role,tabIndex,onSpaceEnterPress,size="m","aria-label":ariaLabel,"data-list-item":dataListItem,isSelected},ref)=>{let handleOnClick=useCallback(e=>{isClickable&&onClick&&onClick(e)},[onClick,isClickable]),buttonRef=useButtonKeyboard({ref,isActive:isClickable&&!isDisabled&&void 0!==tabIndex,onSpaceEnterPress}),supportsAriaSelected="menuitem"!==role,supportsAriaCurrent="option"!==role;return React.createElement(StyledEntityListItemButton,{role:role,"aria-label":ariaLabel,"aria-selected":supportsAriaSelected?isSelected:void 0,"aria-current":supportsAriaCurrent&&isActive?isActive:void 0,"aria-disabled":isDisabled,size:size,tabIndex:tabIndex,ref:buttonRef,"data-list-item":dataListItem,"data-id":"list-item",onClick:handleOnClick,isClickable:isClickable,isActive:isActive,isDisabled:isDisabled},React.createElement(StyledEntityListItemWrapper,{size:size,hideBorder:hideBorder||"xs"===size},React.createElement(EntityItemBody,{size:size,tabIndex:tabIndex,checkboxProps:checkboxProps,description:description,renderLabel:renderLabel,renderLeft:renderLeft,renderRight:renderRight})))});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "3.42.0",
+  "version": "3.42.1",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",