onekijs-ui 0.19.7 → 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

@@ -4089,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 `
@@ -4109,7 +4119,7 @@ const passwordStyle = () => {
   `;
 };
 
-const Password = styled(PasswordComponent) `
+const Password = styled(PasswordComponent$1) `
   ${passwordStyle}
 `;
 
@@ -6549,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 })));
@@ -6625,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';
@@ -6642,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;
     }
@@ -6687,6 +6697,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             overscan,
             autoCompleteSearch,
             maxDisplayTokens,
+            validateValue,
         };
     }
     else {
@@ -6726,6 +6737,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             overscan,
             autoCompleteSearch,
             maxDisplayTokens,
+            validateValue,
         };
     }
     const id = React.useId();
@@ -6884,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,
@@ -6923,6 +6937,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
         service.state.invalidItems,
         service.state.validDefaultValue,
         nullable,
+        validateValue,
     ]);
     const onInputChange = (nextValue) => {
         showActiveRef.current = false;
@@ -12357,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;