@kwiz/fluentui 1.0.113 → 1.0.115
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/dist/controls/drawer-ex.d.ts +175 -3
- package/dist/controls/drawer-ex.js +8 -11
- package/dist/controls/drawer-ex.js.map +1 -1
- package/dist/controls/tag-ex.d.ts +2 -0
- package/dist/controls/tag-ex.js +10 -3
- package/dist/controls/tag-ex.js.map +1 -1
- package/dist/styles/styles.d.ts +3 -0
- package/dist/styles/styles.js +18 -7
- package/dist/styles/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,183 @@
|
|
|
1
|
-
import { DrawerHeaderProps, DrawerHeaderTitleProps
|
|
1
|
+
import { DrawerBodyProps, DrawerHeaderProps, DrawerHeaderTitleProps } from "@fluentui/react-components";
|
|
2
2
|
import React from "react";
|
|
3
3
|
export declare const DrawerEX: (props: {
|
|
4
|
-
rootProps?: DrawerProps;
|
|
5
4
|
headerProps?: DrawerHeaderProps;
|
|
6
5
|
headerTitleProps?: DrawerHeaderTitleProps;
|
|
7
|
-
|
|
6
|
+
bodyProps?: DrawerBodyProps;
|
|
7
|
+
title?: string | JSX.Element;
|
|
8
8
|
titleActions?: JSX.Element;
|
|
9
|
+
} & Omit<(Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & {
|
|
10
|
+
as?: "div";
|
|
11
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
12
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
9
13
|
} & {
|
|
14
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
15
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
16
|
+
}>;
|
|
17
|
+
} & {
|
|
18
|
+
type?: "inline" | "overlay";
|
|
19
|
+
} & Omit<import("@fluentui/react-drawer").OverlayDrawerSlots, "root"> & Omit<Partial<Pick<import("@fluentui/react-dialog").DialogSurfaceSlots, "backdrop" | "backdropMotion">> & {
|
|
20
|
+
root: import("@fluentui/react-utilities").Slot<"div", "aside">;
|
|
21
|
+
}, "root"> & Omit<{
|
|
22
|
+
as?: "div";
|
|
23
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
24
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
25
|
+
} & {
|
|
26
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
27
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
28
|
+
}>;
|
|
29
|
+
}, "ref"> & Pick<import("@fluentui/react-dialog").DialogSurfaceProps, "mountNode"> & Pick<import("@fluentui/react-dialog").DialogProps, "modalType" | "onOpenChange" | "inertTrapFocus"> & {
|
|
30
|
+
position?: "start" | "end" | "bottom";
|
|
31
|
+
size?: "small" | "medium" | "large" | "full";
|
|
32
|
+
open?: boolean;
|
|
33
|
+
} & {
|
|
34
|
+
defaultOpen?: boolean;
|
|
35
|
+
}) | (Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & {
|
|
36
|
+
as?: "div";
|
|
37
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
38
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
39
|
+
} & {
|
|
40
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
41
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
42
|
+
}>;
|
|
43
|
+
} & {
|
|
44
|
+
type?: "inline" | "overlay";
|
|
45
|
+
} & Omit<import("@fluentui/react-drawer").InlineDrawerSlots, "root"> & Omit<{
|
|
46
|
+
as?: "div";
|
|
47
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
48
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
49
|
+
} & {
|
|
50
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
51
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
52
|
+
}>;
|
|
53
|
+
}, "ref"> & {
|
|
54
|
+
position?: "start" | "end" | "bottom";
|
|
55
|
+
size?: "small" | "medium" | "large" | "full";
|
|
56
|
+
open?: boolean;
|
|
57
|
+
} & {
|
|
58
|
+
separator?: boolean;
|
|
59
|
+
}) | (Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & {
|
|
60
|
+
as: "aside";
|
|
61
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
62
|
+
ref?: React.Ref<HTMLElement>;
|
|
63
|
+
} & {
|
|
64
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
65
|
+
ref?: React.Ref<HTMLElement>;
|
|
66
|
+
}>;
|
|
67
|
+
} & {
|
|
68
|
+
type?: "inline" | "overlay";
|
|
69
|
+
} & Omit<import("@fluentui/react-drawer").OverlayDrawerSlots, "root"> & Omit<Partial<Pick<import("@fluentui/react-dialog").DialogSurfaceSlots, "backdrop" | "backdropMotion">> & {
|
|
70
|
+
root: import("@fluentui/react-utilities").Slot<"div", "aside">;
|
|
71
|
+
}, "root"> & Omit<{
|
|
72
|
+
as: "aside";
|
|
73
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
74
|
+
ref?: React.Ref<HTMLElement>;
|
|
75
|
+
} & {
|
|
76
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
77
|
+
ref?: React.Ref<HTMLElement>;
|
|
78
|
+
}>;
|
|
79
|
+
}, "ref"> & Pick<import("@fluentui/react-dialog").DialogSurfaceProps, "mountNode"> & Pick<import("@fluentui/react-dialog").DialogProps, "modalType" | "onOpenChange" | "inertTrapFocus"> & {
|
|
80
|
+
position?: "start" | "end" | "bottom";
|
|
81
|
+
size?: "small" | "medium" | "large" | "full";
|
|
82
|
+
open?: boolean;
|
|
83
|
+
} & {
|
|
84
|
+
defaultOpen?: boolean;
|
|
85
|
+
}) | (Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & {
|
|
86
|
+
as: "aside";
|
|
87
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
88
|
+
ref?: React.Ref<HTMLElement>;
|
|
89
|
+
} & {
|
|
90
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
91
|
+
ref?: React.Ref<HTMLElement>;
|
|
92
|
+
}>;
|
|
93
|
+
} & {
|
|
94
|
+
type?: "inline" | "overlay";
|
|
95
|
+
} & Omit<import("@fluentui/react-drawer").InlineDrawerSlots, "root"> & Omit<{
|
|
96
|
+
as: "aside";
|
|
97
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
98
|
+
ref?: React.Ref<HTMLElement>;
|
|
99
|
+
} & {
|
|
100
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
101
|
+
ref?: React.Ref<HTMLElement>;
|
|
102
|
+
}>;
|
|
103
|
+
}, "ref"> & {
|
|
104
|
+
position?: "start" | "end" | "bottom";
|
|
105
|
+
size?: "small" | "medium" | "large" | "full";
|
|
106
|
+
open?: boolean;
|
|
107
|
+
} & {
|
|
108
|
+
separator?: boolean;
|
|
109
|
+
}) | (Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & Omit<Partial<Pick<import("@fluentui/react-dialog").DialogSurfaceSlots, "backdrop" | "backdropMotion">> & {
|
|
110
|
+
root: import("@fluentui/react-utilities").Slot<"div", "aside">;
|
|
111
|
+
}, "root"> & Omit<{
|
|
112
|
+
as?: "div";
|
|
113
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
114
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
115
|
+
} & {
|
|
116
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
117
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
118
|
+
}>;
|
|
119
|
+
}, "ref"> & Pick<import("@fluentui/react-dialog").DialogSurfaceProps, "mountNode"> & {
|
|
120
|
+
type?: "inline" | "overlay";
|
|
121
|
+
} & Omit<import("@fluentui/react-drawer").OverlayDrawerSlots, "root"> & Pick<import("@fluentui/react-dialog").DialogProps, "modalType" | "onOpenChange" | "inertTrapFocus"> & {
|
|
122
|
+
position?: "start" | "end" | "bottom";
|
|
123
|
+
size?: "small" | "medium" | "large" | "full";
|
|
124
|
+
open?: boolean;
|
|
125
|
+
} & {
|
|
126
|
+
defaultOpen?: boolean;
|
|
127
|
+
}) | (Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & Omit<Partial<Pick<import("@fluentui/react-dialog").DialogSurfaceSlots, "backdrop" | "backdropMotion">> & {
|
|
128
|
+
root: import("@fluentui/react-utilities").Slot<"div", "aside">;
|
|
129
|
+
}, "root"> & Omit<{
|
|
130
|
+
as?: "div";
|
|
131
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
132
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
133
|
+
} & {
|
|
134
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
135
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
136
|
+
}>;
|
|
137
|
+
}, "ref"> & Pick<import("@fluentui/react-dialog").DialogSurfaceProps, "mountNode"> & {
|
|
138
|
+
type?: "inline" | "overlay";
|
|
139
|
+
} & Omit<import("@fluentui/react-drawer").InlineDrawerSlots, "root"> & {
|
|
140
|
+
position?: "start" | "end" | "bottom";
|
|
141
|
+
size?: "small" | "medium" | "large" | "full";
|
|
142
|
+
open?: boolean;
|
|
143
|
+
} & {
|
|
144
|
+
separator?: boolean;
|
|
145
|
+
}) | (Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & Omit<Partial<Pick<import("@fluentui/react-dialog").DialogSurfaceSlots, "backdrop" | "backdropMotion">> & {
|
|
146
|
+
root: import("@fluentui/react-utilities").Slot<"div", "aside">;
|
|
147
|
+
}, "root"> & Omit<{
|
|
148
|
+
as: "aside";
|
|
149
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
150
|
+
ref?: React.Ref<HTMLElement>;
|
|
151
|
+
} & {
|
|
152
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
153
|
+
ref?: React.Ref<HTMLElement>;
|
|
154
|
+
}>;
|
|
155
|
+
}, "ref"> & Pick<import("@fluentui/react-dialog").DialogSurfaceProps, "mountNode"> & {
|
|
156
|
+
type?: "inline" | "overlay";
|
|
157
|
+
} & Omit<import("@fluentui/react-drawer").OverlayDrawerSlots, "root"> & Pick<import("@fluentui/react-dialog").DialogProps, "modalType" | "onOpenChange" | "inertTrapFocus"> & {
|
|
158
|
+
position?: "start" | "end" | "bottom";
|
|
159
|
+
size?: "small" | "medium" | "large" | "full";
|
|
160
|
+
open?: boolean;
|
|
161
|
+
} & {
|
|
162
|
+
defaultOpen?: boolean;
|
|
163
|
+
}) | (Omit<import("@fluentui/react-drawer").DrawerSlots, "root"> & Omit<Partial<Pick<import("@fluentui/react-dialog").DialogSurfaceSlots, "backdrop" | "backdropMotion">> & {
|
|
164
|
+
root: import("@fluentui/react-utilities").Slot<"div", "aside">;
|
|
165
|
+
}, "root"> & Omit<{
|
|
166
|
+
as: "aside";
|
|
167
|
+
} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
168
|
+
ref?: React.Ref<HTMLElement>;
|
|
169
|
+
} & {
|
|
170
|
+
children?: React.ReactNode | import("@fluentui/react-utilities").SlotRenderFunction<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
171
|
+
ref?: React.Ref<HTMLElement>;
|
|
172
|
+
}>;
|
|
173
|
+
}, "ref"> & Pick<import("@fluentui/react-dialog").DialogSurfaceProps, "mountNode"> & {
|
|
174
|
+
type?: "inline" | "overlay";
|
|
175
|
+
} & Omit<import("@fluentui/react-drawer").InlineDrawerSlots, "root"> & {
|
|
176
|
+
position?: "start" | "end" | "bottom";
|
|
177
|
+
size?: "small" | "medium" | "large" | "full";
|
|
178
|
+
open?: boolean;
|
|
179
|
+
} & {
|
|
180
|
+
separator?: boolean;
|
|
181
|
+
}), "title"> & {
|
|
10
182
|
children?: React.ReactNode | undefined;
|
|
11
183
|
} & React.RefAttributes<HTMLDivElement>) => React.JSX.Element | null;
|
|
@@ -1,25 +1,22 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Drawer, DrawerBody, DrawerHeader,
|
|
2
|
+
import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, makeStyles, mergeClasses } from "@fluentui/react-components";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { useCommonStyles } from "../styles/styles";
|
|
5
5
|
const useStyles = makeStyles({
|
|
6
6
|
drawer: {
|
|
7
7
|
border: 0,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
'& button': {
|
|
14
|
-
color: tokens.colorNeutralBackground1
|
|
15
|
-
}
|
|
16
|
-
}
|
|
8
|
+
},
|
|
9
|
+
heading: {
|
|
10
|
+
//when using KWIZOverflowV2 in title
|
|
11
|
+
overflow: "hidden",
|
|
12
|
+
flexGrow: 1
|
|
17
13
|
}
|
|
18
14
|
});
|
|
19
15
|
export const DrawerEX = React.forwardRef((props, ref) => {
|
|
20
16
|
var _a, _b;
|
|
21
17
|
const commonStyles = useCommonStyles();
|
|
22
18
|
const css = useStyles();
|
|
23
|
-
|
|
19
|
+
const rootProps = Object.assign(Object.assign({}, props), { title: "", as: props.as });
|
|
20
|
+
return _jsxs(Drawer, Object.assign({ ref: ref }, rootProps, { className: mergeClasses(rootProps.className, css.drawer), children: [_jsx(DrawerHeader, Object.assign({}, props.headerProps, { className: commonStyles.header, children: _jsx(DrawerHeaderTitle, Object.assign({ heading: { className: css.heading } }, props.headerTitleProps, { action: props.titleActions || ((_a = props.headerTitleProps) === null || _a === void 0 ? void 0 : _a.action), children: props.title || ((_b = props.headerTitleProps) === null || _b === void 0 ? void 0 : _b.children) })) })), _jsx(DrawerBody, Object.assign({}, props.bodyProps, { children: props.children }))] }));
|
|
24
21
|
});
|
|
25
22
|
//# sourceMappingURL=drawer-ex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer-ex.js","sourceRoot":"","sources":["../../src/controls/drawer-ex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"drawer-ex.js","sourceRoot":"","sources":["../../src/controls/drawer-ex.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAmB,YAAY,EAAqB,iBAAiB,EAAuC,UAAU,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpM,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,MAAM,EAAE,CAAC;KACZ;IACD,OAAO,EAAE;QACL,oCAAoC;QACpC,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,CAAC;KACd;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAMN,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;;IAC7C,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,MAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IACxB,MAAM,SAAS,mCACR,KAAK,KACR,KAAK,EAAE,EAAE,EACT,EAAE,EAAE,KAAK,CAAC,EAAE,GACf,CAAC;IAEF,OAAO,MAAC,MAAM,kBAAC,GAAG,EAAE,GAAG,IAAM,SAAS,IAClC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,aAExD,KAAC,YAAY,oBAAK,KAAK,CAAC,WAAW,IAAE,SAAS,EAAE,YAAY,CAAC,MAAM,YAC/D,KAAC,iBAAiB,kBAAC,OAAO,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,OAAO,EAAE,IAAM,KAAK,CAAC,gBAAgB,IAAE,MAAM,EAAE,KAAK,CAAC,YAAY,KAAI,MAAA,KAAK,CAAC,gBAAgB,0CAAE,MAAM,CAAA,YAC3I,KAAK,CAAC,KAAK,KAAI,MAAA,KAAK,CAAC,gBAAgB,0CAAE,QAAQ,CAAA,IAChC,IACT,EACf,KAAC,UAAU,oBAAK,KAAK,CAAC,SAAS,cAC1B,KAAK,CAAC,QAAQ,IACN,KACR,CAAC;AACd,CAAC,CAAC,CAAC"}
|
|
@@ -15,6 +15,8 @@ interface iProps {
|
|
|
15
15
|
secondaryAction?: React.MouseEventHandler<HTMLButtonElement>;
|
|
16
16
|
value?: string;
|
|
17
17
|
title?: string;
|
|
18
|
+
/** control appearance based on selection mode */
|
|
19
|
+
selected?: true | false | "none";
|
|
18
20
|
}
|
|
19
21
|
export declare const TagEx: React.FunctionComponent<React.PropsWithChildren<iProps>>;
|
|
20
22
|
export {};
|
package/dist/controls/tag-ex.js
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { InteractionTag, InteractionTagPrimary, InteractionTagSecondary, Tag } from '@fluentui/react-components';
|
|
3
|
-
import { isFunction } from '@kwiz/common';
|
|
3
|
+
import { isFunction, isNullOrUndefined } from '@kwiz/common';
|
|
4
|
+
import { KnownClassNames } from '../styles';
|
|
4
5
|
export const TagEx = (props) => {
|
|
6
|
+
let className;
|
|
7
|
+
let appearance = props.appearance;
|
|
8
|
+
if (!isNullOrUndefined(props.selected)) {
|
|
9
|
+
appearance = props.selected === true ? "brand" : props.selected === false ? "outline" : "filled";
|
|
10
|
+
className = props.selected === true ? KnownClassNames.tagSelected : props.selected === false ? KnownClassNames.tagUnselected : KnownClassNames.tagNoSelection;
|
|
11
|
+
}
|
|
5
12
|
return isFunction(props.action)
|
|
6
|
-
? _jsxs(InteractionTag, { title: props.title, shape: props.shape, size: props.size, appearance:
|
|
7
|
-
: _jsx(Tag, { title: props.title, shape: props.shape, size: props.size, appearance:
|
|
13
|
+
? _jsxs(InteractionTag, { className: className, title: props.title, shape: props.shape, size: props.size, appearance: appearance, disabled: props.disabled, value: props.value, children: [_jsx(InteractionTagPrimary, { media: props.icon ? undefined : props.media, icon: props.icon, onClick: props.action, secondaryText: props.secondaryText, hasSecondaryAction: isFunction(props.secondaryAction), children: props.text }), props.secondaryAction && _jsx(InteractionTagSecondary, { onClick: props.secondaryAction, "aria-label": "remove" })] })
|
|
14
|
+
: _jsx(Tag, { className: className, title: props.title, shape: props.shape, size: props.size, appearance: appearance, disabled: props.disabled, dismissible: isFunction(props.secondaryAction), value: props.value, children: props.text });
|
|
8
15
|
};
|
|
9
16
|
//# sourceMappingURL=tag-ex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag-ex.js","sourceRoot":"","sources":["../../src/controls/tag-ex.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,GAAG,EAAoC,MAAM,4BAA4B,CAAC;AACnJ,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"tag-ex.js","sourceRoot":"","sources":["../../src/controls/tag-ex.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,GAAG,EAAoC,MAAM,4BAA4B,CAAC;AACnJ,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAoB5C,MAAM,CAAC,MAAM,KAAK,GAA6D,CAAC,KAAK,EAAE,EAAE;IACrF,IAAI,SAAiB,CAAC;IACtB,IAAI,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;IAClC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrC,UAAU,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;QACjG,SAAS,GAAG,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,cAAc,CAAC;IAClK,CAAC;IACD,OAAO,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC;QAC3B,CAAC,CAAC,MAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAClK,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EACvG,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,kBAAkB,EAAE,UAAU,CAAC,KAAK,CAAC,eAAe,CAAC,YAAG,KAAK,CAAC,IAAI,GAAyB,EAClI,KAAK,CAAC,eAAe,IAAI,KAAC,uBAAuB,IAAC,OAAO,EAAE,KAAK,CAAC,eAAe,gBAAa,QAAQ,GAAG,IAC5F;QACjB,CAAC,CAAC,KAAC,GAAG,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACnI,WAAW,EAAE,UAAU,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,YACjE,KAAK,CAAC,IAAI,GACT,CAAC;AACf,CAAC,CAAA"}
|
package/dist/styles/styles.d.ts
CHANGED
package/dist/styles/styles.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { makeStyles, tokens } from "@fluentui/react-components";
|
|
1
|
+
import { buttonClassNames, makeStyles, tokens } from "@fluentui/react-components";
|
|
2
2
|
export const KnownClassNames = {
|
|
3
3
|
print: 'print-root',
|
|
4
4
|
printHide: 'print-hide',
|
|
@@ -12,10 +12,13 @@ export const KnownClassNames = {
|
|
|
12
12
|
accordionBody: 'kfui-accordion-body',
|
|
13
13
|
accordionBodyWrapper: 'kfui-accordion-body-wrapper',
|
|
14
14
|
isOpen: 'is-opened',
|
|
15
|
-
progressBarStepLabel: 'step-label',
|
|
15
|
+
progressBarStepLabel: 'kfui-step-label',
|
|
16
16
|
left: 'float-left',
|
|
17
17
|
right: 'float-right',
|
|
18
|
-
cardList: 'card-list'
|
|
18
|
+
cardList: 'kfui-card-list',
|
|
19
|
+
tagSelected: 'kfui-tag-selected',
|
|
20
|
+
tagUnselected: 'kfui-tag-unselected',
|
|
21
|
+
tagNoSelection: 'kfui-tag-no-selection',
|
|
19
22
|
};
|
|
20
23
|
export var mixins;
|
|
21
24
|
(function (mixins) {
|
|
@@ -67,8 +70,6 @@ export var mixins;
|
|
|
67
70
|
overflow: 'hidden',
|
|
68
71
|
textOverflow: 'ellipsis'
|
|
69
72
|
};
|
|
70
|
-
// export const box: GriffelStyle = {
|
|
71
|
-
// }
|
|
72
73
|
})(mixins || (mixins = {}));
|
|
73
74
|
export const useCommonStyles = makeStyles({
|
|
74
75
|
hintLabel: {
|
|
@@ -98,9 +99,19 @@ export const useCommonStyles = makeStyles({
|
|
|
98
99
|
backgroundColor: tokens.colorBrandBackground,
|
|
99
100
|
color: tokens.colorBrandBackgroundInverted,
|
|
100
101
|
padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXL}`,
|
|
101
|
-
|
|
102
|
+
[`& .${KnownClassNames.tagSelected} button`]: {
|
|
103
|
+
backgroundColor: tokens.colorBrandBackgroundSelected
|
|
104
|
+
},
|
|
105
|
+
[`& .${KnownClassNames.tagNoSelection} button`]: {
|
|
106
|
+
backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
|
|
107
|
+
color: tokens.colorNeutralForeground1
|
|
108
|
+
},
|
|
109
|
+
[`& button, & button:hover, & a, & a:hover, & button:hover .${buttonClassNames.icon}`]: {
|
|
102
110
|
color: tokens.colorBrandBackgroundInverted
|
|
103
|
-
}
|
|
111
|
+
},
|
|
112
|
+
'& button:hover': {
|
|
113
|
+
backgroundColor: tokens.colorBrandBackgroundHover
|
|
114
|
+
},
|
|
104
115
|
}
|
|
105
116
|
});
|
|
106
117
|
export const commonSizes = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"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"}
|