@kwiz/fluentui 1.0.61 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.61",
+    "version": "1.0.63",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -61,6 +61,8 @@
         "@fluentui/react-datepicker-compat": "^0.4.53",
         "@fluentui/react-timepicker-compat": "^0.2.42",
         "@kwiz/common": "^1.0.103",
+        "@mismerge/core": "^1.2.1",
+        "@mismerge/react": "^1.0.1",
         "esbuild": "^0.19.12",
         "get-tsconfig": "^4.7.2",
         "jodit": "^4.2.47",

package/src/controls/button.tsx

@@ -2,7 +2,7 @@ import { Button, ButtonProps, CompoundButton, compoundButtonClassNames, Compound
 import { capitalizeFirstLetter, isFunction, isNullOrEmptyString, isNullOrUndefined, isString, PushNoDuplicate } from '@kwiz/common';
 import React from 'react';
 import { useKWIZFluentContext } from '../helpers/context-internal';
-import { commonSizes, useCommonStyles } from '../styles/styles';
+import { commonSizes, KnownClassNames } from '../styles/styles';
 
 interface IProps {
     title: string;//required
@@ -72,11 +72,10 @@ export const ButtonEX = React.forwardRef<HTMLButtonElement, (ButtonEXProps)>((pr
     let hasIcon = !isNullOrUndefined(icon);
     let hasText = props.children || !hasIcon || (hasIcon && props.showTitleWithIcon === true);
 
-    const commonCssNames = useCommonStyles();
     const cssNames = useStyles();
     let css: string[] = [];
 
-    if (props.hideOnPrint) PushNoDuplicate(css, commonCssNames.printHide);
+    if (props.hideOnPrint) PushNoDuplicate(css, KnownClassNames.printHide);
     if (props.dontCenterText) PushNoDuplicate(css, cssNames.buttonNoCenter);
 
     let btn = <Button ref={ref} appearance='subtle' {...props as any as ButtonProps} className={mergeClasses(...css, props.className)}

package/src/controls/centered.tsx

@@ -1,21 +1,13 @@
-import { makeStyles } from '@fluentui/react-components';
 import React from 'react';
 import { Horizontal } from './horizontal';
 import { Vertical } from './vertical';
 
-const useStyles = makeStyles({
-    center: {
-        justifyContent: 'center'
-    },
-})
-
 interface IProps {
 }
 export const Centered: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
-    const cssNames = useStyles();
     return (
-        <Vertical main css={[cssNames.center]}>
-            <Horizontal css={[cssNames.center]}>
+        <Vertical main vCentered>
+            <Horizontal hCentered>
                 {props.children}
             </Horizontal>
         </Vertical>

package/src/controls/date.tsx

@@ -40,7 +40,7 @@ export const DatePickerEx: React.FunctionComponent<React.PropsWithChildren<IProp
             timeValue ? timeValue.getMinutes() : 0, 0, 0
         );
         props.onDateChange(newDate);
-    }, [timeValue]);
+    }, [timeValue, props.onDateChange]);
 
     const changeTimeHandler = React.useCallback((newTimeValue: Date): void => {
         //update our state

package/src/controls/dropdown.tsx

@@ -1,18 +1,20 @@
 import { Dropdown, DropdownProps, makeStyles, mergeClasses, Option } from '@fluentui/react-components';
 import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
 import React from 'react';
+import { GetLogger } from '../_modules/config';
 import { useKWIZFluentContext } from '../helpers/context-internal';
 
+const logger = GetLogger("DropdownEX");
+
 const useStyles = makeStyles({
     root: {
         minWidth: "auto"
     },
 });
 
-
 type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
 
-interface IProps<dataType, keyType extends string = string> extends ForwardProps {
+interface IProps<keyType, dataType> extends ForwardProps {
     required?: boolean;
     selected: keyType | keyType[];
     items: {
@@ -27,40 +29,39 @@ interface IProps<dataType, keyType extends string = string> extends ForwardProps
         options?: { key: keyType, value: string, data?: dataType }[]) => void;
 }
 
-/** get a DropdownEX typed with forward ref. Usage:
- * const MyDropdownEX = DropdownEX3<myKeyType, myDataType>();
- * ...
- * <MyDropdownEX ... />
- */
-export function getDropdownEX<keyType extends string = string, dataType = never>() {
-    return React.forwardRef<HTMLButtonElement, (IProps<dataType, keyType>)>((props, ref) => {
-        const classes = useStyles();
-        const ctx = useKWIZFluentContext();
-        const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
+function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<keyType, dataType>, ref: React.ForwardedRef<HTMLButtonElement>) {
+    const classes = useStyles();
+    const ctx = useKWIZFluentContext();
+    const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
 
-        //sometimes control will lose value when re-rendered
-        //use case: public forms when editing other fields after the dropdown was set
-        //re-set the text value manually to fix
-        let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
-            let v = firstOrNull(props.items, i => i.key === s);
-            return v ? v.value : ''
-        })).join(', ');
+    //sometimes control will lose value when re-rendered
+    //use case: public forms when editing other fields after the dropdown was set
+    //re-set the text value manually to fix
+    let text = filterEmptyEntries((Array.isArray(props.selected) ? props.selected : [props.selected]).map(s => {
+        let v = firstOrNull(props.items, i => i.key === s);
+        return v ? v.value : ''
+    })).join(', ');
 
-        return (
-            <Dropdown {...{ ...props, onSelect: undefined }} className={mergeClasses(classes.root, props.className)} ref={ref} clearable={!props.required && !props.multiselect}
-                appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
-                selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
-                    let o = firstOrNull(props.items, i => i.key === data.optionValue);
-                    if (props.multiselect) {
-                        let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
-                        props.onSelect(o, current);
-                    }
-                    else props.onSelect(o);
-                }}>
-                {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
-            </Dropdown>
-        );
-    });
+    return (
+        <Dropdown {...{ ...props, onSelect: undefined }} className={mergeClasses(classes.root, props.className)} ref={ref} clearable={!props.required && !props.multiselect}
+            appearance={ctx.inputAppearance} mountNode={ctx.mountNode}
+            selectedOptions={selected} value={text} onOptionSelect={(e, data) => {
+                let o = firstOrNull(props.items, i => i.key === data.optionValue);
+                if (props.multiselect) {
+                    let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
+                    props.onSelect(o, current);
+                }
+                else props.onSelect(o);
+            }}>
+            {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
+        </Dropdown>
+    );
 }
-/** to get typed keys use getDropdownEX */
-export const DropdownEX = getDropdownEX();
+
+export const DropdownEX = React.forwardRef($DropdownEX);
+
+/** @deprecated use normal DropdownEX it is now generic */
+export function getDropdownEX<keyType extends string = string, dataType = never>() {
+    logger.warn('getDropdownEX is deprecated. use DropdownEX it now supports generic types');
+    return React.forwardRef($DropdownEX<keyType, dataType>);
+}

package/src/controls/index.ts

@@ -19,6 +19,7 @@ export * from './kwizoverflow';
 export * from './list';
 export * from './loading';
 export * from './menu';
+export * from './merge-text';
 export * from './please-wait';
 export * from './progress-bar';
 export * from './prompt';
@@ -29,3 +30,4 @@ export * from './svg';
 export * from './toolbar';
 export * from './vertical';
 export * from './vertical-content';
+

package/src/controls/input.tsx

@@ -112,7 +112,7 @@ export const InputNumberEx: React.FunctionComponent<React.PropsWithChildren<INum
         const isValid = props.required ? !isNullOrNaN(asNumber) : isNullOrUndefined(asNumber) || !isNaN(asNumber);
         setIsValid(isValid);
         props.onChange(isValid ? asNumber : null);
-    }, [props.allowDecimals]);
+    }, [props.allowDecimals, props.onChange, props.required]);
 
     const passProps: IProps = { ...props, defaultValue: undefined, value: undefined, onChange: undefined };
 

package/src/controls/list.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, tokens } from '@fluentui/react-components';
 import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
 import React from 'react';
+import { useKWIZFluentContext } from '../helpers/context-internal';
 import { KnownClassNames, mixins } from '../styles/styles';
 import { Horizontal } from './horizontal';
 import { Section } from './section';
@@ -85,8 +86,9 @@ interface IProps {
 }
 
 export const ListEx = (props: IProps) => {
-
+    const ctx = useKWIZFluentContext();
     const cssNames = useStyles();
+    const isDark = ctx.dark === true || props.dark === true;
 
     const listItemElm = (item: iListItem) => <Horizontal key={item.key} css={[cssNames.listItem, item.selected && cssNames.listItemSelected]} onClick={item.onClick}>
         {item.media && <Section css={[cssNames.media]} onClick={(e) => {
@@ -94,7 +96,7 @@ export const ListEx = (props: IProps) => {
                 e.stopPropagation();//media may have its on onclick
         }}>{
                 isString(item.media)
-                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${props.dark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
+                    ? <div className={cssNames.image} style={{ backgroundImage: `url('${encodeURI(item.media)}'), url('${isDark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` }}></div>
                     : item.media
             }</Section>}
         <Vertical main css={[cssNames.listItemBody]}>

package/src/controls/merge-text.tsx

@@ -0,0 +1,126 @@
+import { Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Field, Label, makeStyles, Radio, tokens } from '@fluentui/react-components';
+import { DismissRegular, SaveRegular } from '@fluentui/react-icons';
+import { isNullOrUndefined, waitFor } from '@kwiz/common';
+import { DefaultDarkColors, DefaultLightColors, MisMerge2 } from '@mismerge/react';
+import * as React from 'react';
+
+import '@mismerge/core/dark.css';
+import '@mismerge/core/styles.css';
+import { useStateEX, useWindowSize } from '../helpers';
+import { useKWIZFluentContext } from '../helpers/context-internal';
+import { ButtonEX, ButtonEXPrimarySubtle } from './button';
+import { Horizontal } from './horizontal';
+import { Section } from './section';
+import { Vertical } from './vertical';
+
+const useStyles = makeStyles({
+    root: {
+        // position: 'fixed',
+        // top: 0,
+        // left: 0,
+        // right: 0,
+        // bottom: 0,
+        // backgroundColor: tokens.colorNeutralBackground1,
+        // zIndex: 10,
+        "& .mismerge": {
+            // height: "100%",
+            "--background": tokens.colorNeutralBackground1,
+            //line number background
+            "--primary-100": tokens.colorNeutralBackground2,
+            //selection background
+            "--selection": tokens.colorNeutralBackground1Selected,
+            //scrollbar hover
+            "--primary-300": tokens.colorNeutralBackground1Hover,
+            //border / scroll
+            "--primary-200": tokens.colorNeutralStroke1,
+            //line number color
+            "--primary-400": tokens.colorNeutralForeground2,
+            //button hover color
+            "--primary-500": tokens.colorNeutralForeground1Hover,
+            //main text color
+            "--primary-600": tokens.colorNeutralForeground1,
+            "& TEXTAREA": {
+                lineHeight: "20px"
+            }
+        }
+    },
+    menu: {
+        justifyContent: "space-between"
+    }
+});
+
+interface IProps {
+    title: string;
+    description?: string;
+    lhsTitle: string;
+    lhsValue: string;
+    rhsTitle: string;
+    rhsValue: string;
+    dark?: boolean;
+    save: (merged: string) => void;
+    cancel: () => void;
+}
+export const MergeText: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const classes = useStyles();
+    const ctx = useKWIZFluentContext();
+
+    let size = useWindowSize();
+    let wrapper = React.useRef<HTMLDivElement>();
+    let [lhs, setLhs] = useStateEX(props.lhsValue || "", {
+        skipUpdateIfSame: true, onChange: (v, changed) => {
+            if (changed) setKeep("left"); return v;
+        }
+    });
+    let [rhs, setRhs] = useStateEX(props.rhsValue || "", {
+        skipUpdateIfSame: true, onChange: (v, changed) => {
+            if (changed) setKeep("right"); return v;
+        }
+    });
+    let [keep, setKeep] = useStateEX<"cancel" | "left" | "right">("cancel");
+
+    React.useEffect(() => {
+        if (wrapper.current) {
+            waitFor(() => !isNullOrUndefined(wrapper.current.querySelector(".mismerge"))).then(() => {
+                let mismerge = wrapper.current.querySelector(".mismerge") as HTMLDivElement;
+                if (mismerge)
+                    mismerge.style.height = `${mismerge.offsetParent.clientHeight - mismerge.offsetTop - 10}px`;
+            });
+        }
+    }, [wrapper.current, size.height]);
+
+    return <Drawer type='overlay' open size='full' className={classes.root} mountNode={ctx.mountNode}>
+        <DrawerHeader>
+            <DrawerHeaderTitle action={<ButtonEX icon={<DismissRegular />} title="Close" onClick={props.cancel} />}>
+                {props.title}
+            </DrawerHeaderTitle>
+        </DrawerHeader>
+        <DrawerBody>
+            <Vertical>
+                {props.description && <Label>{props.description}</Label>}
+                <Field label="Which version would you like to keep?"
+                    hint="Merge the changes to either side and save. Close this panel to keep editing the page without saving">
+                    <Horizontal css={[classes.menu]}>
+                        <Horizontal nogap>
+                            <Radio value="left" label={props.lhsTitle} checked={keep === "left"} onClick={() => setKeep("left")} />
+                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "left"} title={`Save ${props.lhsTitle.toLowerCase()}`} onClick={() => props.save(lhs)} />
+                        </Horizontal>
+                        <Horizontal nogap>
+                            <Radio value="right" label={props.rhsTitle} checked={keep === "right"} onClick={() => setKeep("right")} />
+                            <ButtonEXPrimarySubtle showTitleWithIcon dontCenterText icon={<SaveRegular />} disabled={keep !== "right"} title={`Save ${props.rhsTitle.toLowerCase()}`} onClick={() => props.save(rhs)} />
+                        </Horizontal>
+                    </Horizontal>
+                </Field>
+                <Section main ref={wrapper}>
+                    <MisMerge2
+                        lhs={lhs}
+                        rhs={rhs}
+                        lhsEditable rhsEditable
+                        onLhsChange={v => setLhs(v)}
+                        onRhsChange={v => setRhs(v)}
+                        colors={props.dark ? DefaultDarkColors : DefaultLightColors}
+                    />
+                </Section>
+            </Vertical>
+        </DrawerBody>
+    </Drawer>;
+}

package/src/controls/search.tsx

@@ -1,9 +1,8 @@
 import { Input, InputProps, makeStyles, mergeClasses } from '@fluentui/react-components';
 import { DismissRegular, SearchRegular } from "@fluentui/react-icons";
-import { debounce, isFunction, isNullOrEmptyString, isUndefined } from '@kwiz/common';
-import React, { useState } from 'react';
+import { debounce, isNullOrEmptyString } from '@kwiz/common';
+import React, { useRef } from 'react';
 import { GetLogger } from '../_modules/config';
-import { useStateEX } from '../helpers';
 import { mixins } from '../styles/styles';
 const logger = GetLogger("Search");
 
@@ -11,64 +10,52 @@ const useStyles = makeStyles({
     main: mixins.main,
     clickable: mixins.clickable,
     root: {
-        paddingLeft: 0
     },
     searchIcon: {
-        position: "absolute",
-        left: '5px',
-        top: '5px'
     },
 })
 
-interface IProps extends InputProps {
+interface IProps extends Omit<InputProps, "onChange"> {
     main?: boolean;
+    /** number of seconds to debounce the deferred event */
     delay?: number;
     /** if changing the value in the caller - change this prop to reset */
     resetValue?: string;
     onChangeDeferred?: (newValue: string) => void;
-    onChangeSync?: (newValue: string) => void;
+    onChange?: (newValue: string) => void;
 }
 
 /** value is set on first load. to change the value after it was first set - change the compoenet's key. */
 export const Search: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
     const cssNames = useStyles();
 
-    const [resetKey, setResetKey] = useState(1);
-
     let delay = props.delay || 1;
 
+    let refonChangeDeferred = useRef(props.onChangeDeferred);
+    //keep updating the ref
+    React.useEffect(() => { refonChangeDeferred.current = props.onChangeDeferred; }, [props.onChangeDeferred]);
+
     //cannot call debounce every render, since it won't be the same debounced instance...
     var notifyParent = React.useMemo(() => debounce(v => {
         logger.log(`Set: ${v}`);
-        props.onChangeDeferred(v);
+        //Call the latest ref - we don't want to call an old version of this function
+        refonChangeDeferred.current?.(v);
     }, delay * 1000), [delay]);
 
-    let [value, setValue] = useStateEX(props.value || "", {
-        onChange: newValue => {
-            if (isFunction(props.onChangeSync)) props.onChangeSync(newValue as string);
-            if (isFunction(props.onChangeDeferred)) notifyParent(newValue);
-            return newValue;
-        }
-    });
-
-    //once props change, reset this control value to match
-    React.useEffect(() => {
-        if (!isUndefined(props.resetValue))
-            setValue(props.resetValue);
-        //todo: bug: setting value does not sync into the text box
-        setResetKey(resetKey + 1)
-    }, [props.resetValue]);
+    const currentValue = props.value || "";
 
     return (
-        <Input key={resetKey} {...props} value={value} onChange={(e, data) => setValue(data.value)}
+        <Input {...props} value={currentValue} onChange={(e, data) => {
+            props.onChange?.(data.value);
+            notifyParent(data.value);
+        }}
             className={mergeClasses(cssNames.root, props.main && cssNames.main)}
-            contentBefore={!isNullOrEmptyString(value) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
-            contentAfter={isNullOrEmptyString(value)
+            contentBefore={!isNullOrEmptyString(currentValue) ? undefined : <SearchRegular className={cssNames.searchIcon} />}
+            contentAfter={isNullOrEmptyString(currentValue)
                 ? undefined
                 : <DismissRegular className={cssNames.clickable} onClick={() => {
-                    setValue("");
-                    //todo: bug: setting value does not sync into the text box
-                    setResetKey(resetKey + 1)
+                    props.onChange?.("");
+                    notifyParent("");
                 }} />
             } />
     );

package/src/controls/section.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, mergeClasses, Portal, tokens } from '@fluentui/react-components';
-import { isFunction, isNotEmptyArray } from '@kwiz/common';
+import { isFunction, isNotEmptyArray, isNotEmptyString } from '@kwiz/common';
 import React from 'react';
 import { useKWIZFluentContext } from '../helpers/context-internal';
 import { KnownClassNames, mixins, useCommonStyles } from '../styles/styles';
@@ -15,7 +15,10 @@ const useStyles = makeStyles({
     right: {
         ...mixins.float,
         float: "right",
-        marginRight: tokens.spacingHorizontalXXL
+        marginLeft: tokens.spacingHorizontalXXL
+    },
+    selfCentered: {
+        alignSelf: "center"
     }
 });
 
@@ -31,6 +34,7 @@ export interface ISectionProps {
     right?: boolean;
     /** true - will add css position fixed. portal will also wrap it in a portal. */
     fullscreen?: boolean | "portal";
+    centerSelf?: boolean;
 }
 
 export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ISectionProps>>((props, ref) => {
@@ -39,13 +43,21 @@ export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<
     const cssNames = useStyles();
     let css: string[] = [KnownClassNames.section];
     if (props.main) css.push(cssNames.main);
+    if (props.centerSelf) css.push(cssNames.selfCentered);
     if (isFunction(props.onClick))
         css.push(cssNames.clickable);
 
-    if (props.left) css.push(cssNames.left);
-    else if (props.right) css.push(cssNames.right);
+    if (props.left) {
+        css.push(cssNames.left);
+        css.push(KnownClassNames.left);
+    }
+    else if (props.right) {
+        css.push(cssNames.right);
+        css.push(KnownClassNames.right);
+    }
 
-    if (isNotEmptyArray(props.css)) css.push(...props.css);
+    //a css class might have space and  multiuple classes in it
+    if (isNotEmptyArray(props.css)) props.css.filter(c => isNotEmptyString(c)).forEach(c => css.push(...c.split(" ")));
     if (props.fullscreen) css.push(commonStyles.fullscreen);
     const control = <div ref={ref} {...(props.rootProps || {})} title={props.title} style={props.style}
         className={mergeClasses(...css)}

package/src/controls/svg.tsx

@@ -121,6 +121,14 @@ export const GetSVGSplitIcon = (props: { size: number }) => {
 </svg>`;
 }
 
+export function GetSVGCopyIcon(props: { size: number }) {
+    return (
+        `<svg fill="var(--colorNeutralForeground1)" width="${props.size}px" height="${props.size}px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 2a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8ZM7 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4ZM4 6a2 2 0 0 1 1-1.73V14.5A2.5 2.5 0 0 0 7.5 17h6.23A2 2 0 0 1 12 18H7.5A3.5 3.5 0 0 1 4 14.5V6Z"></path>
+        </svg>`
+    )
+}
+
 export function IconToSVG(icon: JSX.Element) {
     const iconDiv = document.createElement('div');
     const root = createRoot(iconDiv);

package/src/controls/toolbar.tsx

@@ -1,6 +1,6 @@
 import { Toolbar, ToolbarDivider, ToolbarGroup } from '@fluentui/react-components';
 import React from 'react';
-import { useCommonStyles } from '../styles/styles';
+import { KnownClassNames } from '../styles/styles';
 import { KWIZOverflow } from './kwizoverflow';
 
 interface IProps {
@@ -10,8 +10,6 @@ interface IProps {
     sideButtons?: JSX.Element;
 }
 export const ToolbarEX: React.FunctionComponent<IProps> = (props) => {
-    const commonCssNames = useCommonStyles();
-
     let elements: { id: string, priority?: number, elm: JSX.Element, overflowElement?: JSX.Element }[] = [];
     props.buttonGroups.forEach((group, groupIndex) => {
         group.forEach((button, buttonIndex) => {
@@ -32,7 +30,7 @@ export const ToolbarEX: React.FunctionComponent<IProps> = (props) => {
     });
 
     return (
-        <KWIZOverflow className={commonCssNames.printHide}
+        <KWIZOverflow className={KnownClassNames.printHide}
             items={elements}
             getKey={e => e.id}
             renderItem={(e, i, overflow) => overflow && e.overflowElement || e.elm}

package/src/controls/vertical.tsx

@@ -10,12 +10,18 @@ const useStyles = makeStyles({
         flexDirection: 'column'
     },
     wrap: mixins.wrap,
-    nogap: mixins.nogap
+    nogap: mixins.nogap,
+    vCentered: {
+        justifyContent: "center"
+    },
+
 })
 
 interface IProps extends ISectionProps {
     wrap?: boolean;
     nogap?: boolean;
+    /** vertical centered */
+    vCentered?: boolean;
 }
 export const Vertical = React.forwardRef<HTMLDivElement, React.PropsWithChildren<IProps>>((props, ref) => {
     const cssNames = useStyles();
@@ -26,6 +32,8 @@ export const Vertical = React.forwardRef<HTMLDivElement, React.PropsWithChildren
         css.push(cssNames.wrap);
     if (props.nogap)
         css.push(cssNames.nogap);
+    if (props.vCentered)
+        css.push(cssNames.vCentered);
 
     if (isNotEmptyArray(props.css)) css.push(...props.css);
 

package/src/helpers/context-const.ts

@@ -22,6 +22,8 @@ export interface iKWIZFluentContext {
      * @default 'rounded'
      */
     buttonShape?: 'rounded' | 'circular' | 'square';
+    /** true if using dark theme */
+    dark?: boolean;
 }
 
 //create context