onekijs-ui 0.19.6 → 0.19.8

package/dist/components/password/components/PasswordComponent.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { PasswordProps } from '../typings';
-declare const PasswordComponent: React.FC<PasswordProps>;
-export default PasswordComponent;
+declare const _default: import("styled-components").StyledComponent<React.FC<PasswordProps>, import("styled-components").DefaultTheme, {}, never>;
+export default _default;

package/dist/components/select/components/ControlledSelectComponent.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ControllerSelectProps, SelectController, SelectItem, SelectState } from '../typings';
-declare const ControlledSelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>({ attachDropdownToBody, className, placeholder, controller, InputComponent, IconComponent, OptionContentComponent, OptionComponent, OptionLoadingComponent, MultiOptionsComponent, NotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height, multiple, status, size, nullable, minChars, openOnFocus, searchable, dropdownWidthModifier, preload, increment, animationMs, disabled, defaultValue, defaultValueLoading, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, maxDisplayTokens, }: ControllerSelectProps<T, I, S, C>) => React.JSX.Element;
+declare const ControlledSelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>({ attachDropdownToBody, className, placeholder, controller, InputComponent, IconComponent, OptionContentComponent, OptionComponent, OptionLoadingComponent, MultiOptionsComponent, NotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height, multiple, status, size, nullable, minChars, openOnFocus, searchable, dropdownWidthModifier, preload, increment, animationMs, disabled, defaultValue, defaultValueLoading, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, maxDisplayTokens, validateValue, }: ControllerSelectProps<T, I, S, C>) => React.JSX.Element;
 export default ControlledSelectComponent;

package/dist/components/select/typings.d.ts

@@ -118,6 +118,7 @@ export type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T>> = Omi
     ListComponent?: React.FC<SelectListComponentProps<T, I>>;
     autoCompleteSearch?: boolean;
     maxDisplayTokens?: number;
+    validateValue?: boolean;
 };
 export type SelectListComponentProps<T = any, I extends SelectItem<T> = SelectItem<T>> = CollectionListProps<T, I> & {
     optionsRef: React.RefObject<HTMLDivElement>;

package/dist/index.js

@@ -1672,7 +1672,7 @@ const FormCardDisplayerComponent = (displayerProps) => {
     return (React.createElement("div", { className: addClassname('o-displayer-card', displayerProps.className) },
         React.createElement("div", { className: "o-displayer-card-title" }, displayerProps.name),
         Object.values(displayerProps.children ?? {}).map((field, index) => {
-            const Displayer = field.Displayer;
+            const Displayer = field.Displayer ?? onekijsFramework.DefaultDisplayer;
             return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
         })));
 };
@@ -1693,6 +1693,7 @@ const FormCard = ({ name, ...cardProps }) => {
         container: name,
     });
     const { hide, show, disable, enable } = fieldContainer;
+    const initializedRef = React.useRef(false);
     React.useEffect(() => {
         const visible = metadata.visible ?? true;
         const disabled = metadata.disabled ?? false;
@@ -1701,19 +1702,29 @@ const FormCard = ({ name, ...cardProps }) => {
                 disable();
             }
             else {
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
             hide();
         }
         else {
-            show();
+            if (initializedRef.current === true) {
+                // we only use the show method if this is a change and not a initialization
+                show();
+            }
             if (disabled) {
                 disable();
             }
             else {
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
         }
+        initializedRef.current = true;
     }, [metadata.visible, metadata.disabled, hide, show, disable, enable]);
     if (metadata.visible === false) {
         return null;
@@ -4078,9 +4089,19 @@ const PasswordComponent = ({ className, value }) => {
             React.createElement(HideIcon, { onClick: () => setShow(false) })));
     }
     return (React.createElement("span", { className: addClassname('o-password o-password-obfuscated', className) },
-        React.createElement("span", { className: "o-password-text" }, value),
+        React.createElement("span", { className: "o-password-text" }, "************"),
         React.createElement(ShowIcon, { onClick: () => setShow(true) })));
 };
+var PasswordComponent$1 = styled(PasswordComponent) `
+  ${display('flex')}
+  ${alignItems('center')}
+  .o-icon-show, .o-icon-hide {
+    ${color('primary')}
+    ${marginLeft('sm')}
+    ${cursor('pointer')}
+  }
+
+`;
 
 const passwordStyle = () => {
     return styled.css `
@@ -4098,7 +4119,7 @@ const passwordStyle = () => {
   `;
 };
 
-const Password = styled(PasswordComponent) `
+const Password = styled(PasswordComponent$1) `
   ${passwordStyle}
 `;
 
@@ -6538,7 +6559,7 @@ const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, I
             multiple && React.createElement(SelectTokensComponent$1, { tokens: tokens, onRemove: onRemove, maxDisplayTokens: maxDisplayTokens }),
             React.createElement("div", { className: "o-select-input-wrapper" },
                 React.createElement("span", { ref: autoSizeRef, className: "o-select-input-auto-sizer" }),
-                React.createElement("input", { ref: inputRef, placeholder: placeholder, className: "o-select-input", onFocus: onFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, value: searchable ? proxyValue : '', onClick: onClick, autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", spellCheck: "false", disabled: disabled }),
+                React.createElement("input", { ref: inputRef, placeholder: placeholder, className: "o-select-input", onFocus: onFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, value: searchable ? proxyValue : '', onClick: onClick, autoCapitalize: "none", autoComplete: "one-time-code", autoCorrect: "off", spellCheck: "false", disabled: disabled }),
                 !searchable && (React.createElement("span", { className: "o-select-input o-select-input-text", onClick: onClick }, multiple ? '' : proxyValue || '')))),
         !multiple && nullable && value && !disabled && (React.createElement("div", { className: "o-select-remover", onClick: onNullify }, "\u2716")),
         React.createElement(IconComponent, { onClick: onIconClick, open: open, loading: loading, fetching: fetching })));
@@ -6614,7 +6635,7 @@ const SelectOptionComponent = (props) => {
         displayGroup && React.createElement(OptionGroupComponent, { ...props, key: "group" }),
         React.createElement("div", { className: classNames, onClick: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index), key: "content" },
             React.createElement("div", { style: { display: 'flex' }, ref: ref },
-                service.config?.multiple && (React.createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => onItemClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox", key: "checkbox" })),
+                service.config?.multiple && (React.createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => onItemClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox", key: "checkbox", disabled: item?.disabled })),
                 React.createElement(OptionContentComponent, { ...props, onClick: () => onItemClick(item, index), key: "option_content" })))));
 };
 SelectOptionComponent.displayName = 'SelectOptionComponent';
@@ -6631,7 +6652,7 @@ const DefaultSelectListComponent = (props) => {
     });
     return (React.createElement(ListBodyComponent, { ...props, className: "o-select-options", bodyRef: props.optionsRef, items: selectItems, totalSize: totalSize, virtualItems: isVirtual ? virtualItems : undefined, scrollToIndex: scrollToIndex, keyboardNavigable: true, service: props.controller?.asService(), state: props.controller.state }));
 };
-const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '', placeholder, controller, InputComponent = SelectInputComponent$1, IconComponent, OptionContentComponent = SelectOptionContent, OptionComponent = SelectOptionComponent$1, OptionLoadingComponent = LoadingItem$1, MultiOptionsComponent = SelectOptionComponent$1, NotFoundComponent = SelectNotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height = 220, multiple = false, status = onekijsFramework.ValidationStatus.None, size = 'medium', nullable, minChars = 0, openOnFocus = false, searchable = true, dropdownWidthModifier = 'min', preload = 50, increment = 50, animationMs = 200, disabled, defaultValue, defaultValueLoading, required = false, sameWidth = true, overscan, clickable = true, ListComponent = DefaultSelectListComponent, autoCompleteSearch = true, maxDisplayTokens, }) => {
+const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '', placeholder, controller, InputComponent = SelectInputComponent$1, IconComponent, OptionContentComponent = SelectOptionContent, OptionComponent = SelectOptionComponent$1, OptionLoadingComponent = LoadingItem$1, MultiOptionsComponent = SelectOptionComponent$1, NotFoundComponent = SelectNotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height = 220, multiple = false, status = onekijsFramework.ValidationStatus.None, size = 'medium', nullable, minChars = 0, openOnFocus = false, searchable = true, dropdownWidthModifier = 'min', preload = 50, increment = 50, animationMs = 200, disabled, defaultValue, defaultValueLoading, required = false, sameWidth = true, overscan, clickable = true, ListComponent = DefaultSelectListComponent, autoCompleteSearch = true, maxDisplayTokens, validateValue = true, }) => {
     if (nullable === undefined) {
         nullable = !required;
     }
@@ -6676,6 +6697,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             overscan,
             autoCompleteSearch,
             maxDisplayTokens,
+            validateValue,
         };
     }
     else {
@@ -6715,6 +6737,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             overscan,
             autoCompleteSearch,
             maxDisplayTokens,
+            validateValue,
         };
     }
     const id = React.useId();
@@ -6873,36 +6896,38 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     // Manage the result of a check after a change of the value from the outside
     // if the selected item is invalid, do a onChange to remove the value
     React.useEffect(() => {
-        const search = service.getSearch();
-        const invalidItems = service.state.invalidItems || [];
-        if (!search && invalidItems.length > 0) {
-            if (multiple) {
-                const validTokens = [];
-                tokens.forEach((t) => {
-                    const invalidToken = invalidItems.find((i) => t.uid === i.uid);
-                    if (!invalidToken) {
-                        validTokens.push(t);
+        if (validateValue) {
+            const search = service.getSearch();
+            const invalidItems = service.state.invalidItems || [];
+            if (!search && invalidItems.length > 0) {
+                if (multiple) {
+                    const validTokens = [];
+                    tokens.forEach((t) => {
+                        const invalidToken = invalidItems.find((i) => t.uid === i.uid);
+                        if (!invalidToken) {
+                            validTokens.push(t);
+                        }
+                    });
+                    if (validTokens.length !== tokens.length && onChange) {
+                        let validData = validTokens.map((t) => t.data);
+                        if (validData.length === 0 && Array.isArray(service.state.validDefaultValue)) {
+                            validData = service.state.validDefaultValue;
+                        }
+                        onChange(validData);
                     }
-                });
-                if (validTokens.length !== tokens.length && onChange) {
-                    let validData = validTokens.map((t) => t.data);
-                    if (validData.length === 0 && Array.isArray(service.state.validDefaultValue)) {
-                        validData = service.state.validDefaultValue;
+                }
+                else {
+                    const currentItem = service.adapt(value);
+                    if (invalidItems.find((i) => i.id === currentItem.id)) {
+                        // set the defaultValue if it's a valid value otherwise set null
+                        onChange && onChange(service.state.validDefaultValue || null);
                     }
-                    onChange(validData);
                 }
             }
-            else {
-                const currentItem = service.adapt(value);
-                if (invalidItems.find((i) => i.id === currentItem.id)) {
-                    // set the defaultValue if it's a valid value otherwise set null
-                    onChange && onChange(service.state.validDefaultValue || null);
-                }
+            else if (!search && !nullable && !value && service.state.validDefaultValue) {
+                onChange && onChange(service.state.validDefaultValue);
             }
         }
-        else if (!search && !nullable && !value && service.state.validDefaultValue) {
-            onChange && onChange(service.state.validDefaultValue);
-        }
     }, [
         service,
         multiple,
@@ -6912,6 +6937,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
         service.state.invalidItems,
         service.state.validDefaultValue,
         nullable,
+        validateValue,
     ]);
     const onInputChange = (nextValue) => {
         showActiveRef.current = false;
@@ -11238,7 +11264,7 @@ const WizardSummaryComponent = ({ className }) => {
     const form = onekijsFramework.useForm();
     const tree = Object.values(form.getDisplayerTree());
     return (React.createElement(Accordion, { className: className }, tree.map((field, index) => {
-        const Displayer = field.Displayer;
+        const Displayer = field.Displayer || onekijsFramework.DefaultDisplayer;
         return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === tree.length - 1, format: "form_summary" });
     })));
 };
@@ -11303,7 +11329,7 @@ const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
         Displayer: (displayerProps) => {
             const total = Object.values(displayerProps.children ?? {}).length;
             return (React.createElement(AccordionPanel, { title: stepProps.title, initialActive: displayerProps.index === 0, initialExpand: displayerProps.index === 0 }, Object.values(displayerProps.children ?? {}).map((field, index) => {
-                const Displayer = field.Displayer;
+                const Displayer = field.Displayer ?? onekijsFramework.DefaultDisplayer;
                 return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
             })));
         },
@@ -11317,6 +11343,7 @@ const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
         },
     });
     const { touchAllFields, hide, show, disable, enable } = fieldContainer;
+    const initializedRef = React.useRef(false);
     React.useEffect(() => {
         const visible = metadata.visible ?? true;
         const disabled = metadata.disabled ?? false;
@@ -11327,44 +11354,51 @@ const FormStep = ({ name, disabled = false, visible = true, ...stepProps }) => {
             }
             else {
                 service.enable(name);
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
             service.hide(name);
             hide();
         }
         else {
             service.show(name);
-            show();
+            if (initializedRef.current === true) {
+                // we only use the show method if this is a change and not a initialization
+                show();
+            }
             if (disabled) {
                 service.disable(name);
                 disable();
             }
             else {
                 service.enable(name);
-                enable();
+                if (initializedRef.current === true) {
+                    // we only use the enable method if this is a change and not a initialization
+                    enable();
+                }
             }
         }
+        initializedRef.current = true;
     }, [name, metadata.visible, metadata.disabled]);
-    React.useEffect(() => {
-        if (!visible) {
-            if (disabled) {
-                disable();
-            }
-            else {
-                enable();
-            }
-            hide();
-        }
-        else {
-            show();
-            if (disabled) {
-                disable();
-            }
-            else {
-                enable();
-            }
-        }
-    }, [visible, disabled, hide, show, disable, enable]);
+    // useEffect(() => {
+    //   if (!visible) {
+    //     if (disabled) {
+    //       disable();
+    //     } else {
+    //       enable();
+    //     }
+    //     hide();
+    //   } else {
+    //     show();
+    //     if (disabled) {
+    //       disable();
+    //     } else {
+    //       enable();
+    //     }
+    //   }
+    // }, [visible, disabled, hide, show, disable, enable]);
     return (React.createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
         React.createElement(Step, { ...stepProps, uid: name, onTouch: touchAllFields })));
 };
@@ -12338,7 +12372,7 @@ exports.NotificationComponent = NotificationComponent;
 exports.Notifications = Notifications;
 exports.NotificationsComponent = NotificationsComponent;
 exports.Password = Password;
-exports.PasswordComponent = PasswordComponent;
+exports.PasswordComponent = PasswordComponent$1;
 exports.Properties = Properties;
 exports.PropertiesComponent = PropertiesComponent;
 exports.Property = Property;