@spaced-out/ui-design-system
Version:
Sense UI components library
526 lines • 12.6 kB
TypeScript
import * as React from 'react';
import type { MenuGroupTitleOption, MenuOption, MenuProps } from './Menu';
declare const _default: {
tags: string[];
title: string;
argTypes: {
resolveLabel: {
description: string;
table: {
type: {
summary: string;
};
};
};
resolveSecondaryLabel: {
description: string;
table: {
type: {
summary: string;
};
};
};
onSelect: {
description: string;
action: string;
table: {
type: {
summary: string;
};
};
};
onTabOut: {
description: string;
action: string;
table: {
type: {
summary: string;
};
};
};
options: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
composeOptions: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
groupTitleOptions: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
selectedOption: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
optionsVariant: {
description: string;
control: {
type: string;
};
options: string[];
table: {
type: {
summary: string;
};
defaultValue: {
summary: string;
};
};
};
selectedKeys: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
classNames: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
size: {
description: string;
control: {
type: string;
};
options: string[];
table: {
type: {
summary: string;
};
defaultValue: {
summary: string;
};
};
};
width: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
menuDisabled: {
description: string;
table: {
type: {
summary: string;
};
defaultValue: {
summary: boolean;
};
};
};
isFluid: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
defaultValue: {
summary: boolean;
};
};
};
allowSearch: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
defaultValue: {
summary: boolean;
};
};
};
virtualization: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
header: {
description: string;
table: {
type: {
summary: string;
};
};
};
footer: {
description: string;
table: {
type: {
summary: string;
};
};
};
showResultText: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
defaultValue: {
summary: boolean;
};
};
};
staticLabels: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
defaultValue: {
summary: string;
};
};
};
showLabelTooltip: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
};
};
allowWrap: {
description: string;
control: {
type: string;
};
table: {
type: {
summary: string;
};
defaultValue: {
summary: boolean;
};
};
};
};
parameters: {
docs: {
subtitle: string;
description: {
component: string;
};
};
storySource: {
componentPath: string;
};
};
};
export default _default;
export declare const _TextOnly: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
export declare const _TextWithTooltip: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
showLabelTooltip: {
maxLines: number;
};
};
};
export declare const _MenuWithWrap: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
allowWrap: boolean;
};
};
export declare const _WithSearch: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
allowSearch: boolean;
};
};
export declare const _TextAndIconLeft: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
/**
* To make one of the options colored, you can set the classNames wrapper property in the option object.
* Eg:
* You would need to set the color of the option and manage the hover, focus and active state yourself.
* ### JS
* ```
* const coloredOptions: MenuOption[] = [
* {
* key: '1',
* label: 'Edit',
* iconLeft: 'coffee',
* },
* {
* key: '2',
* label: 'Delete',
* iconLeft: 'trash',
* classNames: { wrapper: css.dangerText },
* },
* ];
* ```
* ### CSS
* ```
* .dangerText:hover,
* .dangerText:active,
* .dangerText:focus {
* color: colorTextDanger;
* }
* ```
*/
export declare const _ColoredOption: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
};
};
export declare const _TextAndIconRight: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
export declare const _TextAndDualIcon: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
export declare const _DualText: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
export declare const _WithResolvers: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
};
};
export declare const _ComposeMenu: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
composeOptions: MenuOption[][];
selectedKeys: string[];
};
};
export declare const _CustomComponentMenu: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
classNames: {
option: string;
};
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
export declare const _GroupTitleMenu: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
classNames: {
option: string;
};
size: string;
groupTitleOptions: MenuGroupTitleOption[];
selectedKeys: string[];
};
};
export declare const _GroupTitleActionMenu: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
classNames: {
option: string;
};
size: string;
selectedKeys: string[];
};
};
export declare const _CheckboxMenu: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
classNames: {
option: string;
};
size: string;
options: MenuOption[];
optionsVariant: string;
selectedKeys: string[];
};
};
export declare const _RadioMenu: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
classNames: {
option: string;
};
size: string;
options: MenuOption[];
optionsVariant: string;
selectedKeys: string[];
};
};
export declare const MenuHeader: () => React.JSX.Element;
export declare const MenuFooter: ({ onSave, onCancel, }: {
onSave?: () => void;
onCancel?: () => void;
}) => React.JSX.Element;
export declare const _WithHeader: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
export declare const _WithFooter: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
size: string;
options: MenuOption[];
selectedKeys: string[];
};
};
export declare const _WithHeaderAndFooter: {
(args: MenuProps): React.JSX.Element;
args: {
isFluid: boolean;
menuDisabled: boolean;
classNames: {
option: string;
};
options: MenuOption[];
optionsVariant: string;
selectedKeys: string[];
};
};
//# sourceMappingURL=Menu.stories.d.ts.map