@rolster/react-components 19.7.2 → 19.7.5

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 Rolster Technology
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2022 Rolster Technology
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/index.cjs

@@ -539,11 +539,12 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
 }
 const RlsAreaText = require$$0.memo(RlsAreaTextComponent);
 
-function RlsAvatarComponent({ children, contrasted, rounded, skeleton, rlsTheme }) {
+function RlsAvatarComponent({ children, contrasted, rounded, skeleton, transparent, rlsTheme }) {
     const className = renderClassStatus('rls-avatar', {
         contrasted,
         rounded,
-        skeleton
+        skeleton,
+        transparent
     });
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
@@ -586,9 +587,9 @@ function RlsButtonComponent({ type, children, disabled, identifier, onClick, pre
 }
 const RlsButton = require$$0.memo(RlsButtonComponent);
 
-function RlsButtonActionComponent({ icon, disabled, identifier, onClick, rlsTheme, tooltip, type }) {
+function RlsButtonActionComponent({ icon, badge, disabled, identifier, onClick, rlsTheme, tooltip, type }) {
     const className = renderClassStatus('rls-button-action', { type });
-    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onClick, disabled: disabled, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-button-action__content", children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-font-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
+    return (jsxRuntimeExports.jsxs("button", { id: identifier, className: className, onClick: onClick, disabled: disabled, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-button-action__content", children: [jsxRuntimeExports.jsx(RlsIcon, { value: icon }), badge && jsxRuntimeExports.jsx("span", { className: "rls-button-action__badge", children: badge })] }), tooltip && (jsxRuntimeExports.jsx("div", { className: "rls-button-action__tooltip rls-overline-font-medium", children: jsxRuntimeExports.jsx("span", { children: tooltip }) }))] }));
 }
 const RlsButtonAction = require$$0.memo(RlsButtonActionComponent);
 
@@ -2299,32 +2300,46 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 }
 const RlsSlider = require$$0.memo(RlsSliderComponent);
 
-function RlsTab({ onSelect, tab, value }) {
+function RlsTab({ disabled, onSelect, tab, value }) {
     const className = renderClassStatus('rls-tabs__children', {
         active: tab.value === value,
-        disabled: tab.disabled
+        disabled: disabled || tab.disabled
     });
     const onClick = require$$0.useCallback(() => {
-        if (!tab.disabled) {
+        if (!disabled && !tab.disabled) {
             onSelect(tab.value);
         }
-    }, [tab.disabled]);
+    }, [disabled, tab.disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { children: tab.label }) }));
 }
-function RlsTabsComponent({ tabs, onValue, rlsTheme }) {
-    const [value, setValue] = require$$0.useState();
+function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
+    const [valueInternal, setValueInternal] = require$$0.useState();
+    const valueSelected = require$$0.useMemo(() => {
+        return formControl ? formControl.value : valueInternal;
+    }, [formControl?.value, valueInternal]);
     const onSelect = require$$0.useCallback((value) => {
-        setValue(value);
+        if (formControl) {
+            formControl?.setValue(value);
+        }
+        else {
+            setValueInternal(value);
+        }
         onValue?.(value);
-    }, [onValue]);
+    }, [formControl, onValue]);
     require$$0.useEffect(() => {
+        if (formControl?.value !== undefined) {
+            return setValueInternal(formControl.value);
+        }
+        if (value !== undefined) {
+            return setValueInternal(value);
+        }
         const initial = tabs.find((tab) => tab.defaultActive) ?? tabs[0];
         if (initial) {
             onSelect(initial.value);
         }
-    }, []);
+    }, [value, formControl?.value]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-tabs", "rls-theme": rlsTheme, children: tabs.map((tab, index) => {
-            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, value: value, onSelect: onSelect }, index));
+            return (jsxRuntimeExports.jsx(RlsTab, { tab: tab, disabled: formControl?.disabled, value: valueSelected, onSelect: onSelect }, index));
         }) }));
 }
 const RlsTabs = require$$0.memo(RlsTabsComponent);
@@ -4721,6 +4736,14 @@ function usePortalController() {
     return { close, open, visible };
 }
 
+function useTabsController(options) {
+    const formControl = reactForms.useFormControl(options.value);
+    const Tabs = require$$0.useMemo(() => {
+        return (jsxRuntimeExports.jsx(RlsTabs, { tabs: options.tabs, formControl: formControl, onValue: options.onValue }));
+    }, [options.tabs, options.onValue, formControl]);
+    return { Tabs, formControl };
+}
+
 const APP_THEME_ATTRIBUTE = 'app-theme';
 function getAppTheme() {
     if (typeof document === 'undefined') {
@@ -4889,4 +4912,5 @@ exports.useRelocationOnComponent = useRelocationOnComponent;
 exports.useResize = useResize;
 exports.useRlsContext = useRlsContext;
 exports.useSnackbar = useSnackbar;
+exports.useTabsController = useTabsController;
 //# sourceMappingURL=index.cjs.map