@kwiz/fluentui 1.0.217 → 1.0.220
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/drop-divider.d.ts +19 -0
- package/dist/controls/drop-divider.js +24 -0
- package/dist/controls/drop-divider.js.map +1 -0
- package/dist/controls/icon-picker.d.ts +17 -0
- package/dist/controls/icon-picker.js +47 -0
- package/dist/controls/icon-picker.js.map +1 -0
- package/dist/controls/index.d.ts +2 -0
- package/dist/controls/index.js +2 -0
- package/dist/controls/index.js.map +1 -1
- package/dist/controls/kwizoverflow2.d.ts +8 -1
- package/dist/controls/kwizoverflow2.js.map +1 -1
- package/dist/helpers/use-fluent-icon.d.ts +8 -0
- package/dist/helpers/use-fluent-icon.js +83 -0
- package/dist/helpers/use-fluent-icon.js.map +1 -0
- package/package.json +4 -3
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { FluentIcon } from '@fluentui/react-icons';
|
|
2
|
+
interface iProps {
|
|
3
|
+
vertical?: boolean;
|
|
4
|
+
label?: string;
|
|
5
|
+
drop: {
|
|
6
|
+
isOver: boolean;
|
|
7
|
+
dropRef: (element: HTMLDivElement | null) => void;
|
|
8
|
+
};
|
|
9
|
+
expectingDrop: boolean;
|
|
10
|
+
/** show the divider even when not hovering to drop */
|
|
11
|
+
showWhenNoDrop?: boolean;
|
|
12
|
+
/** use a different icon when not hovering to drop */
|
|
13
|
+
notDropIcon?: FluentIcon;
|
|
14
|
+
/** provide an on click handler when not hovering to drop */
|
|
15
|
+
noDropOnClick?: () => void;
|
|
16
|
+
}
|
|
17
|
+
/** use by passing a useDragDropContext with dropInfo, pass the props as-is <DropDivider {...dropContext} /> */
|
|
18
|
+
export declare function DropDivider(props: iProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
|
|
3
|
+
import { AddCircleRegular, MoreHorizontalRegular, MoreVerticalRegular } from '@fluentui/react-icons';
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
|
+
import { DividerEX } from './divider';
|
|
6
|
+
const useStyles = makeStyles({
|
|
7
|
+
dropDivider: {
|
|
8
|
+
"::before": Object.assign({}, shorthands.borderWidth(tokens.strokeWidthThickest)),
|
|
9
|
+
"::after": Object.assign({}, shorthands.borderWidth(tokens.strokeWidthThickest)),
|
|
10
|
+
},
|
|
11
|
+
dropDividerOver: {
|
|
12
|
+
"::before": Object.assign({}, shorthands.borderColor(tokens.colorBrandBackground)),
|
|
13
|
+
"::after": Object.assign({}, shorthands.borderColor(tokens.colorBrandBackground)),
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
/** use by passing a useDragDropContext with dropInfo, pass the props as-is <DropDivider {...dropContext} /> */
|
|
17
|
+
export function DropDivider(props) {
|
|
18
|
+
const classes = useStyles();
|
|
19
|
+
const NoOverIcon = useMemo(() => props.notDropIcon || (props.vertical ? AddCircleRegular : MoreHorizontalRegular), [props.vertical, props.notDropIcon]);
|
|
20
|
+
return props.expectingDrop
|
|
21
|
+
? _jsx(DividerEX, { ref: props.drop.dropRef, className: mergeClasses(classes.dropDivider, props.drop && props.drop.isOver && classes.dropDividerOver), vertical: props.vertical, title: props.label || "insert here", children: props.vertical ? _jsx(MoreVerticalRegular, {}) : _jsx(MoreHorizontalRegular, {}) })
|
|
22
|
+
: props.showWhenNoDrop ? _jsx(DividerEX, { vertical: props.vertical, title: props.label || "insert here", onClick: props.noDropOnClick, children: _jsx(NoOverIcon, {}) }) : undefined;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=drop-divider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drop-divider.js","sourceRoot":"","sources":["../../src/controls/drop-divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC1F,OAAO,EAAE,gBAAgB,EAAc,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,WAAW,EAAE;QACT,UAAU,oBACH,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,mBAAmB,CAAC,CACxD;QACD,SAAS,oBACF,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,mBAAmB,CAAC,CACxD;KACJ;IACD,eAAe,EAAE;QACb,UAAU,oBACH,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACzD;QACD,SAAS,oBACF,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,oBAAoB,CAAC,CACzD;KACJ;CACJ,CAAC,CAAC;AAiBH,+GAA+G;AAC/G,MAAM,UAAU,WAAW,CAAC,KAAa;IACrC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC;IAExJ,OAAO,KAAK,CAAC,aAAa;QACtB,CAAC,CAAC,KAAC,SAAS,IAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,aAAa,YACxM,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,KAAC,qBAAqB,KAAG,GAC7D;QACZ,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,aAAa,EAAE,OAAO,EAAE,KAAK,CAAC,aAAa,YAC3H,KAAC,UAAU,KAAG,GACN,CAAC,CAAC,CAAC,SAAS,CAAC;AACjC,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FluentIconsProps } from "@fluentui/react-icons";
|
|
2
|
+
import { ButtonEXProps } from "../types";
|
|
3
|
+
export declare function IconGallery({ value, onChange, searchable, withNone }: {
|
|
4
|
+
value?: string;
|
|
5
|
+
onChange: (icon?: string) => void;
|
|
6
|
+
searchable?: boolean;
|
|
7
|
+
/** show first item "none" */
|
|
8
|
+
withNone?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function IconPicker({ value, onChange, extendButtonProps }: {
|
|
11
|
+
value: string;
|
|
12
|
+
onChange: (icon?: string) => void;
|
|
13
|
+
extendButtonProps?: Partial<ButtonEXProps>;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export default function DynamicIcon(props: {
|
|
16
|
+
name?: string;
|
|
17
|
+
} & FluentIconsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Caption1, makeStyles, tokens } from "@fluentui/react-components";
|
|
3
|
+
import { DismissRegular, ImageColor, ImageDismissRegular } from "@fluentui/react-icons";
|
|
4
|
+
import { shorthands } from "@griffel/react";
|
|
5
|
+
import { isNotEmptyString, isNullOrEmptyString } from "@kwiz/common";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
7
|
+
import { useFluentIcon, useFluentIconsList } from "../helpers/use-fluent-icon";
|
|
8
|
+
import { ButtonEX } from "./button";
|
|
9
|
+
import { DrawerEX } from "./drawer-ex";
|
|
10
|
+
import { Horizontal } from "./horizontal";
|
|
11
|
+
import { Search } from "./search";
|
|
12
|
+
import { Vertical } from "./vertical";
|
|
13
|
+
const useStyles = makeStyles({
|
|
14
|
+
icon: {
|
|
15
|
+
width: '80px',
|
|
16
|
+
padding: tokens.spacingHorizontalM,
|
|
17
|
+
border: `${tokens.strokeWidthThin} solid transparent`,
|
|
18
|
+
borderRadius: tokens.borderRadiusSmall,
|
|
19
|
+
':hover': Object.assign({}, shorthands.borderColor(tokens.colorNeutralStroke1Hover))
|
|
20
|
+
},
|
|
21
|
+
selected: Object.assign({}, shorthands.borderColor(tokens.colorNeutralStroke1Selected))
|
|
22
|
+
});
|
|
23
|
+
export function IconGallery({ value, onChange, searchable, withNone }) {
|
|
24
|
+
const css = useStyles();
|
|
25
|
+
const icons = useFluentIconsList();
|
|
26
|
+
const [search, setSearch] = useState("");
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (!searchable)
|
|
29
|
+
setSearch(""); //in case caller set it to searchable, user searches, then they change it.
|
|
30
|
+
}, [searchable]);
|
|
31
|
+
return _jsxs(Vertical, { main: true, children: [searchable && _jsx(Search, { value: search, onChangeDeferred: newValue => setSearch(newValue || "") }), _jsxs(Horizontal, { wrap: true, main: true, children: [(withNone && isNullOrEmptyString(search)) && _jsxs(Vertical, { centered: true, css: [css.icon, isNullOrEmptyString(value) ? css.selected : ''], onClick: () => onChange(), children: [_jsx(ImageDismissRegular, { fontSize: tokens.fontSizeBase600 }), _jsx(Caption1, { style: { textAlign: "center" }, children: "None" })] }), (isNotEmptyString(search) ? icons.filter(icon => icon.name.toLowerCase().includes(search.toLowerCase())) : icons)
|
|
32
|
+
.map(icon => _jsxs(Vertical, { centered: true, css: [css.icon, icon.name === value ? css.selected : ''], onClick: () => onChange(icon.name), children: [_jsx(DynamicIcon, { name: icon.name, fontSize: tokens.fontSizeBase600 }, icon.name), _jsx(Caption1, { style: { textAlign: "center" }, children: icon.title })] }, icon.name))] })] });
|
|
33
|
+
}
|
|
34
|
+
export function IconPicker({ value, onChange, extendButtonProps }) {
|
|
35
|
+
const [open, setOpen] = useState(false);
|
|
36
|
+
return _jsxs(_Fragment, { children: [_jsx(ButtonEX, Object.assign({ icon: isNotEmptyString(value) ? _jsx(DynamicIcon, { name: value }) : _jsx(ImageColor, {}), title: "Pick an icon", showTitleWithIcon: true, dontCenterText: true }, (extendButtonProps || {}), {
|
|
37
|
+
//after teh expand so they don't take over our onclick
|
|
38
|
+
onClick: () => setOpen(true) })), open && _jsxs(DrawerEX, { title: "Icon gallery", open: true, size: "large", titleActions: _jsx(ButtonEX, { icon: _jsx(DismissRegular, {}), title: "Close", onClick: () => setOpen(false) }), children: [_jsx("br", {}), _jsx(IconGallery, { withNone: true, searchable: true, value: value, onChange: icon => {
|
|
39
|
+
onChange(icon);
|
|
40
|
+
setOpen(false);
|
|
41
|
+
} })] })] });
|
|
42
|
+
}
|
|
43
|
+
export default function DynamicIcon(props) {
|
|
44
|
+
const Icon = useFluentIcon(props === null || props === void 0 ? void 0 : props.name);
|
|
45
|
+
return Icon ? _jsx(Icon, Object.assign({}, (props || {}))) : null;
|
|
46
|
+
}
|
|
47
|
+
//# sourceMappingURL=icon-picker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon-picker.js","sourceRoot":"","sources":["../../src/controls/icon-picker.tsx"],"names":[],"mappings":"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"}
|
package/dist/controls/index.d.ts
CHANGED
|
@@ -21,7 +21,9 @@ export * from './file-upload';
|
|
|
21
21
|
export * from './form';
|
|
22
22
|
export * from './horizontal';
|
|
23
23
|
export * from './html-editor';
|
|
24
|
+
export * from './icon-picker';
|
|
24
25
|
export * from './input';
|
|
26
|
+
export * from './drop-divider';
|
|
25
27
|
export * from './kwizoverflow';
|
|
26
28
|
export * from './kwizoverflow2';
|
|
27
29
|
export * from './list';
|
package/dist/controls/index.js
CHANGED
|
@@ -21,7 +21,9 @@ export * from './file-upload';
|
|
|
21
21
|
export * from './form';
|
|
22
22
|
export * from './horizontal';
|
|
23
23
|
export * from './html-editor';
|
|
24
|
+
export * from './icon-picker';
|
|
24
25
|
export * from './input';
|
|
26
|
+
export * from './drop-divider';
|
|
25
27
|
export * from './kwizoverflow';
|
|
26
28
|
export * from './kwizoverflow2';
|
|
27
29
|
export * from './list';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}
|
|
@@ -4,13 +4,20 @@ import { ButtonEXProps } from "../types";
|
|
|
4
4
|
import { iHorizontalProps } from "./horizontal";
|
|
5
5
|
import { iMenuExProps } from "./menu";
|
|
6
6
|
export declare const kwizOVerflowMoreMenuCSSName = "kfui-overflow-more";
|
|
7
|
+
export interface iOverflowV2OverflowButtonProps<ItemType> extends iOverflowV2Props<ItemType> {
|
|
8
|
+
overflowItems: {
|
|
9
|
+
item: ItemType;
|
|
10
|
+
/** used internally for the overflow menu */
|
|
11
|
+
$originalIndex?: number;
|
|
12
|
+
}[];
|
|
13
|
+
}
|
|
7
14
|
export interface iOverflowV2Props<ItemType> {
|
|
8
15
|
/** you cannot have a menu with trigger in overflow items. put those in groupWrapper controls before/after rendering children. */
|
|
9
16
|
items: ItemType[];
|
|
10
17
|
/** when overflow:true, if using the OOB menu, should return a <MenuItem> */
|
|
11
18
|
renderItem: (item: ItemType, index: number, overflow?: boolean) => JSX.Element;
|
|
12
19
|
/** items will only have the items that need to overflow. Add kwizOVerflowMoreMenuCSSName to the button */
|
|
13
|
-
renderOverflowMenuButton?: (props:
|
|
20
|
+
renderOverflowMenuButton?: (props: iOverflowV2OverflowButtonProps<ItemType>) => JSX.Element;
|
|
14
21
|
root?: Partial<iHorizontalProps>;
|
|
15
22
|
nowrap?: boolean;
|
|
16
23
|
/** if you have this inside a TabList, turn this flag on to make sure tabs don't wrap / shrink text */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kwizoverflow2.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow2.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAa,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACtG,OAAc,EAAqB,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAoB,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAgB,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,GAAG,IAAI,YAAY,CAAC,YAAY,CAAC,CAAC;AAC9C,MAAM,CAAC,MAAM,2BAA2B,GAAG,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"kwizoverflow2.js","sourceRoot":"","sources":["../../src/controls/kwizoverflow2.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAa,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACtG,OAAc,EAAqB,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAoB,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAgB,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,MAAM,GAAG,IAAI,YAAY,CAAC,YAAY,CAAC,CAAC;AAC9C,MAAM,CAAC,MAAM,2BAA2B,GAAG,oBAAoB,CAAC;AAqChE,MAAM,YAAY,GAAG,CAAY,KAA+C,EAAE,EAAE;;IAChF,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,SAAS,GAAG,MAAM,EAAc,CAAC;IAEvC,IAAI,KAAK,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,SAAS,CAAC;SAClD,IAAI,KAAK,CAAC,wBAAwB;QACnC,OAAO,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,CAAA,MAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,UAAU,mDAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA,MAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,kDAAI,KAAI,OAAO,EAAE,CAAC,KAAI,YAAY,CAAC;IACpH,OAAO,KAAC,MAAM,IAAC,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,SAAS,EACtD,OAAO,kBACH,SAAS,EAAE,2BAA2B,EACtC,IAAI,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAC,mBAAmB,KAAG,EAC/C,KAAK,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,QAAQ,EAClD,WAAW,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EACvC,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,IAC9C,CAAC,KAAK,CAAC,mBAAmB,IAAI,EAAE,CAAC,GAExC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACvC,KAAK,EAAE,IAAI,KAAK,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,KAAC,OAAO,IAAkC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,SAAS,CAAC,OAAO,yDAAI,CAAA,EAAA,YAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,EAAE,IAAI,CAAC,IAA3H,IAAI,KAAK,CAAC,cAAc,EAAE,CAA4G;SAClN,CAAC,CAAC,GACL,CAAC;AACP,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,IAAI,EAAE;QACF,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;KACnB;IACD,MAAM,EAAE;QACJ,UAAU,EAAE,QAAQ;KACvB;IACD,UAAU,EAAE;QACR,CAAC,MAAM,aAAa,CAAC,OAAO,EAAE,CAAC,EAAE;YAC7B,QAAQ,EAAE,SAAS;SACtB;KACJ;IACD,YAAY,EAAE;QACV,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,MAAM;KACpB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAY,KAAoD,EAAE,EAAE;;IAC9F,MAAM,GAAG,GAAG,SAAS,EAAE,CAAC;IACxB,MAAM,UAAU,GAAG,eAAe,CAAiB,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACpF,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,IAAc,EAAE,KAAa,EAAE,EAAE;;QAC9D,MAAM,CAAC,GAAG,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,sDAAG,IAAI,EAAE,KAAK,CAAC,KAAI,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC;;YAC/B,OAAO,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,SAAS,MAAM,CAAC,GAAmB;QAC/B,OAAO,KAAK,CAAC,QAAQ;YACjB,CAAC,CAAC,GAAG,CAAC,YAAY,GAAG,GAAG,CAAC,YAAY;YACrC,CAAC,CAAC,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;IAC5C,CAAC;IAED,MAAM,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,IAIpC,EAAE,EAAE;QACD,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC;YAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,gBAAgB,CAAC,WAAW,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC;YACtF,MAAM,YAAY,GAAG,YAAY,CAAC,aAAa,CAAC,IAAI,2BAA2B,EAAE,CAAC,CAAC;YACnF,IAAI,WAAW,GAAoE,EAAE,CAAC;YACtF,IAAI,eAAe,GAAG,CAAC,CAAC;YACxB,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAClB,MAAM,OAAO,GAAG,CAAmB,CAAC;gBACpC,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;gBACpD,IAAI,SAAS,IAAI,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;oBACnD,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;oBAC/D,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAA,oEAAoE;oBACzH,IAAI,QAAQ,GAAG,eAAe;wBAAE,eAAe,GAAG,QAAQ,CAAC;oBAC3D,WAAW,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;gBAC5D,CAAC;YACL,CAAC,CAAC,CAAC;YAEH,oCAAoC;YACpC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;YACnD,6CAA6C;YAC7C,WAAW,CAAC,OAAO,EAAE,CAAC;YACtB,mCAAmC;YACnC,MAAM,kBAAkB,GAAa,EAAE,CAAC;YAExC,IAAI,eAAe,GAAG,CAAC,CAAC,CAAA,WAAW;YACnC;YACI,yCAAyC;YACzC,eAAe,IAAI,eAAe;gBAClC,0BAA0B;mBACvB,MAAM,CAAC,YAAY,CAAC,EACzB,CAAC;gBACC,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,eAAe,CAAC,CAAC;gBACrF,eAAe,EAAE,CAAC;gBAElB,IAAI,YAAY,GAAG,CAAC,CAAC,CAAA,WAAW;gBAChC;gBACI,oBAAoB;gBACpB,YAAY,GAAG,oBAAoB,CAAC,MAAM;oBAC1C,0BAA0B;uBACvB,MAAM,CAAC,YAAY,CAAC,EACzB,CAAC;oBACC,MAAM,KAAK,GAAG,oBAAoB,CAAC,YAAY,EAAE,CAAC,CAAC;oBACnD,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;oBACzC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBACrC,CAAC;YACL,CAAC;YAED,qHAAqH;YACrH,4DAA4D;YAE5D,+DAA+D;YAC/D,kBAAkB,CAAC,kBAAkB,CAAC,OAAO,EAAE,CAAC,CAAC;YACjD,8GAA8G;YAC9G,IAAI,CAAC,YAAY,IAAI,eAAe,CAAC,kBAAkB,CAAC;gBACpD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;QACnD,CAAC;IACL,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAGxB,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,CAAC,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhI,MAAM,UAAU,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,IAAI,GAAG,CAAC,UAAU;QACtJ,GAAG,CAAC,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,GAAG,KAAI,EAAE,CAAC;KACzB,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACX,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,OAAO,CACH,MAAC,OAAO,kBAAC,GAAG,EAAE,UAAU,CAAC,GAAG,IAAM,KAAK,CAAC,IAAI,IAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC;YACjG,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,aAC1F,KAAK,CAAC,cAAc,EACpB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,KAAC,OAAO,IAAmB,SAAS,EAAE;oBACpE,iBAAiB,EAAE,KAAK,CAAA,qDAAqD;iBACzE,YAAG,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,IAFC,IAAI,KAAK,EAAE,CAED,CAAC,EAC3D,KAAC,YAAY,oBAAK,KAAK,IAAE,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAC1I,KAAK,CAAC,QAAQ,KACT,CACb,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FluentIcon } from "@fluentui/react-icons";
|
|
2
|
+
/** renders a FluentUI 9 icon by best match to a name, e.g. Search finds SearchRegular. renders nothing if nothing matches */
|
|
3
|
+
export declare function useFluentIcon(name?: string): FluentIcon | undefined;
|
|
4
|
+
/** all available icon names, without size or variant suffix, e.g. Search. Empty until the icons package is loaded */
|
|
5
|
+
export declare function useFluentIconsList(): {
|
|
6
|
+
name: string;
|
|
7
|
+
title: string;
|
|
8
|
+
}[];
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
let iconsPromise;
|
|
3
|
+
const variants = ["regular", "filled", "color"];
|
|
4
|
+
const normalize = (value) => value.toLowerCase().replace(/[^a-z0-9]/g, "");
|
|
5
|
+
/** loads the icons package only once, and only when an icon is actually needed */
|
|
6
|
+
function loadIcons() {
|
|
7
|
+
iconsPromise !== null && iconsPromise !== void 0 ? iconsPromise : (iconsPromise = import("@fluentui/react-icons").then(m => {
|
|
8
|
+
const icons = m;
|
|
9
|
+
const entries = [];
|
|
10
|
+
Object.keys(icons).forEach(name => {
|
|
11
|
+
const match = /^([A-Z][A-Za-z]*?)(\d*)(Regular|Filled|Color)$/.exec(name);
|
|
12
|
+
if (match)
|
|
13
|
+
entries.push({ base: match[1], stem: normalize(match[1]), sized: match[2] !== "", variantRank: variants.indexOf(match[3].toLowerCase()), name });
|
|
14
|
+
});
|
|
15
|
+
return { icons, entries };
|
|
16
|
+
}));
|
|
17
|
+
return iconsPromise;
|
|
18
|
+
}
|
|
19
|
+
/** best match for a name like "search", "Search" or "SearchFilled". prefers exact names, then the regular variant, then unsized icons */
|
|
20
|
+
function findBestIcon({ icons, entries }, name) {
|
|
21
|
+
var _a;
|
|
22
|
+
const exact = (_a = icons[`${name}Regular`]) !== null && _a !== void 0 ? _a : icons[name];
|
|
23
|
+
if (exact)
|
|
24
|
+
return exact;
|
|
25
|
+
const query = normalize(name);
|
|
26
|
+
const requested = variants.find(v => query.endsWith(v));
|
|
27
|
+
const base = requested ? query.slice(0, -requested.length) : query;
|
|
28
|
+
if (!base)
|
|
29
|
+
return undefined;
|
|
30
|
+
let best;
|
|
31
|
+
let bestScore = Infinity;
|
|
32
|
+
for (const entry of entries) {
|
|
33
|
+
let score;
|
|
34
|
+
if (entry.stem === base)
|
|
35
|
+
score = 0;
|
|
36
|
+
else if (entry.stem.startsWith(base))
|
|
37
|
+
score = 10 + (entry.stem.length - base.length) / 100;
|
|
38
|
+
else if (entry.stem.includes(base))
|
|
39
|
+
score = 20 + (entry.stem.length - base.length) / 100;
|
|
40
|
+
else
|
|
41
|
+
continue;
|
|
42
|
+
const variant = requested ? (variants[entry.variantRank] === requested ? 0 : 1 + entry.variantRank) : entry.variantRank;
|
|
43
|
+
score += variant + (entry.sized ? 0.5 : 0);
|
|
44
|
+
if (score < bestScore) {
|
|
45
|
+
bestScore = score;
|
|
46
|
+
best = entry;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return best ? icons[best.name] : undefined;
|
|
50
|
+
}
|
|
51
|
+
/** renders a FluentUI 9 icon by best match to a name, e.g. Search finds SearchRegular. renders nothing if nothing matches */
|
|
52
|
+
export function useFluentIcon(name) {
|
|
53
|
+
const [icon, setIcon] = useState();
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
let cancelled = false;
|
|
56
|
+
setIcon(undefined);
|
|
57
|
+
if (name)
|
|
58
|
+
loadIcons().then(index => {
|
|
59
|
+
const found = findBestIcon(index, name);
|
|
60
|
+
if (!cancelled && found)
|
|
61
|
+
setIcon(() => found);
|
|
62
|
+
});
|
|
63
|
+
return () => { cancelled = true; };
|
|
64
|
+
}, [name]);
|
|
65
|
+
return icon;
|
|
66
|
+
}
|
|
67
|
+
/** all available icon names, without size or variant suffix, e.g. Search. Empty until the icons package is loaded */
|
|
68
|
+
export function useFluentIconsList() {
|
|
69
|
+
const [names, setNames] = useState([]);
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
let cancelled = false;
|
|
72
|
+
loadIcons().then(({ entries }) => {
|
|
73
|
+
if (!cancelled)
|
|
74
|
+
setNames(Array.from(new Set(entries.map(e => e.base))).sort().map(name => ({
|
|
75
|
+
name,
|
|
76
|
+
title: name.replace(/(?<!^)([A-Z])/g, " $1")
|
|
77
|
+
})));
|
|
78
|
+
});
|
|
79
|
+
return () => { cancelled = true; };
|
|
80
|
+
}, []);
|
|
81
|
+
return names;
|
|
82
|
+
}
|
|
83
|
+
//# sourceMappingURL=use-fluent-icon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-fluent-icon.js","sourceRoot":"","sources":["../../src/helpers/use-fluent-icon.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kwiz/fluentui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.220",
|
|
4
4
|
"description": "KWIZ common controls for FluentUI",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -80,9 +80,10 @@
|
|
|
80
80
|
"resolve-pkg-maps": "^1.0.0"
|
|
81
81
|
},
|
|
82
82
|
"peerDependencies": {
|
|
83
|
-
"@fluentui/react-components": "
|
|
84
|
-
"@fluentui/react-icons": "^2.0.
|
|
83
|
+
"@fluentui/react-components": "^9.75.1",
|
|
84
|
+
"@fluentui/react-icons": "^2.0.345",
|
|
85
85
|
"@fluentui/react-utilities": "^9.18.20",
|
|
86
|
+
"@griffel/react": "^1.5.32",
|
|
86
87
|
"@types/react": ">=16.14.0 <19.0.0",
|
|
87
88
|
"@types/react-dom": ">=16.9.0 <19.0.0",
|
|
88
89
|
"react": ">=16.14.0 <19.0.0",
|