@talxis/base-controls 1.2408.2 → 1.2408.4

package/dist/components/DateTime/DateTime.js

@@ -39,13 +39,26 @@ const DateTime = (componentProps) => {
             element.children[0].disabled = true;
         }
     };
-    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", ref: ref, children: jsx(DatePicker, { className: styles.datePicker, underlined: theme.effects.underlined, componentRef: datePickerRef, hideErrorMessage: !parameters.ShowErrorMessage?.raw, keepCalendarOpenAfterDaySelect: isDateTime, readOnly: context.mode.isControlDisabled, 
+    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", ref: ref, children: jsx(DatePicker, { className: styles.datePicker, componentRef: datePickerRef, hideErrorMessage: !parameters.ShowErrorMessage?.raw, keepCalendarOpenAfterDaySelect: isDateTime, readOnly: context.mode.isControlDisabled, 
             //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields
             onSelectDate: isDateTime ? undefined : (newDate) => date.set(newDate), 
             //disable so the user cannot input restricted Dates
             allowTextInput: !parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw, 
             // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN
-            minDate: new Date('1753-01-01T00:00:00.000Z'), firstDayOfWeek: componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek, calendarAs: (props) => {
+            minDate: new Date('1753-01-01T00:00:00.000Z'), firstDayOfWeek: componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek, deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
+                key: 'Delete',
+                showOnlyOnHover: true,
+                iconProps: {
+                    iconName: 'Cancel'
+                },
+                onClick: () => date.clear()
+            } : undefined, clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
+                key: 'copy',
+                showOnlyOnHover: true,
+                iconProps: {
+                    iconName: 'Copy'
+                }
+            } : undefined, calendarAs: (props) => {
                 const calendarProps = {
                     ...props,
                     isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,
@@ -54,6 +67,7 @@ const DateTime = (componentProps) => {
                         restrictedDates: getRestrictedDates(),
                         customDayCellRef: onOverrideDayCellProps
                     },
+                    value: date.get(),
                     strings: {
                         goToToday: labels.goToToday(),
                         days: JSON.parse(labels.days()),
@@ -62,7 +76,6 @@ const DateTime = (componentProps) => {
                         shortMonths: JSON.parse(labels.shortMonths())
                     },
                     timePickerProps: {
-                        underlined: theme.effects.underlined,
                         dateTimeFormat: patterns.fullDateTimePattern,
                         autoComplete: "off",
                         autoCapitalize: "off",
@@ -88,7 +101,6 @@ const DateTime = (componentProps) => {
                 }
                 return jsx(Calendar, { ...calendarProps });
             }, errorMessage: parameters.value.errorMessage, textField: {
-                underlined: theme.effects.underlined,
                 value: date.getFormatted() ?? "",
                 onChange: (e, value) => {
                     if (isDateTime) {
@@ -101,32 +113,13 @@ const DateTime = (componentProps) => {
                 placeholder: '---',
                 onNotifyValidationResult: () => null,
                 noValidate: true,
-                borderless: parameters.EnableBorder?.raw === false,
                 styles: {
                     fieldGroup: {
                         height: height,
                         width: width
                     }
-                },
-                //@ts-ignore - TODO: fix types in shared components
-                deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
-                    key: 'Delete',
-                    onClick: date.clear,
-                    showOnlyOnHover: true,
-                    iconProps: {
-                        iconName: 'Cancel'
-                    }
-                } : undefined,
-                clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
-                    key: 'copy',
-                    showOnlyOnHover: true,
-                    iconProps: {
-                        iconName: 'Copy'
-                    }
-                } : undefined
-            }, 
-            //undefined will break the calendar => it wont reflect date change in it's UI
-            value: date.get() ?? new Date() }) }));
+                }
+            }, value: date.get() ?? undefined }) }));
 };
 
 export { DateTime };

package/dist/components/DateTime/DateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.js","sources":["../../../src/components/DateTime/DateTime.tsx"],"sourcesContent":["\nimport { IDateTime } from \"./interfaces\";\nimport { DateRangeType, ICalendarDayGridStyles, IDatePicker, IProcessedStyleSet, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useRef } from \"react\";\nimport { getDateTimeStyles } from \"./styles\";\nimport { useDateTime } from \"./hooks/useDateTime\";\nimport { Calendar, IInternalCalendarProps } from \"./components/Calendar\";\nimport { DatePicker } from \"@talxis/react-components\";\nimport React from 'react';\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const DateTime = (componentProps: IDateTime) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const datePickerRef = useRef<IDatePicker>(null);\n    const context = componentProps.context;\n    const parameters = componentProps.parameters;\n    const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);\n    const styles = getDateTimeStyles(theme);\n    const { height, width } = useControlSizing(componentProps.context.mode);\n    const lastInputedTimeString = useRef<string>();\n\n    useEffect(() => {\n        if (componentProps.parameters.AutoFocus?.raw === true) {\n            datePickerRef.current?.showDatePickerPopup();\n        }\n    }, []);\n\n    const getRestrictedDates = (): Date[] | undefined => {\n        if(!parameters.RestrictedDates?.raw) {\n            return undefined;\n        }\n        return JSON.parse(parameters.RestrictedDates?.raw).map((x: string) => new Date(x))\n    }\n    const onOverrideDayCellProps = (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => {\n        if(!element || !parameters.RestrictedDaysOfWeek?.raw) {\n            return;\n        }\n        const weekDaysToExclude: number[] = JSON.parse(parameters.RestrictedDaysOfWeek.raw);\n        if(weekDaysToExclude.includes(date.getDay())) {\n            element.setAttribute('data-is-focusable', 'false');\n            element.classList?.add(classNames.dayOutsideBounds!);\n            (element.children[0] as HTMLButtonElement).disabled = true;\n        }\n    }\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" ref={ref}>\n            <DatePicker\n                className={styles.datePicker}\n                underlined={theme.effects.underlined}\n                componentRef={datePickerRef}\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                keepCalendarOpenAfterDaySelect={isDateTime}\n                readOnly={context.mode.isControlDisabled}\n                //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields\n                onSelectDate={isDateTime ? undefined : (newDate) => date.set(newDate!)}\n                //disable so the user cannot input restricted Dates\n                allowTextInput={!parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw}\n                // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN\n                minDate={new Date('1753-01-01T00:00:00.000Z')}\n                firstDayOfWeek={componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek}\n                calendarAs={(props) =>\n                {\n                    const calendarProps: IInternalCalendarProps = {\n                        ...props,\n                        isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,\n                        isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,\n                        calendarDayProps: {\n                            restrictedDates: getRestrictedDates(),\n                            customDayCellRef: onOverrideDayCellProps\n                        },\n                        strings: {\n                            goToToday: labels.goToToday(),\n                            days: JSON.parse(labels.days()),\n                            months: JSON.parse(labels.months()),\n                            shortDays: JSON.parse(labels.shortDays()),\n                            shortMonths: JSON.parse(labels.shortMonths())\n                        },\n                        timePickerProps: {\n                            underlined: theme.effects.underlined,\n                            dateTimeFormat: patterns.fullDateTimePattern,\n                            autoComplete: \"off\",\n                            autoCapitalize: \"off\",\n                            timeFormat: patterns.shortTimePattern,\n                            label: labels.time(),\n                            visible: isDateTime,\n                            errorMessage: labels.invalidTimeInput(),\n                            lastInputedTimeString: lastInputedTimeString.current,\n                            useHour12: patterns.shortTimePattern.endsWith('A'),\n                            onChange: (time?: string) => {\n                                date.set(undefined, time);\n                                lastInputedTimeString.current = time;\n                            },\n                            value: date.get(),\n                            formattedDateTime: date.getFormatted() ?? \"\",\n                            strings: {\n                                invalidInputErrorMessage: labels.invalidTimeInput()\n                            }\n                        }\n                    };\n                    if(isDateTime) {\n                        calendarProps.onSelectDate = (newDate) => date.set(newDate)\n                    }\n                   return <Calendar {...calendarProps} />\n                    }\n                }\n                errorMessage={parameters.value.errorMessage}\n                textField={{\n                    underlined: theme.effects.underlined,\n                    value: date.getFormatted() ?? \"\",\n                    onChange: (e, value) => {\n                        if(isDateTime) {\n                            const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);\n                            const time = value?.split(datePart).pop()?.substring(1);\n                            lastInputedTimeString.current = time;\n                        }\n                        date.setDateString(value)\n                    },\n                    placeholder: '---',\n                    onNotifyValidationResult: () => null,\n                    noValidate: true,\n                    borderless: parameters.EnableBorder?.raw === false,\n                    styles: {\n                        fieldGroup: {\n                            height: height,\n                            width: width\n                        }\n                    },\n                    //@ts-ignore - TODO: fix types in shared components\n                    deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n                        key: 'Delete',\n                        onClick: date.clear,\n                        showOnlyOnHover: true,\n                        iconProps: {\n                            iconName: 'Cancel'\n                        }\n                    } : undefined,\n                    clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n                        key: 'copy',\n                        showOnlyOnHover: true,\n                        iconProps: {\n                            iconName: 'Copy'\n                        }\n                    } : undefined\n                }\n                }\n                //undefined will break the calendar => it wont reflect date change in it's UI\n                value={date.get() ?? new Date()}\n            />\n        </ThemeProvider>\n    );\n};\n\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"DateTime.js","sources":["../../../src/components/DateTime/DateTime.tsx"],"sourcesContent":["\nimport { IDateTime } from \"./interfaces\";\nimport { ICalendarDayGridStyles, IDatePicker, IProcessedStyleSet, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useRef } from \"react\";\nimport { getDateTimeStyles } from \"./styles\";\nimport { useDateTime } from \"./hooks/useDateTime\";\nimport { Calendar, IInternalCalendarProps } from \"./components/Calendar\";\nimport { DatePicker } from \"@talxis/react-components\";\nimport React from 'react';\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const DateTime = (componentProps: IDateTime) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const datePickerRef = useRef<IDatePicker>(null);\n    const context = componentProps.context;\n    const parameters = componentProps.parameters;\n    const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);\n    const styles = getDateTimeStyles(theme);\n    const { height, width } = useControlSizing(componentProps.context.mode);\n    const lastInputedTimeString = useRef<string>();\n\n    useEffect(() => {\n        if (componentProps.parameters.AutoFocus?.raw === true) {\n            datePickerRef.current?.showDatePickerPopup();\n        }\n    }, []);\n\n    const getRestrictedDates = (): Date[] | undefined => {\n        if(!parameters.RestrictedDates?.raw) {\n            return undefined;\n        }\n        return JSON.parse(parameters.RestrictedDates?.raw).map((x: string) => new Date(x))\n    }\n    const onOverrideDayCellProps = (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => {\n        if(!element || !parameters.RestrictedDaysOfWeek?.raw) {\n            return;\n        }\n        const weekDaysToExclude: number[] = JSON.parse(parameters.RestrictedDaysOfWeek.raw);\n        if(weekDaysToExclude.includes(date.getDay())) {\n            element.setAttribute('data-is-focusable', 'false');\n            element.classList?.add(classNames.dayOutsideBounds!);\n            (element.children[0] as HTMLButtonElement).disabled = true;\n        }\n    }\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\" ref={ref}>\n            <DatePicker\n                className={styles.datePicker}\n                componentRef={datePickerRef}\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                keepCalendarOpenAfterDaySelect={isDateTime}\n                readOnly={context.mode.isControlDisabled}\n                //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields\n                onSelectDate={isDateTime ? undefined : (newDate) => date.set(newDate!)}\n                //disable so the user cannot input restricted Dates\n                allowTextInput={!parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw}\n                // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN\n                minDate={new Date('1753-01-01T00:00:00.000Z')}\n                firstDayOfWeek={componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek}\n                deleteButtonProps={parameters.EnableDeleteButton?.raw === true ? {\n                    key: 'Delete',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Cancel'\n                    },\n                    onClick: () => date.clear()\n                } : undefined}\n                clickToCopyProps={ parameters.EnableCopyButton?.raw === true ? {\n                    key: 'copy',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Copy'\n                    }\n                } : undefined}\n                calendarAs={(props) =>\n                {\n                    const calendarProps: IInternalCalendarProps = {\n                        ...props,\n                        isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,\n                        isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,\n                        calendarDayProps: {\n                            restrictedDates: getRestrictedDates(),\n                            customDayCellRef: onOverrideDayCellProps\n                        },\n                        value: date.get(),\n                        strings: {\n                            goToToday: labels.goToToday(),\n                            days: JSON.parse(labels.days()),\n                            months: JSON.parse(labels.months()),\n                            shortDays: JSON.parse(labels.shortDays()),\n                            shortMonths: JSON.parse(labels.shortMonths())\n                        },\n                        timePickerProps: {\n                            dateTimeFormat: patterns.fullDateTimePattern,\n                            autoComplete: \"off\",\n                            autoCapitalize: \"off\",\n                            timeFormat: patterns.shortTimePattern,\n                            label: labels.time(),\n                            visible: isDateTime,\n                            errorMessage: labels.invalidTimeInput(),\n                            lastInputedTimeString: lastInputedTimeString.current,\n                            useHour12: patterns.shortTimePattern.endsWith('A'),\n                            onChange: (time?: string) => {\n                                date.set(undefined, time);\n                                lastInputedTimeString.current = time;\n                            },\n                            value: date.get(),\n                            formattedDateTime: date.getFormatted() ?? \"\",\n                            strings: {\n                                invalidInputErrorMessage: labels.invalidTimeInput()\n                            }\n                        }\n                    };\n                    if(isDateTime) {\n                        calendarProps.onSelectDate = (newDate) => date.set(newDate)\n                    }\n                   return <Calendar {...calendarProps} />\n                    }\n                }\n                errorMessage={parameters.value.errorMessage}\n                textField={{\n                    value: date.getFormatted() ?? \"\",\n                    onChange: (e, value) => {\n                        if(isDateTime) {\n                            const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);\n                            const time = value?.split(datePart).pop()?.substring(1);\n                            lastInputedTimeString.current = time;\n                        }\n                        date.setDateString(value)\n                    },\n                    placeholder: '---',\n                    onNotifyValidationResult: () => null,\n                    noValidate: true,\n                    styles: {\n                        fieldGroup: {\n                            height: height,\n                            width: width\n                        }\n                    }\n                }\n                }\n                value={date.get() ?? undefined}\n            />\n        </ThemeProvider>\n    );\n};\n\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/DateTime/components/Calendar.d.ts

@@ -6,7 +6,6 @@ interface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | '
     visible: boolean;
     timeFormat: string;
     dateTimeFormat: string;
-    underlined?: boolean;
     lastInputedTimeString?: string;
     onChange: (time?: string) => void;
 }

package/dist/components/DateTime/components/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../../src/components/DateTime/components/Calendar.tsx"],"sourcesContent":["import { ICalendarProps, IComboBox } from \"@fluentui/react\";\nimport { useTheme } from \"@fluentui/react\";\nimport { Calendar as CalendarBase } from '@fluentui/react/lib/Calendar';\nimport { useEffect, useRef, useState } from \"react\";\nimport { getDateTimeStyles } from \"../styles\";\nimport { ITimePickerProps, TimePicker } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport React from 'react';\n\ninterface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | 'defaultValue'> {\n    formattedDateTime: string;\n    visible: boolean;\n    timeFormat: string;\n    dateTimeFormat: string;\n    underlined?: boolean;\n    lastInputedTimeString?: string;\n    onChange: (time?: string) => void;\n}\n\nexport interface IInternalCalendarProps extends ICalendarProps {\n    timePickerProps: IInternalTimePickerProps;\n}\n\nexport const Calendar = (props: IInternalCalendarProps) => {\n    const timePickerProps = props.timePickerProps;\n    const formattedDateTime = timePickerProps.formattedDateTime;\n    const theme = useTheme();\n    const styles = getDateTimeStyles(theme);\n    const timePickerRef = useRef<IComboBox>(null);\n    const [error, setError] = useState(false);\n\n    const getFormattedTime = () => {\n        const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);\n        if (!dayjsDate.isValid()) {\n            return timePickerProps.lastInputedTimeString;\n        }\n        return dayjsDate.format(timePickerProps.timeFormat) ?? \"\";\n    };\n\n    const onChange = (event: React.FormEvent<IComboBox>, time: Date) => {\n        const dayjsDate = dayjs(time);\n        let timeValue;\n        if (!dayjsDate.isValid()) {\n            //@ts-ignore - need to access internals to properly show error values\n            timeValue = timePickerRef.current.state.currentPendingValue;\n        }\n        else {\n            timeValue = dayjsDate.format(timePickerProps.timeFormat);\n        }\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerProps.onChange(timeValue);\n\n    }\n\n    useEffect(() => {\n        setError(false);\n        if (!timePickerProps.visible) {\n            return;\n        }\n        const formattedTime = getFormattedTime();\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerRef.current.setState({\n            currentPendingValue: getFormattedTime()\n        })\n        if(!formattedTime || !formattedDateTime) {\n            return;\n        }\n        const time = dayjs(formattedTime, timePickerProps.timeFormat, true);\n        if (!time.isValid()) {\n            setError(true);\n        }\n    }, [formattedDateTime]);\n\n\n    return (\n        <div className={styles.calendarCallout}>\n            <CalendarBase {...props} value={props.value} />\n            <hr />\n            {timePickerProps.visible &&\n                <TimePicker\n                    {...timePickerProps}\n                    errorMessage={error ? timePickerProps.errorMessage : undefined}\n                    componentRef={timePickerRef}\n                    onFormatDate={(date) => dayjs(date).format(timePickerProps.timeFormat)}\n                    onChange={onChange}\n                    useComboBoxAsMenuWidth\n                    styles={{\n                        callout: {\n                            maxHeight: '300px !important'\n                        }\n                    }}\n                    increments={15}\n                    allowFreeform\n                />\n            }\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","CalendarBase"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../../src/components/DateTime/components/Calendar.tsx"],"sourcesContent":["import { ICalendarProps, IComboBox } from \"@fluentui/react\";\nimport { useTheme } from \"@fluentui/react\";\nimport { Calendar as CalendarBase } from '@fluentui/react/lib/Calendar';\nimport { useEffect, useRef, useState } from \"react\";\nimport { getDateTimeStyles } from \"../styles\";\nimport { ITimePickerProps, TimePicker } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport React from 'react';\n\ninterface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | 'defaultValue'> {\n    formattedDateTime: string;\n    visible: boolean;\n    timeFormat: string;\n    dateTimeFormat: string;\n    lastInputedTimeString?: string;\n    onChange: (time?: string) => void;\n}\n\nexport interface IInternalCalendarProps extends ICalendarProps {\n    timePickerProps: IInternalTimePickerProps;\n}\n\nexport const Calendar = (props: IInternalCalendarProps) => {\n    const timePickerProps = props.timePickerProps;\n    const formattedDateTime = timePickerProps.formattedDateTime;\n    const theme = useTheme();\n    const styles = getDateTimeStyles(theme);\n    const timePickerRef = useRef<IComboBox>(null);\n    const [error, setError] = useState(false);\n\n    const getFormattedTime = () => {\n        const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);\n        if (!dayjsDate.isValid()) {\n            return timePickerProps.lastInputedTimeString;\n        }\n        return dayjsDate.format(timePickerProps.timeFormat) ?? \"\";\n    };\n\n    const onChange = (event: React.FormEvent<IComboBox>, time: Date) => {\n        const dayjsDate = dayjs(time);\n        let timeValue;\n        if (!dayjsDate.isValid()) {\n            //@ts-ignore - need to access internals to properly show error values\n            timeValue = timePickerRef.current.state.currentPendingValue;\n        }\n        else {\n            timeValue = dayjsDate.format(timePickerProps.timeFormat);\n        }\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerProps.onChange(timeValue);\n\n    }\n\n    useEffect(() => {\n        setError(false);\n        if (!timePickerProps.visible) {\n            return;\n        }\n        const formattedTime = getFormattedTime();\n        //@ts-ignore - need to access internals to properly show error values\n        timePickerRef.current.setState({\n            currentPendingValue: getFormattedTime()\n        })\n        if(!formattedTime || !formattedDateTime) {\n            return;\n        }\n        const time = dayjs(formattedTime, timePickerProps.timeFormat, true);\n        if (!time.isValid()) {\n            setError(true);\n        }\n    }, [formattedDateTime]);\n\n\n    return (\n        <div className={styles.calendarCallout}>\n            <CalendarBase {...props} value={props.value} />\n            <hr />\n            {timePickerProps.visible &&\n                <TimePicker\n                    {...timePickerProps}\n                    errorMessage={error ? timePickerProps.errorMessage : undefined}\n                    componentRef={timePickerRef}\n                    onFormatDate={(date) => dayjs(date).format(timePickerProps.timeFormat)}\n                    onChange={onChange}\n                    useComboBoxAsMenuWidth\n                    styles={{\n                        callout: {\n                            maxHeight: '300px !important'\n                        }\n                    }}\n                    increments={15}\n                    allowFreeform\n                />\n            }\n        </div>\n    );\n};\n"],"names":["_jsxs","_jsx","CalendarBase"],"mappings":"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"}

package/dist/components/DateTime/hooks/useDateTime.js

@@ -98,6 +98,11 @@ const useDateTime = (props, ref) => {
         });
     };
     const selectDate = (date, time) => {
+        //onSelectDate can trigger on initial click with empty date, do not continue in this case
+        //for clearing dates, date.clear should be used
+        if (!date && !time) {
+            return;
+        }
         let dayjsDate = dayjs(date ?? getDate());
         //date selected from calendar, keep the original time
         if (!time) {

package/dist/components/DateTime/hooks/useDateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"../../../interfaces/theme\";\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format;\n    const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n    \n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n    });\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            return value;\n        }\n        return dayjsDate.toDate();\n    };\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if(!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"../../../interfaces/theme\";\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n    boolean,\n    ITheme,\n    ITranslation<Required<IDateTime>['translations']>,\n    {\n        get: () => Date | undefined;\n        getFormatted: () => string | undefined;\n        set: (date?: Date, time?: string) => void;\n        setDateString: (value: string | undefined) => void;\n        clear: () => void;\n    },\n    {\n        shortDatePattern: string\n        shortTimePattern: string;\n        fullDateTimePattern: string;\n    },\n] => {\n\n    const boundValue = props.parameters.value;\n    const context = props.context;\n    const behavior = boundValue.attributes.Behavior;\n    const format = boundValue.attributes.Format;\n    const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n    const lastValidDateRef = useRef<Date | undefined>(undefined);\n    \n    const isDateTime = (() => {\n        switch (format) {\n            case 'DateAndTime':\n            case 'Date and Time':\n            case 'DateAndTime.DateAndTime':\n            case 'datetime': {\n                return true;\n            }\n            default: {\n                return false;\n            }\n        }\n    })();\n\n    //MS returns the pattern without correct separator and they do this during formatting\n    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n    const formatting = (() => {\n        if (isDateTime) {\n            return `${shortDatePattern} ${shortTimePattern}`;\n        }\n        return shortDatePattern;\n    })();\n\n    const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n        if (date instanceof Date) {\n            if (isDateTime) {\n                //should handle the time zone conversion\n                return context.formatting.formatTime(date, behavior);\n            }\n            return context.formatting.formatDateShort(date);\n        }\n        return date;\n    };\n\n    const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n        formatter: formatDate,\n        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n    });\n\n    useEffect(() => {\n        const onBlur = () => {\n            onNotifyOutputChanged({\n                value: dateExtractor(value!) as any\n            });\n        };\n        const input = ref.current?.querySelector('input');\n        input?.addEventListener('blur', onBlur);\n        return () => {\n            input?.removeEventListener('blur', onBlur);\n        };\n    }, [value]);\n\n    useEffect(() => {\n        if (boundValue.raw instanceof Date) {\n            lastValidDateRef.current = boundValue.raw;\n        }\n    }, [boundValue.raw]);\n\n    const getDate = (): Date | undefined => {\n        if (boundValue.raw instanceof Date) {\n            if (behavior === 3) {\n                //the date in javascript gets automatically adjusted to local time zone\n                //this will make it think that the date already came in local time, thus not adjusting the time\n                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n                return date;\n            }\n            return boundValue.raw;\n        }\n        if(boundValue.error) {\n            return lastValidDateRef.current;\n        }\n        return undefined;\n    };\n\n    const dateExtractor = (value: string | Date): Date | string => {\n        if (value instanceof Date) {\n            return value;\n        }\n        const dayjsDate = dayjs(value, formatting, true);\n        if (!dayjsDate.isValid()) {\n            return value;\n        }\n        return dayjsDate.toDate();\n    };\n\n    const clearDate = () => {\n        onNotifyOutputChanged({\n            value: undefined\n        });\n    };\n\n    const selectDate = (date?: Date, time?: string) => {\n        //onSelectDate can trigger on initial click with empty date, do not continue in this case\n        //for clearing dates, date.clear should be used\n        if(!date && !time) {\n            return;\n        }\n        let dayjsDate = dayjs(date ?? getDate());\n        //date selected from calendar, keep the original time\n        if (!time) {\n            time = dayjs(getDate()).format(shortTimePattern);\n        }\n        const dayjsTime = dayjs(time, shortTimePattern, true);\n        let invalidDateString;\n        if(!dayjsTime.isValid()) {\n            invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n        }\n        dayjsDate = dayjsDate.hour(dayjsTime.hour());\n        dayjsDate = dayjsDate.minute(dayjsTime.minute());\n        onNotifyOutputChanged({\n            value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n        });\n    };\n    return [\n        isDateTime,\n        theme,\n        labels,\n        {\n            get: getDate,\n            clear: clearDate,\n            getFormatted: () => value,\n            set: selectDate,\n            setDateString: setValue\n        },\n        {\n            shortDatePattern: shortDatePattern,\n            shortTimePattern: shortTimePattern,\n            fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n        }\n    ]\n};"],"names":[],"mappings":"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"}

package/dist/components/Decimal/Decimal.js

@@ -149,13 +149,11 @@ const Decimal = (props) => {
         }
     }, [boundValue.formatted]);
     const componentProps = onOverrideComponentProps({
-        underlined: theme.effects.underlined,
         hideErrorMessage: !parameters.ShowErrorMessage?.raw,
         readOnly: context.mode.isControlDisabled,
         inputMode: useMemo(() => getInputMode(), [props.parameters.value.type]),
         suffixItems: getSuffixItems(),
         autoFocus: parameters.AutoFocus?.raw,
-        borderless: parameters.EnableBorder?.raw === false,
         errorMessage: boundValue.errorMessage,
         styles: {
             fieldGroup: {

package/dist/components/Decimal/Decimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.js","sources":["../../../src/components/Decimal/Decimal.tsx"],"sourcesContent":["import { TextField } from \"@talxis/react-components\";\nimport { useInputBasedControl } from \"../../hooks/useInputBasedControl\";\nimport { IDecimal, IDecimalOutputs, IDecimalParameters } from \"./interfaces\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport numeral from \"numeral\";\nimport { Numeral } from \"../../utils/Numeral\";\nimport { CURRENCY_NEGATIVE_PATTERN, CURRENCY_POSITIVE_PATTERN, NUMBER_NEGATIVE_PATTERN } from \"../../constants\";\nimport { ICommandBarItemProps, ThemeProvider } from \"@fluentui/react\";\nimport { ArrowButtons, IArrowButtons } from \"./components/ArrowButtons\";\n\nexport const Decimal = (props: IDecimal) => {\n    const arrowButtonsRef = useRef<IArrowButtons>(null);\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const numberFormatting = context.userSettings.numberFormattingInfo;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const formatter = (value: string | number | null): string | undefined | null => {\n        if (typeof value === 'number') {\n            if (props.parameters.value.type === 'Decimal') {\n                return context.formatting.formatDecimal(value, boundValue.attributes?.Precision);\n            }\n            if (props.parameters.value.type === 'Currency') {\n                //the layer above has information about the symbol, so we can use the formatted string\n                if (props.parameters.value.formatted) {\n                    return props.parameters.value.formatted;\n                }\n                return context.formatting.formatCurrency(value, boundValue.attributes?.Precision);\n            }\n            return context.formatting.formatInteger(value);\n        }\n        return value;\n    };\n\n    const createNumberPattern = (pattern: string, numberPattern: string) => {\n        return new RegExp(`^${escapeRegExp(pattern).replace('n', numberPattern)}$`.replace(/\\s/g, ''));\n    };\n\n    const createCurrencyPattern = (pattern: string, numberPattern: string) => {\n        const escapedPattern = escapeRegExp(pattern);\n        const escapedCurrencySymbolPattern = `(${escapeRegExp(numberFormatting.currencySymbol)})?`;\n        const finalPattern = escapedPattern.replace('\\\\$', escapedCurrencySymbolPattern).replace('n', numberPattern);\n        return new RegExp(`^${finalPattern.replace(/\\s/g, '')}$`);\n    };\n\n    const escapeRegExp = (string: string) => {\n        return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n    };\n\n    const extractNumericPart = (value: any): number | undefined => {\n        // Currency control just sends the string up and lets the framework decide whether the value is correct\n        // It only tries to parse the number based on the current user format\n        // This means that the value will also pass if the user inputs his own currency even though\n        // the currency is different on the field\n        if (typeof value === 'number') {\n            return value\n        }\n        const str = value?.replace(/\\s/g, '');\n        Numeral.decimal(numberFormatting);\n        let positivePattern: any;\n        let negativePattern: any;\n\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Decimal': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.numberDecimalSeparator}\\\\d+)?`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Currency': {\n                Numeral.currency(numberFormatting);\n                const numberPattern = `\\\\d{1,}(${numberFormatting.currencyGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.currencyDecimalSeparator}\\\\d+)?`;\n                positivePattern = createCurrencyPattern(CURRENCY_POSITIVE_PATTERN[numberFormatting.currencyPositivePattern], numberPattern);\n                negativePattern = createCurrencyPattern(CURRENCY_NEGATIVE_PATTERN[numberFormatting.currencyNegativePattern], numberPattern);\n                break;\n            }\n        }\n        if (positivePattern.test(str)) {\n            return numeral(str).value() ?? undefined;\n        }\n        if (negativePattern.test(str)) {\n            const value = numeral(str).value()!;\n            if (value > 0) {\n                return value * -1;\n            }\n            return value;\n        }\n        return value;\n    };\n\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, IDecimalParameters, IDecimalOutputs, any>('Decimal', props, {\n        formatter: formatter,\n        valueExtractor: extractNumericPart\n    });\n\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (context.mode.isControlDisabled || !parameters.EnableSpinButton?.raw) {\n            return undefined;\n        }\n        return [\n            {\n                key: 'arrows',\n                onRender: () => <ArrowButtons\n                    ref={arrowButtonsRef}\n                    onDecrement={() => makeStep('decrement')}\n                    onIncrement={() => makeStep('increment')} />\n            }\n        ]\n    }\n\n    const makeStep = (type: 'increment' | 'decrement') => {\n        const value = boundValue.raw ?? 0;\n        if (typeof value !== 'number') {\n            return;\n        }\n        const precision = Math.pow(10, boundValue.attributes?.Precision ?? 0);\n        const adjustment = type === 'increment' ? 1 : -1;\n        const newValue = parseFloat(((value) + adjustment / precision).toFixed(boundValue.attributes?.Precision ?? 0));\n        onNotifyOutputChanged({ value: newValue });\n\n    }\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (context.mode.isControlDisabled) {\n            return;\n        }\n        switch (e.key) {\n            case 'ArrowDown': {\n                e.preventDefault();\n                makeStep('decrement');\n                arrowButtonsRef.current?.setActiveBtn('down');\n                break;\n            }\n            case 'ArrowUp': {\n                e.preventDefault();\n                makeStep('increment');\n                arrowButtonsRef.current?.setActiveBtn('up');\n                break;\n            }\n        }\n    }\n\n    const getInputMode = () => {\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                return 'numeric';\n            }\n            case 'Decimal':\n            case 'Currency': {\n                return 'decimal';\n            }\n        }\n    }\n    useEffect(() => {\n        if (boundValue.type === 'Currency') {\n            setValue(boundValue.formatted);\n        }\n    }, [boundValue.formatted]);\n\n    const componentProps = onOverrideComponentProps({\n        underlined: theme.effects.underlined,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        readOnly: context.mode.isControlDisabled,\n        inputMode: useMemo(() => getInputMode(), [props.parameters.value.type]),\n        suffixItems: getSuffixItems(),\n        autoFocus: parameters.AutoFocus?.raw,\n        borderless: parameters.EnableBorder?.raw === false,\n        errorMessage: boundValue.errorMessage,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true\n            ? {\n                key: \"delete\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Cancel\",\n                },\n                onClick: () => setValue(undefined),\n            }\n            : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true\n            ? {\n                key: \"copy\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Copy\",\n                },\n            }\n            : undefined,\n        value: value ?? \"\",\n        onBlur: (event) => {\n            onNotifyOutputChanged({\n                value: extractNumericPart(event.target.value)\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        },\n        onKeyDown: onKeyDown,\n    });\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <TextField {...componentProps} />\n        </ThemeProvider>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Decimal.js","sources":["../../../src/components/Decimal/Decimal.tsx"],"sourcesContent":["import { TextField } from \"@talxis/react-components\";\nimport { useInputBasedControl } from \"../../hooks/useInputBasedControl\";\nimport { IDecimal, IDecimalOutputs, IDecimalParameters } from \"./interfaces\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport numeral from \"numeral\";\nimport { Numeral } from \"../../utils/Numeral\";\nimport { CURRENCY_NEGATIVE_PATTERN, CURRENCY_POSITIVE_PATTERN, NUMBER_NEGATIVE_PATTERN } from \"../../constants\";\nimport { ICommandBarItemProps, ThemeProvider } from \"@fluentui/react\";\nimport { ArrowButtons, IArrowButtons } from \"./components/ArrowButtons\";\n\nexport const Decimal = (props: IDecimal) => {\n    const arrowButtonsRef = useRef<IArrowButtons>(null);\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const numberFormatting = context.userSettings.numberFormattingInfo;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const formatter = (value: string | number | null): string | undefined | null => {\n        if (typeof value === 'number') {\n            if (props.parameters.value.type === 'Decimal') {\n                return context.formatting.formatDecimal(value, boundValue.attributes?.Precision);\n            }\n            if (props.parameters.value.type === 'Currency') {\n                //the layer above has information about the symbol, so we can use the formatted string\n                if (props.parameters.value.formatted) {\n                    return props.parameters.value.formatted;\n                }\n                return context.formatting.formatCurrency(value, boundValue.attributes?.Precision);\n            }\n            return context.formatting.formatInteger(value);\n        }\n        return value;\n    };\n\n    const createNumberPattern = (pattern: string, numberPattern: string) => {\n        return new RegExp(`^${escapeRegExp(pattern).replace('n', numberPattern)}$`.replace(/\\s/g, ''));\n    };\n\n    const createCurrencyPattern = (pattern: string, numberPattern: string) => {\n        const escapedPattern = escapeRegExp(pattern);\n        const escapedCurrencySymbolPattern = `(${escapeRegExp(numberFormatting.currencySymbol)})?`;\n        const finalPattern = escapedPattern.replace('\\\\$', escapedCurrencySymbolPattern).replace('n', numberPattern);\n        return new RegExp(`^${finalPattern.replace(/\\s/g, '')}$`);\n    };\n\n    const escapeRegExp = (string: string) => {\n        return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n    };\n\n    const extractNumericPart = (value: any): number | undefined => {\n        // Currency control just sends the string up and lets the framework decide whether the value is correct\n        // It only tries to parse the number based on the current user format\n        // This means that the value will also pass if the user inputs his own currency even though\n        // the currency is different on the field\n        if (typeof value === 'number') {\n            return value\n        }\n        const str = value?.replace(/\\s/g, '');\n        Numeral.decimal(numberFormatting);\n        let positivePattern: any;\n        let negativePattern: any;\n\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Decimal': {\n                const numberPattern = `\\\\d{1,}(${numberFormatting.numberGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.numberDecimalSeparator}\\\\d+)?`;\n                positivePattern = createNumberPattern('n', numberPattern);\n                negativePattern = createNumberPattern(NUMBER_NEGATIVE_PATTERN[numberFormatting.numberNegativePattern], numberPattern);\n                break;\n            }\n            case 'Currency': {\n                Numeral.currency(numberFormatting);\n                const numberPattern = `\\\\d{1,}(${numberFormatting.currencyGroupSeparator}\\\\d{1,})*(\\\\${numberFormatting.currencyDecimalSeparator}\\\\d+)?`;\n                positivePattern = createCurrencyPattern(CURRENCY_POSITIVE_PATTERN[numberFormatting.currencyPositivePattern], numberPattern);\n                negativePattern = createCurrencyPattern(CURRENCY_NEGATIVE_PATTERN[numberFormatting.currencyNegativePattern], numberPattern);\n                break;\n            }\n        }\n        if (positivePattern.test(str)) {\n            return numeral(str).value() ?? undefined;\n        }\n        if (negativePattern.test(str)) {\n            const value = numeral(str).value()!;\n            if (value > 0) {\n                return value * -1;\n            }\n            return value;\n        }\n        return value;\n    };\n\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, IDecimalParameters, IDecimalOutputs, any>('Decimal', props, {\n        formatter: formatter,\n        valueExtractor: extractNumericPart\n    });\n\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (context.mode.isControlDisabled || !parameters.EnableSpinButton?.raw) {\n            return undefined;\n        }\n        return [\n            {\n                key: 'arrows',\n                onRender: () => <ArrowButtons\n                    ref={arrowButtonsRef}\n                    onDecrement={() => makeStep('decrement')}\n                    onIncrement={() => makeStep('increment')} />\n            }\n        ]\n    }\n\n    const makeStep = (type: 'increment' | 'decrement') => {\n        const value = boundValue.raw ?? 0;\n        if (typeof value !== 'number') {\n            return;\n        }\n        const precision = Math.pow(10, boundValue.attributes?.Precision ?? 0);\n        const adjustment = type === 'increment' ? 1 : -1;\n        const newValue = parseFloat(((value) + adjustment / precision).toFixed(boundValue.attributes?.Precision ?? 0));\n        onNotifyOutputChanged({ value: newValue });\n\n    }\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (context.mode.isControlDisabled) {\n            return;\n        }\n        switch (e.key) {\n            case 'ArrowDown': {\n                e.preventDefault();\n                makeStep('decrement');\n                arrowButtonsRef.current?.setActiveBtn('down');\n                break;\n            }\n            case 'ArrowUp': {\n                e.preventDefault();\n                makeStep('increment');\n                arrowButtonsRef.current?.setActiveBtn('up');\n                break;\n            }\n        }\n    }\n\n    const getInputMode = () => {\n        switch (props.parameters.value.type) {\n            case 'Whole.None': {\n                return 'numeric';\n            }\n            case 'Decimal':\n            case 'Currency': {\n                return 'decimal';\n            }\n        }\n    }\n    useEffect(() => {\n        if (boundValue.type === 'Currency') {\n            setValue(boundValue.formatted);\n        }\n    }, [boundValue.formatted]);\n\n    const componentProps = onOverrideComponentProps({\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        readOnly: context.mode.isControlDisabled,\n        inputMode: useMemo(() => getInputMode(), [props.parameters.value.type]),\n        suffixItems: getSuffixItems(),\n        autoFocus: parameters.AutoFocus?.raw,\n        errorMessage: boundValue.errorMessage,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true\n            ? {\n                key: \"delete\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Cancel\",\n                },\n                onClick: () => setValue(undefined),\n            }\n            : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true\n            ? {\n                key: \"copy\",\n                showOnlyOnHover: true,\n                iconProps: {\n                    iconName: \"Copy\",\n                },\n            }\n            : undefined,\n        value: value ?? \"\",\n        onBlur: (event) => {\n            onNotifyOutputChanged({\n                value: extractNumericPart(event.target.value)\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        },\n        onKeyDown: onKeyDown,\n    });\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <TextField {...componentProps} />\n        </ThemeProvider>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/Lookup/Lookup.js

@@ -111,7 +111,6 @@ const Lookup = (props) => {
     };
     const componentProps = onOverrideComponentProps({
         ref: componentRef,
-        underlined: theme.effects.underlined,
         readOnly: context.mode.isControlDisabled,
         resolveDelay: 200,
         stackItems: itemLimit === 1,
@@ -157,7 +156,8 @@ const Lookup = (props) => {
             key: 'search',
             iconProps: {
                 iconName: 'Search'
-            }
+            },
+            showOnlyOnHover: true
         },
         selectedItems: value.map((lookup) => {
             return {
@@ -192,6 +192,7 @@ const Lookup = (props) => {
             };
         }),
         itemLimit: itemLimit,
+        onEmptyResolveSuggestions: (selectedItems) => onResolveSuggestions("", selectedItems),
         onResolveSuggestions: onResolveSuggestions
     });
     return (jsx(ThemeProvider, { applyTo: "none", theme: theme, className: `talxis__lookupControl ${styles.root}`, ref: ref, children: jsx(TagPicker, { ...componentProps }) }));

package/dist/components/Lookup/Lookup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lookup.js","sources":["../../../src/components/Lookup/Lookup.tsx"],"sourcesContent":["\nimport { ILookup } from \"./interfaces\";\nimport { useLookup } from \"./hooks/useLookup\";\nimport React, { useEffect, useRef, useState } from 'react';\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { IItemProps, TagPicker } from \"@talxis/react-components\";\nimport { TargetSelector } from \"./components/TargetSelector\";\nimport { useMouseOver } from \"../../hooks/useMouseOver\";\nimport { getLookupStyles } from \"./styles\";\nimport { IBasePicker } from \"@fluentui/react/lib/components/pickers/BasePicker.types\";\nimport { ITag } from \"@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types\";\nimport { RecordCreator } from \"./components/RecordCreator\";\nimport { useFocusIn } from \"../../hooks/useFocusIn\";\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\n\nexport const Lookup = (props: ILookup) => {\n    const context = props.context;\n    const ref = useRef<HTMLDivElement>(null);\n    const componentRef = useRef<IBasePicker<ITag>>(null);\n    const itemLimit = props.parameters.MultipleEnabled?.raw === true ? Infinity : 1\n    const { height } = useControlSizing(props.context.mode);\n    const [value, entities, labels, records, selectEntity, getSearchResults, theme] = useLookup(props);\n    const styles = getLookupStyles(theme, itemLimit === 1, height);\n    const mouseOver = useMouseOver(ref);\n    const isFocused = useFocusIn(ref, 100);\n    const firstRenderRef = useRef(true);\n    const shouldFocusRef = useRef(false);\n    const [placeholder, setPlaceholder] = useState('---');\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n\n    useEffect(() => {\n        if (firstRenderRef.current) {\n            firstRenderRef.current = false;\n            return;\n        }\n        //@ts-ignore\n        if (componentRef.current.state.suggestionsVisible) {\n            //if the suggestions callout is open and the selected target changes, refresh the results\n            forceSearch();\n        }\n    }, [entities])\n\n    useEffect(() => {\n        const onKeyPress = (ev: KeyboardEvent) => {\n            if (context.mode.isControlDisabled) {\n                return;\n            }\n            if (ev.key === 'Backspace') {\n                const picker = ref.current?.querySelector('[class*=\"TALXIS__tag-picker__root\"]');\n                if ((document.activeElement === picker) && value.length === 1) {\n                    records.select(undefined);\n                    setTimeout(() => {\n                        componentRef.current?.focusInput()\n                    }, 200)\n                }\n            }\n        }\n        document.addEventListener('keydown', onKeyPress)\n        return () => {\n            document.removeEventListener('keydown', onKeyPress);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        if (props.parameters.AutoFocus?.raw === true) {\n            focus();\n        }\n    }, []);\n\n    const focus = () => {\n        if(componentRef.current?.items?.length === itemLimit) {\n            const el = ref.current?.querySelector(':scope>div') as HTMLDivElement;\n            el?.click();\n            el?.focus();\n            return;\n        }\n        componentRef.current?.focusInput();\n    }\n\n    const forceSearch = async () => {\n        //@ts-ignore - We need to use internal methods to show and fill the suggestions on entity change\n        componentRef.current.suggestionStore.updateSuggestions([]);\n        //@ts-ignore - ^^same as above\n        componentRef.current.setState({\n            suggestionsVisible: true,\n            suggestionsLoading: true,\n        });\n        //@ts-ignore - ^^same as above\n        const results = await onResolveSuggestions(componentRef.current.input.current.value)\n        //@ts-ignore - ^^same as above\n        componentRef.current.updateSuggestionsList(results);\n        //@ts-ignore - ^^same above\n        componentRef.current.setState({\n            isMostRecentlyUsedVisible: false,\n            suggestionsVisible: true,\n            moreSuggestionsAvailable: false,\n        });\n    }\n\n    const isComponentActive = () => {\n        return mouseOver || isFocused;\n    }\n\n    const onResolveSuggestions = async (filter: string, selectedItems?: IItemProps[] | undefined): Promise<IItemProps[]> => {\n        //TODO: onResolveSuggestions gets called when the record gets selected resulting in unnecessary call\n        const results = await getSearchResults(filter);\n        const suggestions: IItemProps[] = [];\n        for (const result of results) {\n            if (selectedItems?.find(x => x.key === result.id)) {\n                continue;\n            }\n            const metadata = await entities.find(x => x.entityName === result.entityType)?.metadata;\n            suggestions.push({\n                key: result.id,\n                text: result.name || labels.noName(),\n                secondaryText: metadata?.DisplayName,\n                'data-entity': result.entityType\n            })\n        }\n        return suggestions;\n    }\n    const componentProps = onOverrideComponentProps({\n        ref: componentRef,\n        underlined: theme.effects.underlined,\n        readOnly: context.mode.isControlDisabled,\n        resolveDelay: 200,\n        stackItems: itemLimit === 1,\n        errorMessage: props.parameters.value.errorMessage,\n        hideErrorMessage: !props.parameters.ShowErrorMessage?.raw,\n        pickerCalloutProps: {\n            layerProps: {\n                eventBubblingEnabled: true\n            },\n            className: styles.suggestions\n        },\n\n        inputProps: {\n            placeholder: placeholder,\n            onMouseEnter: () => {\n                if (context.mode.isControlDisabled) {\n                    return;\n                }\n                setPlaceholder(`${labels.placeholder()} ${props.parameters.value.attributes.DisplayName}`);\n            },\n            onMouseLeave: () => {\n                setPlaceholder(\"---\");\n            }\n        },\n        pickerSuggestionsProps: {\n            loadingText: labels.searching(),\n            noResultsFoundText: labels.noRecordsFound(),\n            // @ts-ignore\n            suggestionsHeaderText: (\n                <>\n                    {props.parameters.IsInlineNewEnabled?.raw !== false && (\n                        <RecordCreator labels={labels} entities={entities} onCreateRecord={records.create} />\n                    )}\n                    {props.parameters.value.attributes.Targets.length > 1 && (\n                        <TargetSelector\n                            labels={labels}\n                            entities={entities}\n                            onEntitySelected={(entityName) => {\n                                selectEntity(entityName);\n                            }}\n                        />\n                    )}\n                </>\n            )\n        },\n        transparent: itemLimit === 1,\n        onChange: (items) => {\n            records.select(\n                items?.map((item) => {\n                    return {\n                        entityType: item['data-entity'],\n                        id: item.key,\n                        name: item.text\n                    };\n                })\n            );\n        },\n        searchBtnProps: {\n            key: 'search',\n            iconProps: {\n                iconName: 'Search'\n            }\n        },\n        selectedItems: value.map((lookup) => {\n            return {\n                key: lookup.id,\n                text: lookup.name || labels.noName(),\n                'data-entity': lookup.entityType,\n                'data-navigation-enabled': props.parameters.EnableNavigation?.raw !== false,\n                onClick: () => {\n                    if (props.parameters.EnableNavigation?.raw === false) {\n                        return;\n                    }\n                    context.navigation.openForm({\n                        entityName: lookup.entityType,\n                        entityId: lookup.id\n                    });\n                },\n                deleteButtonProps:\n                    isComponentActive() || itemLimit > 1\n                        ? {\n                            key: 'delete',\n                            iconProps: {\n                                iconName: 'Cancel',\n                            },\n                            onClick: () => {\n                                shouldFocusRef.current = false;\n                                records.deselect(lookup);\n                                setTimeout(() => {\n                                    focus();\n                                }, 200);\n                            }\n                        }\n                        : undefined\n            };\n        }),\n        itemLimit: itemLimit,\n        onResolveSuggestions: onResolveSuggestions\n    });\n\n    return (\n        <ThemeProvider applyTo=\"none\" theme={theme} className={`talxis__lookupControl ${styles.root}`} ref={ref}>\n            <TagPicker {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;AAea,MAAA,MAAM,GAAG,CAAC,KAAc,KAAI;AACrC,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;AAC9B,IAAA,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACzC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG,KAAK,IAAI,GAAG,QAAQ,GAAG,CAAC,CAAA;AAC/E,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;AACnG,IAAA,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,EAAE,SAAS,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;AAC/D,IAAA,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACvC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,IAAA,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AACtD,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAGtF,SAAS,CAAC,MAAK;QACX,IAAI,cAAc,CAAC,OAAO,EAAE;AACxB,YAAA,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;YAC/B,OAAO;AACV,SAAA;;AAED,QAAA,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,kBAAkB,EAAE;;AAE/C,YAAA,WAAW,EAAE,CAAC;AACjB,SAAA;AACL,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,UAAU,GAAG,CAAC,EAAiB,KAAI;AACrC,YAAA,IAAI,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAChC,OAAO;AACV,aAAA;AACD,YAAA,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE;gBACxB,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,qCAAqC,CAAC,CAAC;AACjF,gBAAA,IAAI,CAAC,QAAQ,CAAC,aAAa,KAAK,MAAM,KAAK,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3D,oBAAA,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;oBAC1B,UAAU,CAAC,MAAK;AACZ,wBAAA,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,CAAA;qBACrC,EAAE,GAAG,CAAC,CAAA;AACV,iBAAA;AACJ,aAAA;AACL,SAAC,CAAA;AACD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAA;AAChD,QAAA,OAAO,MAAK;AACR,YAAA,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AACxD,SAAC,CAAA;AACL,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;QACX,IAAI,KAAK,CAAC,UAAU,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,EAAE;AAC1C,YAAA,KAAK,EAAE,CAAC;AACX,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,MAAK;QACf,IAAG,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,EAAE;YAClD,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,EAAE,aAAa,CAAC,YAAY,CAAmB,CAAC;YACtE,EAAE,EAAE,KAAK,EAAE,CAAC;YACZ,EAAE,EAAE,KAAK,EAAE,CAAC;YACZ,OAAO;AACV,SAAA;AACD,QAAA,YAAY,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;AACvC,KAAC,CAAA;AAED,IAAA,MAAM,WAAW,GAAG,YAAW;;QAE3B,YAAY,CAAC,OAAO,CAAC,eAAe,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;;AAE3D,QAAA,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC;AAC1B,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,kBAAkB,EAAE,IAAI;AAC3B,SAAA,CAAC,CAAC;;AAEH,QAAA,MAAM,OAAO,GAAG,MAAM,oBAAoB,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;;AAEpF,QAAA,YAAY,CAAC,OAAO,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;;AAEpD,QAAA,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC;AAC1B,YAAA,yBAAyB,EAAE,KAAK;AAChC,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,wBAAwB,EAAE,KAAK;AAClC,SAAA,CAAC,CAAC;AACP,KAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,MAAK;QAC3B,OAAO,SAAS,IAAI,SAAS,CAAC;AAClC,KAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,OAAO,MAAc,EAAE,aAAwC,KAA2B;;AAEnH,QAAA,MAAM,OAAO,GAAG,MAAM,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC/C,MAAM,WAAW,GAAiB,EAAE,CAAC;AACrC,QAAA,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;AAC1B,YAAA,IAAI,aAAa,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,EAAE,CAAC,EAAE;gBAC/C,SAAS;AACZ,aAAA;YACD,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,KAAK,MAAM,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;YACxF,WAAW,CAAC,IAAI,CAAC;gBACb,GAAG,EAAE,MAAM,CAAC,EAAE;gBACd,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE;gBACpC,aAAa,EAAE,QAAQ,EAAE,WAAW;gBACpC,aAAa,EAAE,MAAM,CAAC,UAAU;AACnC,aAAA,CAAC,CAAA;AACL,SAAA;AACD,QAAA,OAAO,WAAW,CAAC;AACvB,KAAC,CAAA;IACD,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAC5C,QAAA,GAAG,EAAE,YAAY;AACjB,QAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;AACpC,QAAA,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB;AACxC,QAAA,YAAY,EAAE,GAAG;QACjB,UAAU,EAAE,SAAS,KAAK,CAAC;AAC3B,QAAA,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,YAAY;QACjD,gBAAgB,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG;AACzD,QAAA,kBAAkB,EAAE;AAChB,YAAA,UAAU,EAAE;AACR,gBAAA,oBAAoB,EAAE,IAAI;AAC7B,aAAA;YACD,SAAS,EAAE,MAAM,CAAC,WAAW;AAChC,SAAA;AAED,QAAA,UAAU,EAAE;AACR,YAAA,WAAW,EAAE,WAAW;YACxB,YAAY,EAAE,MAAK;AACf,gBAAA,IAAI,OAAO,CAAC,IAAI,CAAC,iBAAiB,EAAE;oBAChC,OAAO;AACV,iBAAA;AACD,gBAAA,cAAc,CAAC,CAAG,EAAA,MAAM,CAAC,WAAW,EAAE,IAAI,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAA,CAAE,CAAC,CAAC;aAC9F;YACD,YAAY,EAAE,MAAK;gBACf,cAAc,CAAC,KAAK,CAAC,CAAC;aACzB;AACJ,SAAA;AACD,QAAA,sBAAsB,EAAE;AACpB,YAAA,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE;AAC/B,YAAA,kBAAkB,EAAE,MAAM,CAAC,cAAc,EAAE;;AAE3C,YAAA,qBAAqB,GACjBA,IACK,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAA,KAAK,CAAC,UAAU,CAAC,kBAAkB,EAAE,GAAG,KAAK,KAAK,KAC/CC,GAAA,CAAC,aAAa,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,CAAC,MAAM,EAAI,CAAA,CACxF,EACA,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACjDA,GAAA,CAAC,cAAc,EAAA,EACX,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,CAAC,UAAU,KAAI;4BAC7B,YAAY,CAAC,UAAU,CAAC,CAAC;yBAC5B,EAAA,CACH,CACL,CAAA,EAAA,CACF,CACN;AACJ,SAAA;QACD,WAAW,EAAE,SAAS,KAAK,CAAC;AAC5B,QAAA,QAAQ,EAAE,CAAC,KAAK,KAAI;YAChB,OAAO,CAAC,MAAM,CACV,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,KAAI;gBAChB,OAAO;AACH,oBAAA,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC;oBAC/B,EAAE,EAAE,IAAI,CAAC,GAAG;oBACZ,IAAI,EAAE,IAAI,CAAC,IAAI;iBAClB,CAAC;aACL,CAAC,CACL,CAAC;SACL;AACD,QAAA,cAAc,EAAE;AACZ,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,SAAS,EAAE;AACP,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;AACJ,SAAA;QACD,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI;YAChC,OAAO;gBACH,GAAG,EAAE,MAAM,CAAC,EAAE;gBACd,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE;gBACpC,aAAa,EAAE,MAAM,CAAC,UAAU;gBAChC,yBAAyB,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,KAAK;gBAC3E,OAAO,EAAE,MAAK;oBACV,IAAI,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,KAAK,EAAE;wBAClD,OAAO;AACV,qBAAA;AACD,oBAAA,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC;wBACxB,UAAU,EAAE,MAAM,CAAC,UAAU;wBAC7B,QAAQ,EAAE,MAAM,CAAC,EAAE;AACtB,qBAAA,CAAC,CAAC;iBACN;AACD,gBAAA,iBAAiB,EACb,iBAAiB,EAAE,IAAI,SAAS,GAAG,CAAC;AAChC,sBAAE;AACE,wBAAA,GAAG,EAAE,QAAQ;AACb,wBAAA,SAAS,EAAE;AACP,4BAAA,QAAQ,EAAE,QAAQ;AACrB,yBAAA;wBACD,OAAO,EAAE,MAAK;AACV,4BAAA,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;AAC/B,4BAAA,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;4BACzB,UAAU,CAAC,MAAK;AACZ,gCAAA,KAAK,EAAE,CAAC;6BACX,EAAE,GAAG,CAAC,CAAC;yBACX;AACJ,qBAAA;AACD,sBAAE,SAAS;aACtB,CAAC;AACN,SAAC,CAAC;AACF,QAAA,SAAS,EAAE,SAAS;AACpB,QAAA,oBAAoB,EAAE,oBAAoB;AAC7C,KAAA,CAAC,CAAC;AAEH,IAAA,QACIA,GAAA,CAAC,aAAa,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA,sBAAA,EAAyB,MAAM,CAAC,IAAI,CAAA,CAAE,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EACnGA,GAAC,CAAA,SAAS,EAAK,EAAA,GAAA,cAAc,EAAI,CAAA,EAAA,CACrB,EAClB;AACN;;;;"}
+{"version":3,"file":"Lookup.js","sources":["../../../src/components/Lookup/Lookup.tsx"],"sourcesContent":["\nimport { ILookup } from \"./interfaces\";\nimport { useLookup } from \"./hooks/useLookup\";\nimport React, { useEffect, useRef, useState } from 'react';\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { IItemProps, TagPicker } from \"@talxis/react-components\";\nimport { TargetSelector } from \"./components/TargetSelector\";\nimport { useMouseOver } from \"../../hooks/useMouseOver\";\nimport { getLookupStyles } from \"./styles\";\nimport { IBasePicker } from \"@fluentui/react/lib/components/pickers/BasePicker.types\";\nimport { ITag } from \"@fluentui/react/lib/components/pickers/TagPicker/TagPicker.types\";\nimport { RecordCreator } from \"./components/RecordCreator\";\nimport { useFocusIn } from \"../../hooks/useFocusIn\";\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\n\nexport const Lookup = (props: ILookup) => {\n    const context = props.context;\n    const ref = useRef<HTMLDivElement>(null);\n    const componentRef = useRef<IBasePicker<ITag>>(null);\n    const itemLimit = props.parameters.MultipleEnabled?.raw === true ? Infinity : 1\n    const { height } = useControlSizing(props.context.mode);\n    const [value, entities, labels, records, selectEntity, getSearchResults, theme] = useLookup(props);\n    const styles = getLookupStyles(theme, itemLimit === 1, height);\n    const mouseOver = useMouseOver(ref);\n    const isFocused = useFocusIn(ref, 100);\n    const firstRenderRef = useRef(true);\n    const shouldFocusRef = useRef(false);\n    const [placeholder, setPlaceholder] = useState('---');\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n\n    useEffect(() => {\n        if (firstRenderRef.current) {\n            firstRenderRef.current = false;\n            return;\n        }\n        //@ts-ignore\n        if (componentRef.current.state.suggestionsVisible) {\n            //if the suggestions callout is open and the selected target changes, refresh the results\n            forceSearch();\n        }\n    }, [entities])\n\n    useEffect(() => {\n        const onKeyPress = (ev: KeyboardEvent) => {\n            if (context.mode.isControlDisabled) {\n                return;\n            }\n            if (ev.key === 'Backspace') {\n                const picker = ref.current?.querySelector('[class*=\"TALXIS__tag-picker__root\"]');\n                if ((document.activeElement === picker) && value.length === 1) {\n                    records.select(undefined);\n                    setTimeout(() => {\n                        componentRef.current?.focusInput()\n                    }, 200)\n                }\n            }\n        }\n        document.addEventListener('keydown', onKeyPress)\n        return () => {\n            document.removeEventListener('keydown', onKeyPress);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        if (props.parameters.AutoFocus?.raw === true) {\n            focus();\n        }\n    }, []);\n\n    const focus = () => {\n        if(componentRef.current?.items?.length === itemLimit) {\n            const el = ref.current?.querySelector(':scope>div') as HTMLDivElement;\n            el?.click();\n            el?.focus();\n            return;\n        }\n        componentRef.current?.focusInput();\n    }\n\n    const forceSearch = async () => {\n        //@ts-ignore - We need to use internal methods to show and fill the suggestions on entity change\n        componentRef.current.suggestionStore.updateSuggestions([]);\n        //@ts-ignore - ^^same as above\n        componentRef.current.setState({\n            suggestionsVisible: true,\n            suggestionsLoading: true,\n        });\n        //@ts-ignore - ^^same as above\n        const results = await onResolveSuggestions(componentRef.current.input.current.value)\n        //@ts-ignore - ^^same as above\n        componentRef.current.updateSuggestionsList(results);\n        //@ts-ignore - ^^same above\n        componentRef.current.setState({\n            isMostRecentlyUsedVisible: false,\n            suggestionsVisible: true,\n            moreSuggestionsAvailable: false,\n        });\n    }\n\n    const isComponentActive = () => {\n        return mouseOver || isFocused;\n    }\n\n    const onResolveSuggestions = async (filter: string, selectedItems?: IItemProps[] | undefined): Promise<IItemProps[]> => {\n        //TODO: onResolveSuggestions gets called when the record gets selected resulting in unnecessary call\n        const results = await getSearchResults(filter);\n        const suggestions: IItemProps[] = [];\n        for (const result of results) {\n            if (selectedItems?.find(x => x.key === result.id)) {\n                continue;\n            }\n            const metadata = await entities.find(x => x.entityName === result.entityType)?.metadata;\n            suggestions.push({\n                key: result.id,\n                text: result.name || labels.noName(),\n                secondaryText: metadata?.DisplayName,\n                'data-entity': result.entityType\n            })\n        }\n        return suggestions;\n    }\n    const componentProps = onOverrideComponentProps({\n        ref: componentRef,\n        readOnly: context.mode.isControlDisabled,\n        resolveDelay: 200,\n        stackItems: itemLimit === 1,\n        errorMessage: props.parameters.value.errorMessage,\n        hideErrorMessage: !props.parameters.ShowErrorMessage?.raw,\n        pickerCalloutProps: {\n            layerProps: {\n                eventBubblingEnabled: true\n            },\n            className: styles.suggestions\n        },\n\n        inputProps: {\n            placeholder: placeholder,\n            onMouseEnter: () => {\n                if (context.mode.isControlDisabled) {\n                    return;\n                }\n                setPlaceholder(`${labels.placeholder()} ${props.parameters.value.attributes.DisplayName}`);\n            },\n            onMouseLeave: () => {\n                setPlaceholder(\"---\");\n            }\n        },\n        pickerSuggestionsProps: {\n            loadingText: labels.searching(),\n            noResultsFoundText: labels.noRecordsFound(),\n            // @ts-ignore\n            suggestionsHeaderText: (\n                <>\n                    {props.parameters.IsInlineNewEnabled?.raw !== false && (\n                        <RecordCreator labels={labels} entities={entities} onCreateRecord={records.create} />\n                    )}\n                    {props.parameters.value.attributes.Targets.length > 1 && (\n                        <TargetSelector\n                            labels={labels}\n                            entities={entities}\n                            onEntitySelected={(entityName) => {\n                                selectEntity(entityName);\n                            }}\n                        />\n                    )}\n                </>\n            )\n        },\n        transparent: itemLimit === 1,\n        onChange: (items) => {\n            records.select(\n                items?.map((item) => {\n                    return {\n                        entityType: item['data-entity'],\n                        id: item.key,\n                        name: item.text\n                    };\n                })\n            );\n        },\n        searchBtnProps: {\n            key: 'search',\n            iconProps: {\n                iconName: 'Search'\n            },\n            showOnlyOnHover: true\n        },\n        selectedItems: value.map((lookup) => {\n            return {\n                key: lookup.id,\n                text: lookup.name || labels.noName(),\n                'data-entity': lookup.entityType,\n                'data-navigation-enabled': props.parameters.EnableNavigation?.raw !== false,\n                onClick: () => {\n                    if (props.parameters.EnableNavigation?.raw === false) {\n                        return;\n                    }\n                    context.navigation.openForm({\n                        entityName: lookup.entityType,\n                        entityId: lookup.id\n                    });\n                },\n                deleteButtonProps:\n                    isComponentActive() || itemLimit > 1\n                        ? {\n                            key: 'delete',\n                            iconProps: {\n                                iconName: 'Cancel',\n                            },\n                            onClick: () => {\n                                shouldFocusRef.current = false;\n                                records.deselect(lookup);\n                                setTimeout(() => {\n                                    focus();\n                                }, 200);\n                            }\n                        }\n                        : undefined\n            };\n        }),\n        itemLimit: itemLimit,\n        onEmptyResolveSuggestions: (selectedItems) => onResolveSuggestions(\"\", selectedItems as any) as any,\n        onResolveSuggestions: onResolveSuggestions\n    });\n\n    return (\n        <ThemeProvider applyTo=\"none\" theme={theme} className={`talxis__lookupControl ${styles.root}`} ref={ref}>\n            <TagPicker {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js

@@ -42,7 +42,7 @@ const MultiSelectOptionSet = (props) => {
     }, []);
     return (jsx(ThemeProvider, { theme: theme, applyTo: "none", children: jsx(ComboBox, { componentRef: componentRef, options: comboBoxOptions, allowFreeInput: true, multiSelect: true, autoComplete: "on", theme: theme, autofill: parameters.AutoFocus?.raw === true ? {
                 autoFocus: true
-            } : undefined, readOnly: context.mode.isControlDisabled, errorMessage: boundValue.errorMessage, selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : [-1], useComboBoxAsMenuWidth: true, hideErrorMessage: !parameters.ShowErrorMessage?.raw, styles: {
+            } : undefined, readOnly: context.mode.isControlDisabled, errorMessage: boundValue.errorMessage, selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : null, useComboBoxAsMenuWidth: true, hideErrorMessage: !parameters.ShowErrorMessage?.raw, styles: {
                 root: {
                     height: sizing.height,
                     width: sizing.width,
@@ -60,7 +60,7 @@ const MultiSelectOptionSet = (props) => {
                 }
             } : undefined, deleteButtonProps: props.parameters.EnableDeleteButton?.raw === true ? {
                 key: 'delete',
-                showOnlyOnHover: false,
+                showOnlyOnHover: true,
                 iconProps: {
                     iconName: 'Cancel'
                 },

package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectOptionSet.js","sources":["../../../src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx"],"sourcesContent":["\nimport { IMultiSelectOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\n\nexport const MultiSelectOptionSet = (props: IMultiSelectOptionSet) => {\n    const { sizing, onNotifyOutputChanged, theme } = useControl('MultiSelectOptionSet', props);\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const componentRef = useRef<IComboBox>(null);\n    const { Options } = parameters.value.attributes;\n    const context = props.context;\n    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n        key: option.Value.toString(),\n        text: option.Label,\n    }));\n\n    const handleChange = (option?: IComboBoxOption | null): void => {\n        if (!option) {\n            onNotifyOutputChanged({\n                value: undefined\n            });\n            return;\n        }\n        const optionKey = option.key.toString();\n        const updatedSelectedKeys = new Set(boundValue.raw || []);\n        if (option.selected) {\n            updatedSelectedKeys.add(+optionKey);\n        } else {\n            updatedSelectedKeys.delete(+optionKey);\n        }\n        const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);\n\n        onNotifyOutputChanged({\n            value: updatedSelectedKeysArray.map(key => +key)\n        });\n    };\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <ComboBox\n                componentRef={componentRef}\n                options={comboBoxOptions}\n                allowFreeInput={true}\n                multiSelect\n                autoComplete=\"on\"\n                theme={theme}\n                autofill={parameters.AutoFocus?.raw === true ? {\n                    autoFocus: true\n                } : undefined}\n                readOnly={context.mode.isControlDisabled}\n                errorMessage={boundValue.errorMessage}\n                selectedKey={boundValue.raw ? boundValue.raw.map(key => key.toString()) : [-1]}\n                useComboBoxAsMenuWidth\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                styles={{\n                    root: {\n                        height: sizing.height,\n                        width: sizing.width,\n                        display: 'flex',\n                        alignItems: 'center',\n                    },\n                    callout: {\n                        maxHeight: '300px !important'\n                    }\n                }}\n                clickToCopyProps={parameters.EnableCopyButton?.raw === true ? {\n                    key: 'copy',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Copy'\n                    }\n                } : undefined}\n                deleteButtonProps={props.parameters.EnableDeleteButton?.raw === true ? {\n                    key: 'delete',\n                    showOnlyOnHover: false,\n                    iconProps: {\n                        iconName: 'Cancel'\n                    },\n                    onClick: (e, value) => {\n                        handleChange(null);\n                    }\n                } : undefined}\n                onChange={(e, option) => handleChange(option)} />\n        </ThemeProvider>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"MultiSelectOptionSet.js","sources":["../../../src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx"],"sourcesContent":["\nimport { IMultiSelectOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\n\nexport const MultiSelectOptionSet = (props: IMultiSelectOptionSet) => {\n    const { sizing, onNotifyOutputChanged, theme } = useControl('MultiSelectOptionSet', props);\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const componentRef = useRef<IComboBox>(null);\n    const { Options } = parameters.value.attributes;\n    const context = props.context;\n    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n        key: option.Value.toString(),\n        text: option.Label,\n    }));\n\n    const handleChange = (option?: IComboBoxOption | null): void => {\n        if (!option) {\n            onNotifyOutputChanged({\n                value: undefined\n            });\n            return;\n        }\n        const optionKey = option.key.toString();\n        const updatedSelectedKeys = new Set(boundValue.raw || []);\n        if (option.selected) {\n            updatedSelectedKeys.add(+optionKey);\n        } else {\n            updatedSelectedKeys.delete(+optionKey);\n        }\n        const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);\n\n        onNotifyOutputChanged({\n            value: updatedSelectedKeysArray.map(key => +key)\n        });\n    };\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <ComboBox\n                componentRef={componentRef}\n                options={comboBoxOptions}\n                allowFreeInput={true}\n                multiSelect\n                autoComplete=\"on\"\n                theme={theme}\n                autofill={parameters.AutoFocus?.raw === true ? {\n                    autoFocus: true\n                } : undefined}\n                readOnly={context.mode.isControlDisabled}\n                errorMessage={boundValue.errorMessage}\n                selectedKey={boundValue.raw ? boundValue.raw.map(key => key.toString()) : null}\n                useComboBoxAsMenuWidth\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                styles={{\n                    root: {\n                        height: sizing.height,\n                        width: sizing.width,\n                        display: 'flex',\n                        alignItems: 'center',\n                    },\n                    callout: {\n                        maxHeight: '300px !important'\n                    }\n                }}\n                clickToCopyProps={parameters.EnableCopyButton?.raw === true ? {\n                    key: 'copy',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Copy'\n                    }\n                } : undefined}\n                deleteButtonProps={props.parameters.EnableDeleteButton?.raw === true ? {\n                    key: 'delete',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Cancel'\n                    },\n                    onClick: (e, value) => {\n                        handleChange(null);\n                    }\n                } : undefined}\n                onChange={(e, option) => handleChange(option)} />\n        </ThemeProvider>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/dist/components/OptionSet/OptionSet.js

@@ -29,9 +29,7 @@ const OptionSet = (props) => {
             componentRef.current?.focus(true);
         }
     }, []);
-    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", children: jsx(ComboBox, { componentRef: componentRef, options: comboBoxOptions, readOnly: context.mode.isControlDisabled, 
-            //the defaultValue comes in the raw prop directly, no need to look at it
-            selectedKey: boundValue.raw?.toString() ?? -1, errorMessage: boundValue.errorMessage, useComboBoxAsMenuWidth: true, hideErrorMessage: !parameters.ShowErrorMessage?.raw, styles: {
+    return (jsx(ThemeProvider, { theme: theme, applyTo: "none", children: jsx(ComboBox, { componentRef: componentRef, options: comboBoxOptions, readOnly: context.mode.isControlDisabled, selectedKey: boundValue.raw?.toString() ?? null, errorMessage: boundValue.errorMessage, useComboBoxAsMenuWidth: true, hideErrorMessage: !parameters.ShowErrorMessage?.raw, styles: {
                 root: {
                     height: sizing.height,
                     width: sizing.width,
@@ -51,7 +49,7 @@ const OptionSet = (props) => {
                 key: 'delete',
                 showOnlyOnHover: true,
                 iconProps: {
-                    iconName: 'Cencel'
+                    iconName: 'Cancel'
                 },
                 onClick: (e, value) => { handleChange(null); }
             } : undefined, onChange: (e, option) => handleChange(option) }) }));

package/dist/components/OptionSet/OptionSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\n\nexport const OptionSet = (props: IOptionSet) => {\n    const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);\n    const componentRef = useRef<IComboBox>(null);\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const { Options } = parameters.value.attributes;\n    const context = props.context;\n    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n        key: option.Value.toString(),\n        text: option.Label,\n    }));\n\n    const handleChange = (option?: IComboBoxOption | null): void => {\n        let value = undefined;\n        if (option) {\n            value = parseInt(option.key as string);\n        }\n        onNotifyOutputChanged({\n            value: value\n        });\n    };\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <ComboBox\n                componentRef={componentRef}\n                options={comboBoxOptions}\n                readOnly={context.mode.isControlDisabled}\n                //the defaultValue comes in the raw prop directly, no need to look at it\n                selectedKey={boundValue.raw?.toString() ?? -1}\n                errorMessage={boundValue.errorMessage}\n                useComboBoxAsMenuWidth\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                styles={{\n                    root: {\n                        height: sizing.height,\n                        width: sizing.width,\n                        display: 'flex',\n                        alignItems: 'center',\n                    },\n                    callout: {\n                        maxHeight: '300px !important'\n                    }\n                }}\n                clickToCopyProps={parameters.EnableCopyButton?.raw === true ? {\n                    key: 'copy',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Copy'\n                    }\n                } : undefined}\n                deleteButtonProps={parameters.EnableDeleteButton?.raw === true ? {\n                    key: 'delete',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Cencel'\n                    },\n                    onClick: (e, value) => { handleChange(null); }\n                } : undefined}\n                onChange={(e, option) => handleChange(option)}\n            /></ThemeProvider>);\n};"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\n\nexport const OptionSet = (props: IOptionSet) => {\n    const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);\n    const componentRef = useRef<IComboBox>(null);\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const { Options } = parameters.value.attributes;\n    const context = props.context;\n    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n        key: option.Value.toString(),\n        text: option.Label,\n    }));\n\n    const handleChange = (option?: IComboBoxOption | null): void => {\n        let value = undefined;\n        if (option) {\n            value = parseInt(option.key as string);\n        }\n        onNotifyOutputChanged({\n            value: value\n        });\n    };\n\n    useEffect(() => {\n        if (parameters.AutoFocus?.raw) {\n            componentRef.current?.focus(true);\n        }\n    }, []);\n\n    return (\n        <ThemeProvider theme={theme} applyTo=\"none\">\n            <ComboBox\n                componentRef={componentRef}\n                options={comboBoxOptions}\n                readOnly={context.mode.isControlDisabled}\n                selectedKey={boundValue.raw?.toString() ?? null}\n                errorMessage={boundValue.errorMessage}\n                useComboBoxAsMenuWidth\n                hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n                styles={{\n                    root: {\n                        height: sizing.height,\n                        width: sizing.width,\n                        display: 'flex',\n                        alignItems: 'center',\n                    },\n                    callout: {\n                        maxHeight: '300px !important'\n                    }\n                }}\n                clickToCopyProps={parameters.EnableCopyButton?.raw === true ? {\n                    key: 'copy',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Copy'\n                    }\n                } : undefined}\n                deleteButtonProps={parameters.EnableDeleteButton?.raw === true ? {\n                    key: 'delete',\n                    showOnlyOnHover: true,\n                    iconProps: {\n                        iconName: 'Cancel'\n                    },\n                    onClick: (e, value) => { handleChange(null); }\n                } : undefined}\n                onChange={(e, option) => handleChange(option)}\n            /></ThemeProvider>);\n};"],"names":["_jsx"],"mappings":"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"}

package/dist/components/TextField/TextField.js

@@ -65,7 +65,6 @@ const TextField = (props) => {
         return undefined;
     };
     const componentProps = onOverrideComponentProps({
-        underlined: theme.effects.underlined,
         readOnly: context.mode.isControlDisabled,
         resizable: false,
         type: useMemo(() => getInputType(), [boundValue.type]),
@@ -77,7 +76,6 @@ const TextField = (props) => {
                 width: sizing.width
             }
         },
-        borderless: parameters.EnableBorder?.raw === false,
         errorMessage: boundValue.errorMessage,
         hideErrorMessage: !parameters.ShowErrorMessage?.raw,
         suffixItems: useMemo(() => getSuffixItems(), [boundValue.raw, boundValue.error, parameters.EnableTypeSuffix?.raw]),

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { ITextFieldProps, TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useMemo, useRef } from 'react';\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport React from 'react';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n    const componentProps = onOverrideComponentProps({\n        underlined: theme.effects.underlined,\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: useMemo(() => getInputType(), [boundValue.type]),\n        multiline: parameters.value.type === 'Multiple',\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        borderless: parameters.EnableBorder?.raw === false,\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: useMemo(() => getSuffixItems(), [boundValue.raw, boundValue.error, parameters.EnableTypeSuffix?.raw]),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider style={parameters.value.type === 'Multiple' ? { height: '100%' } : undefined} applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { ITextFieldProps, TextField as TextFieldBase } from \"@talxis/react-components\";\nimport { useMemo, useRef } from 'react';\nimport { useInputBasedControl } from '../../hooks/useInputBasedControl';\nimport { ITextField, ITextFieldOutputs, ITextFieldParameters } from './interfaces';\nimport React from 'react';\nimport { ICommandBarItemProps, ThemeProvider } from '@fluentui/react';\n\nexport const TextField = (props: ITextField) => {\n    const context = props.context;\n    const parameters = props.parameters;\n    const boundValue = parameters.value;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const { value, sizing, theme, setValue, onNotifyOutputChanged } = useInputBasedControl<string | undefined, ITextFieldParameters, ITextFieldOutputs, any>('TextField', props);\n\n    const getInputType = () => {\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return 'email';\n            }\n            case 'SingleLine.URL': {\n                return 'url';\n            }\n            case 'SingleLine.Phone': {\n                return 'tel';\n            }\n        }\n        return \"text\";\n    }\n    const getSuffixItems = (): ICommandBarItemProps[] | undefined => {\n        if (parameters.EnableTypeSuffix?.raw === false) {\n            return undefined;\n        }\n        const disabled = boundValue.error || !boundValue.raw\n        switch (boundValue.type) {\n            case 'SingleLine.Email': {\n                return [{\n                    key: 'sendMail',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Mail'\n                    },\n                    href: `mailto:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.Phone': {\n                return [{\n                    key: 'call',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Phone'\n                    },\n                    href: `tel:${boundValue.raw}`\n                }]\n            }\n            case 'SingleLine.URL': {\n                return [{\n                    key: 'goToPage',\n                    disabled: disabled,\n                    iconProps: {\n                        iconName: 'Globe'\n                    },\n                    target: '_blank',\n                    href: boundValue.raw!\n                }]\n            }\n        }\n        return undefined;\n    }\n    const componentProps = onOverrideComponentProps({\n        readOnly: context.mode.isControlDisabled,\n        resizable: false,\n        type: useMemo(() => getInputType(), [boundValue.type]),\n        multiline: parameters.value.type === 'Multiple',\n        autoFocus: parameters.AutoFocus?.raw,\n        styles: {\n            fieldGroup: {\n                height: sizing.height,\n                width: sizing.width\n            }\n        },\n        errorMessage: boundValue.errorMessage,\n        hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n        suffixItems: useMemo(() => getSuffixItems(), [boundValue.raw, boundValue.error, parameters.EnableTypeSuffix?.raw]),\n        deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n            key: 'delete',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Cancel'\n            },\n            onClick: () => setValue(undefined)\n        } : undefined,\n        clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n            key: 'copy',\n            showOnlyOnHover: true,\n            iconProps: {\n                iconName: 'Copy'\n            }\n        } : undefined,\n        value: value ?? \"\",\n        onBlur: () => {\n            onNotifyOutputChanged({\n                value: value ?? undefined\n            });\n        },\n        onChange: (e, value) => {\n            setValue(value);\n        }\n    })\n    return (\n        <ThemeProvider style={parameters.value.type === 'Multiple' ? { height: '100%' } : undefined} applyTo=\"none\" theme={theme}>\n            <TextFieldBase {...componentProps} />\n        </ThemeProvider>\n    );\n};"],"names":["_jsx","TextFieldBase"],"mappings":"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"}

package/dist/index.d.ts

@@ -518,8 +518,6 @@ interface IInputParameters extends IBaseParameters {
     ShowErrorMessage?: Omit<ITwoOptionsProperty, 'attributes'>;
 }
 interface IBaseParameters extends IParameters {
-    /** default `true`    */
-    EnableBorder?: Omit<ITwoOptionsProperty, 'attributes'>;
     /**
     * Decides whether the input should get focus on first render.
     */

package/dist/interfaces/parameters.d.ts

@@ -17,8 +17,6 @@ export interface IInputParameters extends IBaseParameters {
     ShowErrorMessage?: Omit<ITwoOptionsProperty, 'attributes'>;
 }
 export interface IBaseParameters extends IParameters {
-    /** default `true`    */
-    EnableBorder?: Omit<ITwoOptionsProperty, 'attributes'>;
     /**
     * Decides whether the input should get focus on first render.
     */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talxis/base-controls",
-  "version": "1.2408.2",
+  "version": "1.2408.4",
   "description": "Set of React components that natively work with Power Apps Component Framework API's",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -77,8 +77,8 @@
     "@ag-grid-community/styles": "^31.3.2",
     "@fluentui/react": "^8.119.1",
     "@fluentui/react-migration-v8-v9": "^9.6.20",
-    "@talxis/client-libraries": "^1.2407.2",
-    "@talxis/react-components": "^1.2408.2",
+    "@talxis/client-libraries": "1.2407.2",
+    "@talxis/react-components": "1.2408.4",
     "color": "^4.2.3",
     "dayjs": "^1.11.10",
     "external-svg-loader": "^1.7.1",