kiban-design-system 1.0.236-alpha.0 → 1.0.238-alpha.0

package/dist/index.js

@@ -30166,7 +30166,7 @@ const Totalizer = ({ action, direction, icon, isDisabled, isFocused, label, plac
     return (jsxs("div", Object.assign({ className: className }, { children: [headerMarkup, contentMarkup] }), void 0));
 };
 
-const COMPONENT_NAME$5 = 'TimeSelector__TimePicker__List';
+const COMPONENT_NAME$5 = 'AlphaMultiSelectionPicker__Picker__List';
 const List = ({ items, selected, onChange }) => {
     const listWrapperRef = useRef(null);
     const scrollToSelected = () => {
@@ -30203,8 +30203,8 @@ const List = ({ items, selected, onChange }) => {
     return (jsx("div", Object.assign({ className: className, ref: listWrapperRef }, { children: jsx("ul", { children: itemsMarkup }, void 0) }), void 0));
 };
 
-const COMPONENT_NAME$4 = 'TimeSelector__TimePicker';
-const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
+const COMPONENT_NAME$4 = 'AlphaMultiSelectionPicker__Picker';
+const Picker = ({ headers, items, onChange, selected, theme: ThemeProp, }) => {
     const { theme: themeValue } = useTheme();
     const theme = ThemeProp || themeValue;
     if (!theme) {
@@ -30228,35 +30228,82 @@ const TimePicker = ({ headers, items, onChange, selected, theme: ThemeProp, }) =
     return (jsxs("div", Object.assign({ className: className }, { children: [headersMarkup, itemsListsMarkup] }), void 0));
 };
 
+const AlphaMultiSelectionPicker = ({ items, onChange, theme, }) => {
+    const getLabel = (value) => {
+        return value < 10 ? `0${value}` : `${value}`;
+    };
+    const getListItem = (min, max) => {
+        const numbersArray = Array.from({ length: max - min + 1 }, (_, i) => i + min);
+        return numbersArray.map((number) => ({
+            label: getLabel(number),
+            value: number,
+        }));
+    };
+    const headersPicker = useMemo(() => items.map((item) => item.plural), [items]);
+    const itemsPicker = useMemo(() => items.map((item) => getListItem(item.min, item.max)), [items]);
+    const valuesSelected = useMemo(() => items.map((item) => item.value), [items]);
+    const pickerMarkup = (jsx(Picker, { items: itemsPicker, headers: headersPicker, onChange: onChange, selected: valuesSelected, theme: theme }, void 0));
+    return jsx("div", { children: pickerMarkup }, void 0);
+};
+
 const COMPONENT_NAME$3 = 'TimeSelector';
-const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, label, onChange, readOnly, placeholderValues, minMaxDays = [0, 365], minMaxHours = [0, 24], minMaxMinutes = [0, 60], minMaxSeconds = [0, 60], theme: themeProp, isRequired, }) => {
+const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, label, onChange, readOnly, placeholderValues, minMaxYears, minMaxMonths, minMaxDays, minMaxHours, minMaxMinutes, minMaxSeconds, theme: themeProp, isRequired, }) => {
     const { theme: themeValue } = useTheme();
     const theme = themeProp || themeValue;
     if (!theme) {
         return null;
     }
+    const [items, setItems] = useState([]);
+    const [keysValues, setKeysValues] = useState([]);
     const fieldRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const [isActive, setIsActive] = useState(false);
     const toggleTimePicker = () => setIsActive(!isActive);
     const hasError = !!error;
-    const daysList = useMemo(() => getTimeList(...minMaxDays), [minMaxDays]);
-    const hoursList = useMemo(() => getTimeList(...minMaxHours), [minMaxHours]);
-    const minutesList = useMemo(() => getTimeList(...minMaxMinutes), [minMaxMinutes]);
-    const secondsList = useMemo(() => getTimeList(...minMaxSeconds), [minMaxSeconds]);
+    const getMaxMins = () => {
+        const maxMins = {
+            years: minMaxYears,
+            months: minMaxMonths,
+            days: minMaxDays,
+            hours: minMaxHours,
+            minutes: minMaxMinutes,
+            seconds: minMaxSeconds,
+        };
+        return maxMins;
+    };
+    const getItemMultiSelectionPicker = (key, minMax) => ({
+        id: key,
+        plural: plurals[key] || '',
+        singular: singulars[key] || '',
+        min: minMax[0],
+        max: minMax[1],
+        value: value ? value[key] : 0,
+    });
+    const getItemsMultiSelectionPicker = () => {
+        const catalogMinMax = getMaxMins();
+        const items = [];
+        const keys = [];
+        Object.keys(catalogMinMax).forEach((key) => {
+            const valueMinMax = catalogMinMax[key];
+            if (valueMinMax) {
+                keys.push(key);
+                items.push(getItemMultiSelectionPicker(key, valueMinMax));
+            }
+        });
+        setKeysValues(keys);
+        return items;
+    };
     const handleClosePopover = () => {
         if (isActive) {
             toggleTimePicker();
         }
     };
     const handleTimePickerChange = (values) => {
-        const [days, hours, minutes, seconds] = values;
-        const newValue = {
-            days: days || 0,
-            hours: hours || 0,
-            minutes: minutes || 0,
-            seconds: seconds || 0,
-        };
+        const newValue = {};
+        keysValues.forEach((key, index) => {
+            const valueByKey = values[index];
+            newValue[key] = valueByKey || 0;
+        });
         if (onChange) {
             onChange(newValue);
         }
@@ -30297,15 +30344,6 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
         fullValue[fieldName] = fieldVal;
         return fullValue;
     };
-    const getMaxMins = () => {
-        const maxMins = {
-            days: minMaxDays,
-            hours: minMaxHours,
-            minutes: minMaxMinutes,
-            seconds: minMaxSeconds,
-        };
-        return maxMins;
-    };
     const renderField = (field, index) => {
         const label = !value || (value && value[field] !== 1)
             ? plurals[field]
@@ -30317,8 +30355,11 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
             ? getTimeValue(value[field])
             : '';
         const separator = index === Object.keys(singulars).length - 1 ? '' : ', ';
-        const min = getMaxMins()[field][0];
-        const max = getMaxMins()[field][1];
+        const valuesMaxMin = getMaxMins()[field];
+        let max;
+        let min;
+        if (valuesMaxMin)
+            [min, max] = valuesMaxMin;
         return (jsxs("div", Object.assign({ className: `${COMPONENT_NAME$3}__InnerField` }, { children: [jsx("input", { type: 'number', value: elValue, placeholder: placeholderValue, onFocus: handleFocusField, onBlur: handleBlurField, disabled: disabled, onChange: handleInputChange, name: field, min: min, max: max }, void 0), jsxs("span", { children: [label, separator] }, void 0)] }), index));
     };
     const fieldsMarkup = Object.keys(singulars).map(renderField);
@@ -30328,28 +30369,21 @@ const TimeSelector = ({ plurals, singulars, value, disabled, error, helpText, la
         ? helpText && (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__HelpTextWrapper` }, { children: helpText }), void 0))
         : null;
     const fieldMarkup = (jsx("div", Object.assign({ className: `${COMPONENT_NAME$3}__FieldWrapper` }, { children: jsxs(AlphaTooltip, Object.assign({ content: error, appearance: 'error', persistence: true, isActive: hasError }, { children: [labelMarkup, jsx("div", Object.assign({ className: fieldClass, onClick: handleFieldClick, ref: fieldRef }, { children: fieldsMarkup }), void 0)] }), void 0) }), void 0));
-    const timePickerValue = useMemo(() => {
-        if (value) {
-            const { days, hours, minutes, seconds } = value;
-            return [days, hours, minutes, seconds];
-        }
-        return undefined;
-    }, [value]);
-    const timePickerHeaders = useMemo(() => [plurals.days, plurals.hours, plurals.minutes, plurals.seconds], [plurals]);
-    const timePickerMarkup = (jsx(TimePicker, { items: [daysList, hoursList, minutesList, secondsList], headers: timePickerHeaders, onChange: handleTimePickerChange, selected: timePickerValue, theme: theme }, void 0));
+    const timePickerMarkup = (jsx(AlphaMultiSelectionPicker, { items: items, onChange: handleTimePickerChange, theme: themeProp }, void 0));
     const popoverMarkup = (jsx(Popover$1, Object.assign({ activator: fieldMarkup, isActive: isActive, isFullWidth: true, onClose: handleClosePopover }, { children: timePickerMarkup }), void 0));
+    useEffect(() => {
+        setItems(getItemsMultiSelectionPicker());
+    }, []);
+    useEffect(() => {
+        setItems(getItemsMultiSelectionPicker());
+    }, [value]);
     const className = cssClassName(COMPONENT_NAME$3, theme, !value && 'isEmpty');
     return (jsxs("div", Object.assign({ className: className }, { children: [popoverMarkup, helpTextMarkup] }), void 0));
 };
 function getTimeValue(value) {
+    if (value === undefined)
+        return '';
     return value < 10 ? `0${value}` : `${value}`;
-}
-function getTimeList(min, max) {
-    const numbersArray = Array.from({ length: max - min + 1 }, (_, i) => i + min);
-    return numbersArray.map((number) => ({
-        label: getTimeValue(number),
-        value: number,
-    }));
 }
 
 const COMPONENT_NAME$2 = 'FilterField';
@@ -30454,5 +30488,5 @@ const AlphaSegmentedControl = ({ children, title, segments, selected, onSelected
     return (jsxs("div", Object.assign({ className: `${MAINCLASS}__Container` }, { children: [headerMarkup, contentMarkup] }), void 0));
 };
 
-export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaSegmentedControl, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
+export { ActionList, Alert, AlertProvider, AlphaAttributeInput, AlphaBadge, AlphaButton, AlphaChip, AlphaFilterControl, AlphaGraphicCard, AlphaIcon, AlphaInlineError, AlphaInputDate, InputTag$1 as AlphaInputTag, AlphaInputText, AlphaLabel, AlphaLabelledField, AlphaMultiSelectionPicker, AlphaSegmentedControl, AlphaSpinner, AlphaStepper, AlphaTag, AlphaTile, AlphaTooltip, Totalizer as AlphaTotalizer, AnnotatedSection, Avatar, Badge, Banner, Button, CalendarPicker, Card, Checkbox, ChoiceList, Collapsible, Connector, Container, Cover, DataTable, DatePicker, DeletableSection, Divider, DynamicForm, EmptyState, ErrorIcon, FileDownloader, Filedrop, FilterControl, Filters, Footer, Form, FormField, FormLayout, Frame, Grid, GridItem, Header$1 as Header, Icon, IconButton, IndexList, InlineEdit, InputPhoneNumber, InputTag, InputText, JsonViewer, Label, Link, ListInfo, Loader, Logo, Media, Modal, ModalHeader, Nip, OptionList, Page, PageActions, Pagination, Pane, Panel, PanelFooter, PanelHeader, PendingIcon, Popover$1 as Popover, Progress, RadioButton, SectionForm, Select, SideMenu, SkeletonInput, SkeletonMedia, SkeletonTabs, SkeletonText, SkeletonTitle, SortableList, Spinner, Stack, StepDefault, SuccessIcon, Table, Tabs, Tag, ThemeProvider, ThreadItem, Thumbnail, Tile, TimeSelector, Title, Toggle, Tooltip, WarningIcon, capitalize, cssClassName, formatDate, isComponentTypeOf, isValidIcon, themeClassConverter, useShowAlert, useTheme };
 //# sourceMappingURL=index.js.map