@rolster/react-components 19.7.2 → 19.7.5

package/dist/es/index.mjs

@@ -4,7 +4,7 @@ import { i18n, i18nSubscribe } from '@rolster/i18n';
 import { PaginationController, verifyDayPicker, createDayPicker, createDayRangePicker, verifyMonthPicker, createMonthPicker, monthLimitTemplate, createYearPicker, verifyYearPicker, ListCollection, navigationListFromInput, navigationListFromElement, createAutocompleteStore, PickerListenerEvent, dateOutRange, verifyDateRange } from '@rolster/components';
 import { DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, Time, dateFormatTemplate, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import ReactDOM from 'react-dom';
-import { useReactControl } from '@rolster/react-forms';
+import { useReactControl, useFormControl } from '@rolster/react-forms';
 
 var jsxRuntime = {exports: {}};
 
@@ -537,11 +537,12 @@ function RlsAreaTextComponent({ autoComplete, disabled, formControl, identifier,
 }
 const RlsAreaText = 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 }));
 }
@@ -584,9 +585,9 @@ function RlsButtonComponent({ type, children, disabled, identifier, onClick, pre
 }
 const RlsButton = 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 = memo(RlsButtonActionComponent);
 
@@ -2297,32 +2298,46 @@ function RlsSliderComponent({ children, className, disabled, formControl, identi
 }
 const RlsSlider = 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 = 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] = useState();
+function RlsTabsComponent({ tabs, formControl, onValue, value, rlsTheme }) {
+    const [valueInternal, setValueInternal] = useState();
+    const valueSelected = useMemo(() => {
+        return formControl ? formControl.value : valueInternal;
+    }, [formControl?.value, valueInternal]);
     const onSelect = useCallback((value) => {
-        setValue(value);
+        if (formControl) {
+            formControl?.setValue(value);
+        }
+        else {
+            setValueInternal(value);
+        }
         onValue?.(value);
-    }, [onValue]);
+    }, [formControl, onValue]);
     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 = memo(RlsTabsComponent);
@@ -4719,6 +4734,14 @@ function usePortalController() {
     return { close, open, visible };
 }
 
+function useTabsController(options) {
+    const formControl = useFormControl(options.value);
+    const Tabs = 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') {
@@ -4740,5 +4763,5 @@ function toggleAppTheme() {
     return theme;
 }
 
-export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar };
+export { ConfirmationResult, DEFAULT_COLOR, RlsAccordion, RlsAlert, RlsAmount, RlsApplication, RlsAreaText, RlsAvatar, RlsBadge, RlsBallot, RlsBody, RlsBottomSheet, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonIcon, RlsButtonOption, RlsButtonProgress, RlsButtonStepper, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContent, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsDropdown, RlsFieldArea, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldClock, RlsFieldColor, RlsFieldDate, RlsFieldDateRange, RlsFieldDecimal, RlsFieldFile, RlsFieldList, RlsFieldListSuggestions, RlsFieldListTemplate, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputCounter, RlsInputDecimal, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsLed, RlsMessageEmpty, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsModalClock, RlsModalDate, RlsModalDateRange, RlsModalSheet, RlsNavbar, RlsNavbarMenu, RlsPagination, RlsPickerClock, RlsPickerColor, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSpinner, RlsSwitch, RlsSwitchControl, RlsTabs, RlsTabularText, RlsToolbar, calculateImgDimension, generateThemePalette, getAppTheme, hexIsValid, hexToHsl, hexToHsv, hexToRgb, hslToHex, hsvToHex, hsvToRgb, normalizeHex, rangeFormatTemplate, renderClassStatus, rgbToHex, rgbToHsl, rgbToHsv, setAppTheme, setDesignSystem, setErrorsI18n, setThemeColor, toggleAppTheme, useConfirmation, useDatatable, useDesingSystemController, useDropdownController, useFieldAutocomplete, useFieldList, useFieldSelect, useFormSingleSelectionController, useFormToggleController, useImageEditorController, useListController, useNotifications, usePortalController, useRelocationOnComponent, useResize, useRlsContext, useSnackbar, useTabsController };
 //# sourceMappingURL=index.mjs.map