@amboss/design-system 4.9.2 → 4.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/Form/SegmentedControl/-types.d.ts +2 -0
- package/build/cjs/components/Form/SegmentedControl/SegmentedControlOption.d.ts +1 -1
- package/build/cjs/components/Form/SegmentedControl/SegmentedControlOption.js +1 -1
- package/build/cjs/components/Form/ToolbarToggle/-types.d.ts +1 -1
- package/build/cjs/components/Form/ToolbarToggle/ToolbarToggle.d.ts +1 -1
- package/build/cjs/components/Form/ToolbarToggle/ToolbarToggle.js +1 -1
- package/build/esm/components/Form/SegmentedControl/-types.d.ts +2 -0
- package/build/esm/components/Form/SegmentedControl/SegmentedControlOption.d.ts +1 -1
- package/build/esm/components/Form/SegmentedControl/SegmentedControlOption.js +1 -1
- package/build/esm/components/Form/ToolbarToggle/-types.d.ts +1 -1
- package/build/esm/components/Form/ToolbarToggle/ToolbarToggle.d.ts +1 -1
- package/build/esm/components/Form/ToolbarToggle/ToolbarToggle.js +1 -1
- package/package.json +1 -1
|
@@ -18,6 +18,8 @@ export type SegmentedControlOption = {
|
|
|
18
18
|
tooltipContent?: string;
|
|
19
19
|
tooltipPlacement?: TooltipProps["placement"];
|
|
20
20
|
tooltipPortalContainer?: TooltipProps["portalContainer"];
|
|
21
|
+
/** Keyboard shortcut shown beside `tooltipContent`; see `Tooltip`'s `shortcut` */
|
|
22
|
+
tooltipShortcut?: TooltipProps["shortcut"];
|
|
21
23
|
onClick?: (e: FormEvent<HTMLInputElement>) => void;
|
|
22
24
|
onBlur?: (e: FormEvent<HTMLInputElement>) => void;
|
|
23
25
|
onFocus?: (e: FormEvent<HTMLInputElement>) => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { SegmentedControlOptionProps } from "./-types";
|
|
3
|
-
export declare function SegmentedControlOption({ name, value, checked, label, sublabel, iconName, iconOnly, slotProps, tooltipContent, tooltipPlacement, tooltipPortalContainer, size, disabled, isResponsive, inputType, displayAsOptionWithSublabel, onChange, onClick, onBlur, onFocus, onTooltipVisibilityChange, }: SegmentedControlOptionProps): React.ReactElement;
|
|
3
|
+
export declare function SegmentedControlOption({ name, value, checked, label, sublabel, iconName, iconOnly, slotProps, tooltipContent, tooltipPlacement, tooltipPortalContainer, tooltipShortcut, size, disabled, isResponsive, inputType, displayAsOptionWithSublabel, onChange, onClick, onBlur, onFocus, onTooltipVisibilityChange, }: SegmentedControlOptionProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SegmentedControlOption",{enumerable:!0,get:function(){return SegmentedControlOption}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../../web-tokens/_breakpoints.json")),_Text=require("../../Typography/Text/Text"),_Icon=require("../../Icon/Icon"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),_Tooltip=require("../../Tooltip/Tooltip"),_Inline=require("../../Inline/Inline"),_mixins=require("../../../shared/mixins"),StyledInput=(0,_styled.default)("input",{target:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"SegmentedControlOption",{enumerable:!0,get:function(){return SegmentedControlOption}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_wildcard")._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_breakpointsjson=/*#__PURE__*/_interop_require_default._(require("../../../web-tokens/_breakpoints.json")),_Text=require("../../Typography/Text/Text"),_Icon=require("../../Icon/Icon"),_ScreenReaderText=require("../../Utilities/ScreenReaderText/ScreenReaderText"),_Tooltip=require("../../Tooltip/Tooltip"),_Inline=require("../../Inline/Inline"),_mixins=require("../../../shared/mixins"),StyledInput=(0,_styled.default)("input",{target:"e13oprls0",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=(0,_styled.default)(_Text.Text,{target:"e13oprls1",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=(0,_styled.default)(_Text.Text,{target:"e13oprls2",label:"StyledSublabel"})(({theme,isResponsive})=>{let baseStyle={textAlign:"center"};return isResponsive?{...baseStyle,[`@media (max-width: ${_breakpointsjson.default.m.value}px)`]:{lineHeight:theme.variables.size.lineHeight.xs,textAlign:"right",marginLeft:theme.variables.size.spacing.m}}:baseStyle}),StyledIconContainer=(0,_styled.default)("div",{target:"e13oprls3",label:"StyledIconContainer"})(),StyledContainer=(0,_styled.default)("label",{target:"e13oprls4",label:"StyledContainer"})(({theme,size,checked,isResponsive,sublabel,iconOnly,displayAsOptionWithSublabel,disabled})=>{let borderStyle={"&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderLeftStyle:"solid"},"&:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderRightStyle:"solid"}},basePaddingSize="s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.s,basePadding=`calc(${basePaddingSize} - 1px)`,baseStyle={position:"relative",cursor:"pointer",backgroundColor:theme.values.color.background.primary.default,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",border:`1px solid ${theme.values.color.border.secondary.default}`,borderLeftStyle:"none",borderRightStyle:"none",padding:(()=>{if(iconOnly)return"l"===size?`calc(${theme.variables.size.spacing.m} - 1px)`:basePadding;let horizontalPadding="s"===size?theme.variables.size.spacing.m:theme.variables.size.spacing.l;return`${basePadding} ${horizontalPadding}`})(),...!checked&&!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...checked&&(0,_mixins.getPressedStyles)({theme}),[`${StyledSublabel}, ${StyledLabel}, ${StyledIconContainer}`]:{color:theme.values.color.text.secondary.default,...checked&&{color:theme.values.color.text.accent.default}},[`&:has(${StyledInput}:focus-visible)`]:{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:-1,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"solid"}}};return isResponsive?{...baseStyle,[`@media (min-width: ${_breakpointsjson.default.m.value}px)`]:{...borderStyle},[`@media (max-width: ${_breakpointsjson.default.m.value}px)`]:{flexDirection:"row",justifyContent:sublabel||displayAsOptionWithSublabel?"space-between":"center",padding:theme.variables.size.spacing.m,borderTopStyle:"none",borderBottomStyle:"none",borderLeftStyle:"solid",borderRightStyle:"solid","&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderTopRightRadius:theme.variables.size.borderRadius.xs,borderTopStyle:"solid"},"&:last-of-type":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderBottomStyle:"solid"}}}:{...baseStyle,...borderStyle}});function SegmentedControlOption({name,value="",checked,label="",sublabel,iconName,iconOnly,slotProps,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,size,disabled=!1,isResponsive=!1,inputType="radio",displayAsOptionWithSublabel=!1,onChange,onClick,onBlur,onFocus,onTooltipVisibilityChange}){let containerRef=(0,_react.useRef)(null),iconAriaLabel=iconOnly?label:void 0,iconAccessibleName=slotProps?.icon?.ariaLabel??iconAriaLabel,iconElm=iconName?_react.default.createElement(StyledIconContainer,null,iconAccessibleName?_react.default.createElement(_Icon.Icon,{name:iconName,size:"s","aria-label":iconAccessibleName,role:"img"}):_react.default.createElement(_Icon.Icon,{name:iconName,size:"s"})):null,showIcon=!sublabel&&iconElm,labelElm=_react.default.createElement(StyledLabel,{size:"l"===size?"m":"s",weight:"bold"},label),labelContainerElm=labelElm;showIcon&&(labelContainerElm=iconOnly?_react.default.createElement(_react.default.Fragment,null,iconElm,_react.default.createElement(_ScreenReaderText.ScreenReaderText,null,label)):_react.default.createElement(_Inline.Inline,{space:"xs",noWrap:!0,vAlignItems:"center"},iconElm,labelElm));let sublabelElm=sublabel?_react.default.createElement(StyledSublabel,{size:"s",isResponsive:isResponsive},sublabel):null;return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(StyledContainer,{size:size,checked:checked,sublabel:sublabel,iconOnly:iconOnly,isResponsive:isResponsive,displayAsOptionWithSublabel:displayAsOptionWithSublabel,ref:containerRef,disabled:disabled,tabIndex:-1},_react.default.createElement(StyledInput,{type:inputType,name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus,"aria-expanded":slotProps?.input?.ariaExpanded,"aria-controls":slotProps?.input?.ariaControls}),labelContainerElm,sublabelElm),tooltipContent&&_react.default.createElement(_Tooltip.Tooltip,{content:tooltipContent,shortcut:tooltipShortcut,externalTriggerRef:containerRef,onVisibilityChange:onTooltipVisibilityChange,placement:tooltipPlacement??"auto",portalContainer:tooltipPortalContainer}))}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SegmentedControlOptionProps } from "../SegmentedControl/-types";
|
|
2
|
-
export type ToolbarToggleProps = Pick<SegmentedControlOptionProps, "label" | "name" | "iconName" | "iconOnly" | "size" | "disabled" | "tooltipContent" | "tooltipPlacement" | "tooltipPortalContainer" | "onTooltipVisibilityChange" | "onClick" | "onBlur" | "onFocus" | "slotProps"> & {
|
|
2
|
+
export type ToolbarToggleProps = Pick<SegmentedControlOptionProps, "label" | "name" | "iconName" | "iconOnly" | "size" | "disabled" | "tooltipContent" | "tooltipPlacement" | "tooltipPortalContainer" | "tooltipShortcut" | "onTooltipVisibilityChange" | "onClick" | "onBlur" | "onFocus" | "slotProps"> & {
|
|
3
3
|
/** Whether the toggle is currently pressed/active */
|
|
4
4
|
checked: boolean;
|
|
5
5
|
/** Callback when toggled */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { ToolbarToggleProps } from "./-types";
|
|
3
3
|
export type { ToolbarToggleProps };
|
|
4
|
-
export declare function ToolbarToggle({ label, name, iconName, iconOnly, size, checked, onChange, disabled, tooltipContent, tooltipPlacement, tooltipPortalContainer, onTooltipVisibilityChange, onClick, onBlur, onFocus, slotProps, "data-e2e-test-id": dataE2eTestId, }: ToolbarToggleProps): ReactElement;
|
|
4
|
+
export declare function ToolbarToggle({ label, name, iconName, iconOnly, size, checked, onChange, disabled, tooltipContent, tooltipPlacement, tooltipPortalContainer, tooltipShortcut, onTooltipVisibilityChange, onClick, onBlur, onFocus, slotProps, "data-e2e-test-id": dataE2eTestId, }: ToolbarToggleProps): ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ToolbarToggle",{enumerable:!0,get:function(){return ToolbarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_SegmentedControl=require("../SegmentedControl/SegmentedControl");function ToolbarToggle({label,name,iconName,iconOnly,size="m",checked,onChange,disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,"data-e2e-test-id":dataE2eTestId}){let option={name,label,value:"on",disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,...void 0!==iconName?{iconName,iconOnly}:{}};return _react.default.createElement(_SegmentedControl.SegmentedControl,{"data-ds-id":"ToolbarToggle","data-e2e-test-id":dataE2eTestId,options:[option],value:checked?"on":"",size:size,onChange:value=>{onChange("on"===value)},label:label})}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ToolbarToggle",{enumerable:!0,get:function(){return ToolbarToggle}});const _react=/*#__PURE__*/require("@swc/helpers/_/_interop_require_default")._(require("react")),_SegmentedControl=require("../SegmentedControl/SegmentedControl");function ToolbarToggle({label,name,iconName,iconOnly,size="m",checked,onChange,disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,"data-e2e-test-id":dataE2eTestId}){let option={name,label,value:"on",disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,...void 0!==iconName?{iconName,iconOnly}:{}};return _react.default.createElement(_SegmentedControl.SegmentedControl,{"data-ds-id":"ToolbarToggle","data-e2e-test-id":dataE2eTestId,options:[option],value:checked?"on":"",size:size,onChange:value=>{onChange("on"===value)},label:label})}
|
|
@@ -18,6 +18,8 @@ export type SegmentedControlOption = {
|
|
|
18
18
|
tooltipContent?: string;
|
|
19
19
|
tooltipPlacement?: TooltipProps["placement"];
|
|
20
20
|
tooltipPortalContainer?: TooltipProps["portalContainer"];
|
|
21
|
+
/** Keyboard shortcut shown beside `tooltipContent`; see `Tooltip`'s `shortcut` */
|
|
22
|
+
tooltipShortcut?: TooltipProps["shortcut"];
|
|
21
23
|
onClick?: (e: FormEvent<HTMLInputElement>) => void;
|
|
22
24
|
onBlur?: (e: FormEvent<HTMLInputElement>) => void;
|
|
23
25
|
onFocus?: (e: FormEvent<HTMLInputElement>) => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { SegmentedControlOptionProps } from "./-types";
|
|
3
|
-
export declare function SegmentedControlOption({ name, value, checked, label, sublabel, iconName, iconOnly, slotProps, tooltipContent, tooltipPlacement, tooltipPortalContainer, size, disabled, isResponsive, inputType, displayAsOptionWithSublabel, onChange, onClick, onBlur, onFocus, onTooltipVisibilityChange, }: SegmentedControlOptionProps): React.ReactElement;
|
|
3
|
+
export declare function SegmentedControlOption({ name, value, checked, label, sublabel, iconName, iconOnly, slotProps, tooltipContent, tooltipPlacement, tooltipPortalContainer, tooltipShortcut, size, disabled, isResponsive, inputType, displayAsOptionWithSublabel, onChange, onClick, onBlur, onFocus, onTooltipVisibilityChange, }: SegmentedControlOptionProps): React.ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useRef}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{Tooltip}from"../../Tooltip/Tooltip";import{Inline}from"../../Inline/Inline";import{getPressedStyles}from"../../../shared/mixins";let StyledInput=styled("input",{target:"
|
|
1
|
+
import React,{useRef}from"react";import styled from"@emotion/styled";import breakpoints from"../../../web-tokens/_breakpoints.json";import{Text}from"../../Typography/Text/Text";import{Icon}from"../../Icon/Icon";import{ScreenReaderText}from"../../Utilities/ScreenReaderText/ScreenReaderText";import{Tooltip}from"../../Tooltip/Tooltip";import{Inline}from"../../Inline/Inline";import{getPressedStyles}from"../../../shared/mixins";let StyledInput=styled("input",{target:"e13oprls0",label:"StyledInput"})(({theme})=>({position:"absolute",height:1,width:1,margin:-1,overflow:"hidden",padding:0,opacity:theme.variables.opacity.hidden})),StyledLabel=styled(Text,{target:"e13oprls1",label:"StyledLabel"})(({theme,size})=>({..."s"===size&&{lineHeight:theme.variables.size.lineHeight.xs}})),StyledSublabel=styled(Text,{target:"e13oprls2",label:"StyledSublabel"})(({theme,isResponsive})=>{let baseStyle={textAlign:"center"};return isResponsive?{...baseStyle,[`@media (max-width: ${breakpoints.m.value}px)`]:{lineHeight:theme.variables.size.lineHeight.xs,textAlign:"right",marginLeft:theme.variables.size.spacing.m}}:baseStyle}),StyledIconContainer=styled("div",{target:"e13oprls3",label:"StyledIconContainer"})(),StyledContainer=styled("label",{target:"e13oprls4",label:"StyledContainer"})(({theme,size,checked,isResponsive,sublabel,iconOnly,displayAsOptionWithSublabel,disabled})=>{let borderStyle={"&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderLeftStyle:"solid"},"&:last-of-type":{borderTopRightRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderRightStyle:"solid"}},basePaddingSize="s"===size?theme.variables.size.spacing.xs:theme.variables.size.spacing.s,basePadding=`calc(${basePaddingSize} - 1px)`,baseStyle={position:"relative",cursor:"pointer",backgroundColor:theme.values.color.background.primary.default,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",border:`1px solid ${theme.values.color.border.secondary.default}`,borderLeftStyle:"none",borderRightStyle:"none",padding:(()=>{if(iconOnly)return"l"===size?`calc(${theme.variables.size.spacing.m} - 1px)`:basePadding;let horizontalPadding="s"===size?theme.variables.size.spacing.m:theme.variables.size.spacing.l;return`${basePadding} ${horizontalPadding}`})(),...!checked&&!disabled&&{"&:hover":{backgroundColor:theme.values.color.background.secondary.default}},...disabled&&{cursor:"not-allowed",opacity:theme.variables.opacity.disabled},...checked&&getPressedStyles({theme}),[`${StyledSublabel}, ${StyledLabel}, ${StyledIconContainer}`]:{color:theme.values.color.text.secondary.default,...checked&&{color:theme.values.color.text.accent.default}},[`&:has(${StyledInput}:focus-visible)`]:{outlineWidth:2,outlineStyle:"solid",outlineColor:"Highlight",outlineOffset:-1,"@media (-webkit-min-device-pixel-ratio:0)":{outlineColor:"-webkit-focus-ring-color",outlineStyle:"solid"}}};return isResponsive?{...baseStyle,[`@media (min-width: ${breakpoints.m.value}px)`]:{...borderStyle},[`@media (max-width: ${breakpoints.m.value}px)`]:{flexDirection:"row",justifyContent:sublabel||displayAsOptionWithSublabel?"space-between":"center",padding:theme.variables.size.spacing.m,borderTopStyle:"none",borderBottomStyle:"none",borderLeftStyle:"solid",borderRightStyle:"solid","&:first-of-type":{borderTopLeftRadius:theme.variables.size.borderRadius.xs,borderTopRightRadius:theme.variables.size.borderRadius.xs,borderTopStyle:"solid"},"&:last-of-type":{borderBottomLeftRadius:theme.variables.size.borderRadius.xs,borderBottomRightRadius:theme.variables.size.borderRadius.xs,borderBottomStyle:"solid"}}}:{...baseStyle,...borderStyle}});export function SegmentedControlOption({name,value="",checked,label="",sublabel,iconName,iconOnly,slotProps,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,size,disabled=!1,isResponsive=!1,inputType="radio",displayAsOptionWithSublabel=!1,onChange,onClick,onBlur,onFocus,onTooltipVisibilityChange}){let containerRef=useRef(null),iconAriaLabel=iconOnly?label:void 0,iconAccessibleName=slotProps?.icon?.ariaLabel??iconAriaLabel,iconElm=iconName?React.createElement(StyledIconContainer,null,iconAccessibleName?React.createElement(Icon,{name:iconName,size:"s","aria-label":iconAccessibleName,role:"img"}):React.createElement(Icon,{name:iconName,size:"s"})):null,showIcon=!sublabel&&iconElm,labelElm=React.createElement(StyledLabel,{size:"l"===size?"m":"s",weight:"bold"},label),labelContainerElm=labelElm;showIcon&&(labelContainerElm=iconOnly?React.createElement(React.Fragment,null,iconElm,React.createElement(ScreenReaderText,null,label)):React.createElement(Inline,{space:"xs",noWrap:!0,vAlignItems:"center"},iconElm,labelElm));let sublabelElm=sublabel?React.createElement(StyledSublabel,{size:"s",isResponsive:isResponsive},sublabel):null;return React.createElement(React.Fragment,null,React.createElement(StyledContainer,{size:size,checked:checked,sublabel:sublabel,iconOnly:iconOnly,isResponsive:isResponsive,displayAsOptionWithSublabel:displayAsOptionWithSublabel,ref:containerRef,disabled:disabled,tabIndex:-1},React.createElement(StyledInput,{type:inputType,name:name,value:value,checked:checked,disabled:disabled,onChange:onChange,onClick:onClick,onBlur:onBlur,onFocus:onFocus,"aria-expanded":slotProps?.input?.ariaExpanded,"aria-controls":slotProps?.input?.ariaControls}),labelContainerElm,sublabelElm),tooltipContent&&React.createElement(Tooltip,{content:tooltipContent,shortcut:tooltipShortcut,externalTriggerRef:containerRef,onVisibilityChange:onTooltipVisibilityChange,placement:tooltipPlacement??"auto",portalContainer:tooltipPortalContainer}))}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SegmentedControlOptionProps } from "../SegmentedControl/-types";
|
|
2
|
-
export type ToolbarToggleProps = Pick<SegmentedControlOptionProps, "label" | "name" | "iconName" | "iconOnly" | "size" | "disabled" | "tooltipContent" | "tooltipPlacement" | "tooltipPortalContainer" | "onTooltipVisibilityChange" | "onClick" | "onBlur" | "onFocus" | "slotProps"> & {
|
|
2
|
+
export type ToolbarToggleProps = Pick<SegmentedControlOptionProps, "label" | "name" | "iconName" | "iconOnly" | "size" | "disabled" | "tooltipContent" | "tooltipPlacement" | "tooltipPortalContainer" | "tooltipShortcut" | "onTooltipVisibilityChange" | "onClick" | "onBlur" | "onFocus" | "slotProps"> & {
|
|
3
3
|
/** Whether the toggle is currently pressed/active */
|
|
4
4
|
checked: boolean;
|
|
5
5
|
/** Callback when toggled */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ReactElement } from "react";
|
|
2
2
|
import type { ToolbarToggleProps } from "./-types";
|
|
3
3
|
export type { ToolbarToggleProps };
|
|
4
|
-
export declare function ToolbarToggle({ label, name, iconName, iconOnly, size, checked, onChange, disabled, tooltipContent, tooltipPlacement, tooltipPortalContainer, onTooltipVisibilityChange, onClick, onBlur, onFocus, slotProps, "data-e2e-test-id": dataE2eTestId, }: ToolbarToggleProps): ReactElement;
|
|
4
|
+
export declare function ToolbarToggle({ label, name, iconName, iconOnly, size, checked, onChange, disabled, tooltipContent, tooltipPlacement, tooltipPortalContainer, tooltipShortcut, onTooltipVisibilityChange, onClick, onBlur, onFocus, slotProps, "data-e2e-test-id": dataE2eTestId, }: ToolbarToggleProps): ReactElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import{SegmentedControl}from"../SegmentedControl/SegmentedControl";export function ToolbarToggle({label,name,iconName,iconOnly,size="m",checked,onChange,disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,"data-e2e-test-id":dataE2eTestId}){let option={name,label,value:"on",disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,...void 0!==iconName?{iconName,iconOnly}:{}};return React.createElement(SegmentedControl,{"data-ds-id":"ToolbarToggle","data-e2e-test-id":dataE2eTestId,options:[option],value:checked?"on":"",size:size,onChange:value=>{onChange("on"===value)},label:label})}
|
|
1
|
+
import React from"react";import{SegmentedControl}from"../SegmentedControl/SegmentedControl";export function ToolbarToggle({label,name,iconName,iconOnly,size="m",checked,onChange,disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,"data-e2e-test-id":dataE2eTestId}){let option={name,label,value:"on",disabled,tooltipContent,tooltipPlacement,tooltipPortalContainer,tooltipShortcut,onTooltipVisibilityChange,onClick,onBlur,onFocus,slotProps,...void 0!==iconName?{iconName,iconOnly}:{}};return React.createElement(SegmentedControl,{"data-ds-id":"ToolbarToggle","data-e2e-test-id":dataE2eTestId,options:[option],value:checked?"on":"",size:size,onChange:value=>{onChange("on"===value)},label:label})}
|