@kwiz/fluentui 1.0.2 → 1.0.4

package/dist/controls/dropdown.d.ts

@@ -1,18 +1,29 @@
+import { DropdownProps } from '@fluentui/react-components';
 import React from 'react';
-interface IProps<dataType, keyType extends string = string> {
-    selected: keyType[];
+type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
+interface IProps<dataType, keyType extends string = string> extends ForwardProps {
+    required?: boolean;
+    selected: keyType | keyType[];
     items: {
         key: keyType;
         value: string;
         data?: dataType;
+        /** display complex controls in the drop down */
         option?: JSX.Element;
     }[];
-    onSelect: (item: {
+    onSelect: (
+    /** the specific option that was selected/unselected */
+    option: {
         key: keyType;
         value: string;
         data?: dataType;
-    }) => void;
-    placeholder?: string;
+    }, 
+    /** only sent for multi select - all selected options, in case of multi select */
+    options?: {
+        key: keyType;
+        value: string;
+        data?: dataType;
+    }[]) => void;
 }
 export declare const DropdownEX: React.ForwardRefExoticComponent<IProps<unknown, string> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/controls/dropdown.js

@@ -1,13 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dropdown, Option } from '@fluentui/react-components';
-import { filterEmptyEntries, firstOrNull } from '@kwiz/common';
+import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
 import React from 'react';
 function $DropdownEX(props, ref) {
-    let text = filterEmptyEntries(props.selected.map(s => {
-        let v = firstOrNull(props.items, i => i.key === s);
-        return v ? v.value : '';
-    })).join(', ');
-    return (_jsx(Dropdown, { placeholder: props.placeholder, ref: ref, appearance: 'underline', selectedOptions: props.selected, value: text, children: props.items.map(i => _jsx(Option, { value: i.key, onClick: () => { props.onSelect(i); }, text: i.value, children: i.option ? i.option : i.value }, i.key)) }));
+    const selected = 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 = Array.isArray(props.selected)
+        ? filterEmptyEntries(props.selected.map(s => {
+            let v = firstOrNull(props.items, i => i.key === s);
+            return v ? v.value : '';
+        })).join(', ')
+        : props.selected || "";
+    return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, ref: ref, clearable: !props.required && !props.multiselect, appearance: 'underline', 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);
+        }, children: props.items.map(i => _jsx(Option, { value: i.key, text: i.value, children: i.option ? i.option : i.value }, i.key)) })));
 }
 export const DropdownEX = React.forwardRef($DropdownEX);
 //# sourceMappingURL=dropdown.js.map

package/dist/controls/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAChJ,IAAI,IAAI,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACjD,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,OAAO,CACH,KAAC,QAAQ,IAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAC,WAAW,EAAC,eAAe,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,YAClH,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAClD,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACrC,IAAI,EAAE,CAAC,CAAC,KAAK,YACf,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAHI,CAAC,CAAC,GAAG,CAGC,CAAC,GACnC,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC"}
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAChJ,MAAM,QAAQ,GAAc,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvI,oDAAoD;IACpD,6EAA6E;IAC7E,uCAAuC;IACvC,IAAI,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;QACpC,CAAC,CAAC,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;YACnD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAC3B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACd,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC;IAE3B,OAAO,CACH,KAAC,QAAQ,oBAAU,KAAK,IAAE,QAAQ,EAAE,SAAS,EAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EACvG,UAAU,EAAC,WAAW,EAAC,eAAe,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YACvF,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;YAClE,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;gBACpB,IAAI,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;gBACxF,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;YAC/B,CAAC;;gBACI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,YACA,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,YAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAlE,CAAC,CAAC,GAAG,CAAuE,CAAC,IACzG,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/controls/dropdown.tsx

@@ -1,25 +1,48 @@
-import { Dropdown, Option } from '@fluentui/react-components';
-import { filterEmptyEntries, firstOrNull } from '@kwiz/common';
+import { Dropdown, DropdownProps, Option } from '@fluentui/react-components';
+import { filterEmptyEntries, firstOrNull, isNullOrUndefined } from '@kwiz/common';
 import React from 'react';
 
-interface IProps<dataType, keyType extends string = string> {
-    selected: keyType[];
-    items: { key: keyType, value: string, data?: dataType, option?: JSX.Element; }[];
-    onSelect: (item: { key: keyType, value: string, data?: dataType }) => void;
-    placeholder?: string;
+type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
+
+interface IProps<dataType, keyType extends string = string> extends ForwardProps {
+    required?: boolean;
+    selected: keyType | keyType[];
+    items: {
+        key: keyType, value: string, data?: dataType,
+        /** display complex controls in the drop down */
+        option?: JSX.Element;
+    }[];
+    onSelect: (
+        /** the specific option that was selected/unselected */
+        option: { key: keyType, value: string, data?: dataType },
+        /** only sent for multi select - all selected options, in case of multi select */
+        options?: { key: keyType, value: string, data?: dataType }[]) => void;
 }
 
 function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
-    let text = filterEmptyEntries(props.selected.map(s => {
-        let v = firstOrNull(props.items, i => i.key === s);
-        return v ? v.value : ''
-    })).join(', ');
+    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 = Array.isArray(props.selected)
+        ? filterEmptyEntries(props.selected.map(s => {
+            let v = firstOrNull(props.items, i => i.key === s);
+            return v ? v.value : ''
+        })).join(', ')
+        : props.selected || "";
+
     return (
-        <Dropdown placeholder={props.placeholder} ref={ref} appearance='underline' selectedOptions={props.selected} value={text} >
-            {props.items.map(i => <Option key={i.key} value={i.key}
-                onClick={() => { props.onSelect(i); }}
-                text={i.value}
-            >{i.option ? i.option : i.value}</Option>)}
+        <Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
+            appearance='underline' 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>
 
     );