Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1 @@
export { useToggleState } from './useToggleState';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useToggleState } from './useToggleState';\n"],"names":["useToggleState"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB"}

View File

@@ -0,0 +1,36 @@
'use client';
import * as React from 'react';
import { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';
export function useToggleState(props, state) {
const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;
const { onClick, role } = state.root;
const [checkedValue, setCheckedValue] = useControllableState({
state: checked,
defaultState: defaultChecked,
initialState: false
});
const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
const onToggleClick = React.useCallback((ev)=>{
if (!disabled && !disabledFocusable) {
if (ev.defaultPrevented) {
return;
}
setCheckedValue(!checkedValue);
}
}, [
checkedValue,
disabled,
disabledFocusable,
setCheckedValue
]);
return {
...state,
checked: checkedValue,
isAccessible,
root: {
...state.root,
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
onClick: useEventCallback(mergeCallbacks(onClick, onToggleClick))
}
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n TToggleButtonProps extends Pick<\n ToggleButtonProps,\n 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable' | 'isAccessible'\n >,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root' | 'isAccessible'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;\n const { onClick, role } = state.root;\n\n const [checkedValue, setCheckedValue] = useControllableState({\n state: checked,\n defaultState: defaultChecked,\n initialState: false,\n });\n\n const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n const onToggleClick = React.useCallback(\n (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n if (!disabled && !disabledFocusable) {\n if (ev.defaultPrevented) {\n return;\n }\n\n setCheckedValue(!checkedValue);\n }\n },\n [checkedValue, disabled, disabledFocusable, setCheckedValue],\n );\n\n return {\n ...state,\n\n checked: checkedValue,\n\n isAccessible,\n\n root: {\n ...state.root,\n [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n onClick: useEventCallback(\n mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n ),\n },\n } as TToggleButtonState;\n}\n"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","isAccessible","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAInG,OAAO,SAASC,eAOdC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,eAAe,KAAK,EAAE,GAAGN;IACvF,MAAM,EAAEO,OAAO,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,GAAGd,qBAAqB;QAC3DI,OAAOC;QACPU,cAAcT;QACdU,cAAc;IAChB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBpB,MAAMqB,WAAW,CACrC,CAACC;QACC,IAAI,CAACb,YAAY,CAACC,mBAAmB;YACnC,IAAIY,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAP,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcN;QAAUC;QAAmBM;KAAgB;IAG9D,OAAO;QACL,GAAGV,KAAK;QAERC,SAASQ;QAETJ;QAEAG,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,CAACK,qBAAqB,iBAAiB,eAAe,EAAEJ;YACxDH,SAAST,iBACPF,eAAeW,SAA2EQ;QAE9F;IACF;AACF"}