@true-engineering/true-react-common-ui-kit 2.0.0 → 2.1.0

package/README.md

@@ -10,6 +10,23 @@
 
 # Release Notes
 
+## v2.1.0
+
+### Changes
+
+- **DatePicker**: добавлена пропса `strictParsing`
+- Сохранение JSDoc в `*.d.ts` файлах
+
+### Breaking changes
+
+- **Switch**: удалена пропса `label`. Вместо неё нужно использовать `children`
+
+## v2.0.1
+
+### Fixed
+
+- **Select**: исправлено выделение активной опции в списке
+
 ## v0.4.0
 
 **PhoneInput**. Теперь компонент принимает в качестве аргумента объект с информацией о номере телефона IPhoneValue, а не строку.

package/dist/components/Button/Button.d.ts

@@ -9,17 +9,52 @@ export declare type IButtonView = (typeof BUTTON_VIEWS)[number];
 export interface IButtonProps extends ICommonProps {
     tweakStyles?: ButtonStyles;
     children?: ReactNode;
+    /**
+     * @default `button`
+     */
     type?: ButtonHTMLAttributes<unknown>['type'];
+    /**
+     * @default `l`
+     */
     size?: IButtonSize;
+    /**
+     * @default `primary`
+     */
     view?: IButtonView;
+    /**
+     * @default false
+     */
     shouldSkipTabNavigation?: boolean;
+    /**
+     * @default false
+     */
     isDisabled?: boolean;
+    /**
+     * @default false
+     */
     isFullWidth?: boolean;
+    /**
+     * Нужно ли убирать скругление у кнопки слева
+     * @default false
+     */
     isInline?: boolean;
+    /**
+     * Нужно ли показать лоадер и заблокировать кнопку
+     * @default false
+     */
     isLoading?: boolean;
+    /**
+     * @default false
+     */
     isActive?: boolean;
     icon?: IIconType | ReactElement;
+    /**
+     * @default `left`
+     */
     iconPosition?: 'left' | 'right';
+    /**
+     * @default `dots`
+     */
     preloaderType?: IThemedPreloaderProps['type'];
     testId?: string;
     onClick?(event: MouseEvent<HTMLButtonElement>): void | Promise<void>;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,17 +1,30 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { ICommonProps } from '../../types';
 import { CheckboxStyles } from './Checkbox.styles';
 export interface ICheckboxProps<V> extends ICommonProps {
     tweakStyles?: CheckboxStyles;
+    children?: ReactNode;
     isChecked?: boolean;
     isSemiChecked?: boolean;
     isDisabled?: boolean;
     isReadonly?: boolean;
     isInvalid?: boolean;
     value: V;
+    /**
+     * @default 18
+     */
     size?: number;
+    /**
+     * @default `center`
+     */
     alignItems?: 'top' | 'center';
+    /**
+     * @default `size - 4px`
+     */
     textMargin?: number;
+    /**
+     * @default `right`
+     */
     labelPosition?: 'right' | 'left';
     testId?: string;
     onSelect(value: {
@@ -19,4 +32,4 @@ export interface ICheckboxProps<V> extends ICommonProps {
         isSelected: boolean;
     }): void;
 }
-export declare function Checkbox<V>({ children, isDisabled, isReadonly, isChecked, value, size, alignItems, textMargin, data, testId, isSemiChecked, labelPosition, tweakStyles, onSelect, }: PropsWithChildren<ICheckboxProps<V>>): JSX.Element;
+export declare function Checkbox<V>({ children, isDisabled, isReadonly, isChecked, value, size, alignItems, textMargin, data, testId, isSemiChecked, labelPosition, tweakStyles, onSelect, }: ICheckboxProps<V>): JSX.Element;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -7,12 +7,11 @@ export interface IDatePickerProps extends IDatePickerBaseProps {
     selectedDate?: Date | null;
     locale: Locale;
     months?: string[];
-    minDate?: Date | null;
-    maxDate?: Date | null;
-    endDate?: Date | null;
-    startDate?: Date | null;
     topPosition?: number;
     leftPosition?: number;
+    /**
+     * @default `dd.MM.yyyy`
+     */
     dateFormat?: string;
     calendarStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     isRange?: boolean;

package/dist/components/DatePicker/types.d.ts

@@ -1,4 +1,4 @@
 import { ReactDatePickerProps } from 'react-datepicker';
 import { IDateInputProps } from '../DateInput';
 export declare type IRange = [Date | null, Date | null] | null;
-export declare type IDatePickerBaseProps = Pick<ReactDatePickerProps, 'allowSameDay' | 'disabledKeyboardNavigation' | 'monthsShown' | 'popperModifiers' | 'popperPlacement' | 'filterDate' | 'dayClassName' | 'calendarContainer' | 'onCalendarOpen' | 'onCalendarClose' | 'onYearChange' | 'onMonthChange' | 'focusSelectedMonth' | 'shouldCloseOnSelect' | 'showPreviousMonths' | 'todayButton' | 'renderCustomHeader' | 'customInputRef' | 'preventOpenOnFocus'> & Omit<IDateInputProps, 'date' | 'startDate' | 'endDate' | 'isRange' | 'isActive' | 'iconType' | 'maxLength' | 'onChange' | 'onClick' | 'tweakStyles'>;
+export declare type IDatePickerBaseProps = Pick<ReactDatePickerProps, 'startDate' | 'endDate' | 'minDate' | 'maxDate' | 'allowSameDay' | 'disabledKeyboardNavigation' | 'monthsShown' | 'popperModifiers' | 'popperPlacement' | 'filterDate' | 'dayClassName' | 'calendarContainer' | 'onCalendarOpen' | 'onCalendarClose' | 'onYearChange' | 'onMonthChange' | 'focusSelectedMonth' | 'shouldCloseOnSelect' | 'showPreviousMonths' | 'todayButton' | 'renderCustomHeader' | 'customInputRef' | 'preventOpenOnFocus' | 'strictParsing'> & Omit<IDateInputProps, 'date' | 'startDate' | 'endDate' | 'isRange' | 'isActive' | 'iconType' | 'maxLength' | 'onChange' | 'onClick' | 'tweakStyles'>;

package/dist/components/FiltersPane/FilterSelect/FilterSelect.d.ts

@@ -7,8 +7,17 @@ export interface IFilterSelectProps<Value> extends ICommonProps {
     tweakStyles?: FilterSelectStyles;
     value?: Value;
     onChange: (value?: Value) => void;
+    /**
+     * @default false
+     */
     isSearchEnabled?: boolean;
+    /**
+     * @default false
+     */
     isGroupingEnabled?: boolean;
+    /**
+     * @default `220px`
+     */
     width?: string | number;
     localeKey?: IFilterLocaleKey;
     locale?: Partial<ISelectLocale>;
@@ -18,6 +27,9 @@ export interface IFilterSelectProps<Value> extends ICommonProps {
     getValueString?: (value: Value) => string;
     getValueView?: (value: Value) => ReactNode;
     getValueId?: (value: Value) => string;
+    /**
+     * @default true
+     */
     hasClearButton?: boolean;
     testId?: string;
 }

package/dist/components/Input/Input.d.ts

@@ -10,8 +10,14 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
     value?: string;
     label?: string;
     placeholder?: string;
+    /**
+     * @default `text`
+     */
     type?: 'text' | 'password' | 'email' | 'number';
     isDisabled?: boolean;
+    /**
+     * @default true
+     */
     hasFloatingLabel?: boolean;
     isReadonly?: boolean;
     isInvalid?: boolean;
@@ -19,12 +25,23 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
     isClearable?: boolean;
     infoMessage?: string;
     errorMessage?: string;
+    /**
+     * @default `bottom`
+     */
     errorPosition?: 'top' | 'bottom';
     inlineStyle?: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'middle';
     border?: 'top' | 'bottom' | 'left' | 'right';
     isRequired?: boolean;
     isLoading?: boolean;
+    /**
+     * Должна ли ширина input'а подстраиваться под ширину контента
+     * @default false
+     */
     isAutoSizeable?: boolean;
+    /**
+     * Ширина input'а по умолчанию. Используется только вместе с `isAutoSizeable` равному `true`
+     * @default 6
+     */
     defaultSize?: number;
     iconType?: IIconType | ReactElement;
     units?: string;

package/dist/components/MoreMenu/MoreMenu.d.ts

@@ -6,6 +6,9 @@ export interface IMoreMenuProps extends ICommonProps {
     tweakStyles?: MoreMenuStyles;
     items: IListItem[];
     isDisabled?: boolean;
+    /**
+     * @default true
+     */
     hasDefaultStateBackground?: boolean;
     testId?: string;
     onMenuOpen?(): void;

package/dist/components/Notification/Notification.d.ts

@@ -5,9 +5,15 @@ export declare type NotificationType = 'error' | 'info' | 'warning' | 'ok' | 'no
 export interface INotificationProps extends ICommonProps {
     tweakStyles?: NotificationStyles;
     type: NotificationType;
+    /**
+     * @default true
+     */
     isFullWidth?: boolean;
     text?: string;
     title?: string;
+    /**
+     * @default `s`
+     */
     size?: 's' | 'm' | 'l';
     testId?: string;
     children?: ReactNode;

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,13 +1,14 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { ICommonProps } from '../../types';
 import { RadioButtonStyles } from './RadioButton.styles';
 export interface IRadioButtonProps<Value extends string> extends ICommonProps {
     tweakStyles?: RadioButtonStyles;
+    children?: ReactNode;
     value: Value;
     groupName: string;
     isChecked?: boolean;
     isDisabled?: boolean;
     isInvalid?: boolean;
-    onChange: (value: Value) => void | Promise<void>;
+    onChange(value: Value): void | Promise<void>;
 }
-export declare function RadioButton<Value extends string>({ children, value, groupName, isChecked, isDisabled, isInvalid, onChange, data, tweakStyles, }: PropsWithChildren<IRadioButtonProps<Value>>): JSX.Element;
+export declare function RadioButton<Value extends string>({ children, value, groupName, isChecked, isDisabled, isInvalid, data, tweakStyles, onChange, }: IRadioButtonProps<Value>): JSX.Element;

package/dist/components/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import { ICommonProps } from '../../types';
 import { SwitchStyles } from './Switch.styles';
 export interface ISwitchState<V = string> {
@@ -7,14 +7,20 @@ export interface ISwitchState<V = string> {
 }
 export interface ISwitchProps<V extends string> extends ICommonProps {
     tweakStyles?: SwitchStyles;
+    children?: ReactNode;
     value: V;
     isChecked: boolean;
     isDisabled?: boolean;
     isInvalid?: boolean;
-    label?: string;
+    /**
+     * @default `right`
+     */
     labelPosition?: 'left' | 'right';
+    /**
+     * @default `primary`
+     */
     color?: 'primary' | 'secondary';
-    onChange: (state: ISwitchState<V>) => void;
     testId?: string;
+    onChange(state: ISwitchState<V>): void;
 }
-export declare const Switch: <V extends string>({ isDisabled, isChecked, isInvalid, onChange, value, label, children, labelPosition, color, data, tweakStyles, testId, }: PropsWithChildren<ISwitchProps<V>>) => JSX.Element;
+export declare const Switch: <V extends string>({ isDisabled, isChecked, isInvalid, value, children, labelPosition, color, data, tweakStyles, testId, onChange, }: ISwitchProps<V>) => JSX.Element;

package/dist/components/ThemedPreloader/ThemedPreloader.d.ts

@@ -5,6 +5,9 @@ declare const svgTypes: readonly ["default", "logo"];
 export declare type IPreloaderSvgType = (typeof svgTypes)[number];
 export interface IThemedPreloaderProps extends ICommonProps {
     tweakStyles?: ThemedPreloaderStyles;
+    /**
+     * @default `default`
+     */
     type?: 'dots' | IPreloaderSvgType;
     useCurrentColor?: boolean;
 }

package/dist/components/Toaster/Toaster.d.ts

@@ -4,12 +4,25 @@ import { ToasterStyles } from './Toaster.styles';
 export declare type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
 export interface IToasterProps extends ICommonProps {
     tweakStyles?: ToasterStyles;
+    /**
+     * @default `error`
+     */
     type?: ToasterType;
     title?: string;
     text?: string;
     children?: ReactNode;
+    /**
+     * Время автоматического закрытия тостера в миллисекундах
+     * @default 7000
+     */
     timeout?: number;
+    /**
+     * @default false
+     */
     hasCloseButton?: boolean;
+    /**
+     * @default false
+     */
     shouldCloseOnClick?: boolean;
     onClose?(): void;
     onTimeEnd?(): void;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,7 +4,13 @@ import { TooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps {
     tweakStyles?: TooltipStyles;
     text: ReactNode;
+    /**
+     * @default `tooltip`
+     */
     view?: 'tooltip' | 'hint';
+    /**
+     * @default `info`
+     */
     type?: 'info' | 'error';
 }
 export declare const Tooltip: FC<ITooltipProps>;

package/dist/helpers/utils.d.ts

@@ -15,8 +15,17 @@ export declare const setCaretPosition: (elem: HTMLInputElement, caretPos: number
 export declare const isSpaceChar: (char?: string) => boolean;
 export declare const isInt: (n: number) => boolean;
 export declare const getNumberLength: (n?: number) => number;
+/**
+ * Проверяет, что `val` не `null`, не `undefined` и не пустая строка
+ */
 export declare const isNotEmpty: <T>(val: T | null | undefined) => val is T;
+/**
+ * Проверяет, что переданное значение `null` или `undefined`
+ */
 export declare const isEmpty: <T>(val: T | null | undefined) => val is null | undefined;
+/**
+ * Проверяет, что передана непустая строка
+ */
 export declare const isStringNotEmpty: <T extends string>(value: T | null | undefined) => value is T;
 export declare const trimStringToMaxLength: (val: string, maxLength: number) => string;
 export declare const addDataAttributes: (data?: IDataAttributes) => IDataAttributes;
@@ -26,4 +35,9 @@ export declare const addDataTestId: (testId: string | undefined, postfix?: strin
 export declare const getTestId: (testId: string | undefined, postfix?: string | number) => string | undefined;
 export declare const getSelectKeyHandler: (cb: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => void;
 export declare const addClickHandler: (cb?: ((e: MouseEvent | KeyboardEvent) => void) | undefined, hasAction?: boolean) => HTMLAttributes<unknown>;
+/**
+ * Позволяет создать текстовый фильтр для набора items
+ * @param getter - функция возвращающая набор строковых значений из каждого item,
+ * по которым должен осуществляться поиск
+ */
 export declare const createFilter: <T>(getter: (item: T) => Array<string | undefined>, compareFn?: ((item: string, query: string) => boolean) | undefined) => (items: T[], query: string) => T[];

package/dist/true-react-common-ui-kit.js

@@ -8832,11 +8832,17 @@ function Select(props) {
     ]
   });
   useEffect(function() {
-    var val = isMultiSelect ? value === null || value === void 0 ? void 0 : value[0] : value;
     var _optionsIndexesForNavigation_find;
     setFocusedListCellIndex((_optionsIndexesForNavigation_find = optionsIndexesForNavigation.find(function(index) {
-      return filteredOptions[index] === val;
+      return isNotEmpty(strValue) && isNotEmpty(filteredOptions[index]) && convertToId(filteredOptions[index]) === convertToId(strValue);
     })) !== null && _optionsIndexesForNavigation_find !== void 0 ? _optionsIndexesForNavigation_find : optionsIndexesForNavigation[0]);
+  }, [
+    strValue,
+    filteredOptions,
+    optionsIndexesForNavigation,
+    convertToId
+  ]);
+  useEffect(function() {
     if (isOpen) {
       onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     }
@@ -9286,7 +9292,7 @@ var PopperContainer = function(param) {
   });
 };
 var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
-  var data = _param.data, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? null : _param_selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? null : _param_endDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? null : _param_startDate, locale2 = _param.locale, months = _param.months, _param_topPosition = _param.topPosition, topPosition = _param_topPosition === void 0 ? 0 : _param_topPosition, _param_leftPosition = _param.leftPosition, leftPosition = _param_leftPosition === void 0 ? 0 : _param_leftPosition, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, placeholder = _param.placeholder, isRange = _param.isRange, isInline = _param.isInline, isDisabled = _param.isDisabled, isClearable = _param.isClearable, focusSelectedMonth = _param.focusSelectedMonth, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, shouldRenderPopperInBody = _param.shouldRenderPopperInBody, _param_allowSameDay = _param.allowSameDay, allowSameDay = _param_allowSameDay === void 0 ? false : _param_allowSameDay, shouldCloseOnSelect = _param.shouldCloseOnSelect, showPreviousMonths = _param.showPreviousMonths, preventOpenOnFocus = _param.preventOpenOnFocus, popperModifiers = _param.popperModifiers, popperPlacement = _param.popperPlacement, todayButton = _param.todayButton, calendarContainer = _param.calendarContainer, dayClassName = _param.dayClassName, tmp = _param.customInput, CustomInput = tmp === void 0 ? DateInput : tmp, customInputRef = _param.customInputRef, renderCustomHeader = _param.renderCustomHeader, filterDate = _param.filterDate, onYearChange = _param.onYearChange, onMonthChange = _param.onMonthChange, onCalendarOpen = _param.onCalendarOpen, onCalendarClose = _param.onCalendarClose, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, onBlur = _param.onBlur, onFocus = _param.onFocus, onKeyDown = _param.onKeyDown, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$4(_param, [
+  var data = _param.data, _param_selectedDate = _param.selectedDate, selectedDate = _param_selectedDate === void 0 ? null : _param_selectedDate, minDate = _param.minDate, maxDate = _param.maxDate, _param_endDate = _param.endDate, endDate = _param_endDate === void 0 ? null : _param_endDate, _param_startDate = _param.startDate, startDate = _param_startDate === void 0 ? null : _param_startDate, locale2 = _param.locale, months = _param.months, _param_topPosition = _param.topPosition, topPosition = _param_topPosition === void 0 ? 0 : _param_topPosition, _param_leftPosition = _param.leftPosition, leftPosition = _param_leftPosition === void 0 ? 0 : _param_leftPosition, _param_calendarStartDay = _param.calendarStartDay, calendarStartDay = _param_calendarStartDay === void 0 ? 1 : _param_calendarStartDay, _param_dateFormat = _param.dateFormat, dateFormat = _param_dateFormat === void 0 ? DEFAULT_DATE_FORMAT$2 : _param_dateFormat, monthsShown = _param.monthsShown, placeholder = _param.placeholder, isRange = _param.isRange, isInline = _param.isInline, isDisabled = _param.isDisabled, isClearable = _param.isClearable, strictParsing = _param.strictParsing, focusSelectedMonth = _param.focusSelectedMonth, disabledKeyboardNavigation = _param.disabledKeyboardNavigation, shouldRenderPopperInBody = _param.shouldRenderPopperInBody, _param_allowSameDay = _param.allowSameDay, allowSameDay = _param_allowSameDay === void 0 ? false : _param_allowSameDay, shouldCloseOnSelect = _param.shouldCloseOnSelect, showPreviousMonths = _param.showPreviousMonths, preventOpenOnFocus = _param.preventOpenOnFocus, popperModifiers = _param.popperModifiers, popperPlacement = _param.popperPlacement, todayButton = _param.todayButton, calendarContainer = _param.calendarContainer, dayClassName = _param.dayClassName, tmp = _param.customInput, CustomInput = tmp === void 0 ? DateInput : tmp, customInputRef = _param.customInputRef, renderCustomHeader = _param.renderCustomHeader, filterDate = _param.filterDate, onYearChange = _param.onYearChange, onMonthChange = _param.onMonthChange, onCalendarOpen = _param.onCalendarOpen, onCalendarClose = _param.onCalendarClose, onChangeDate = _param.onChangeDate, onChangeRange = _param.onChangeRange, onBlur = _param.onBlur, onFocus = _param.onFocus, onKeyDown = _param.onKeyDown, tweakStyles = _param.tweakStyles, inputProps = _object_without_properties$4(_param, [
     "data",
     "selectedDate",
     "minDate",
@@ -9305,6 +9311,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
     "isInline",
     "isDisabled",
     "isClearable",
+    "strictParsing",
     "focusSelectedMonth",
     "disabledKeyboardNavigation",
     "shouldRenderPopperInBody",
@@ -9478,6 +9485,7 @@ var DatePicker = /* @__PURE__ */ forwardRef(function(_param, ref) {
       popperModifiers,
       popperPlacement,
       selectsRange: isRange,
+      strictParsing,
       preventOpenOnFocus,
       shouldCloseOnSelect,
       customInputRef,
@@ -26716,7 +26724,7 @@ function _object_spread_props$6(target, source) {
   return target;
 }
 function RadioButton(param) {
-  var children = param.children, value = param.value, groupName = param.groupName, isChecked = param.isChecked, isDisabled = param.isDisabled, isInvalid = param.isInvalid, onChange = param.onChange, data = param.data, tweakStyles = param.tweakStyles;
+  var children = param.children, value = param.value, groupName = param.groupName, isChecked = param.isChecked, isDisabled = param.isDisabled, isInvalid = param.isInvalid, data = param.data, tweakStyles = param.tweakStyles, onChange = param.onChange;
   var classes = useTheme("RadioButton", styles$6, tweakStyles).classes;
   var _obj;
   return /* @__PURE__ */ jsxs("label", _object_spread_props$6(_object_spread$6({
@@ -26856,10 +26864,8 @@ function _object_spread_props$5(target, source) {
   return target;
 }
 var Switch = function(param) {
-  var isDisabled = param.isDisabled, isChecked = param.isChecked, isInvalid = param.isInvalid, onChange = param.onChange, value = param.value, label = param.label, children = param.children, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, _param_color = param.color, color = _param_color === void 0 ? "primary" : _param_color, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId;
+  var isDisabled = param.isDisabled, isChecked = param.isChecked, isInvalid = param.isInvalid, value = param.value, children = param.children, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? "right" : _param_labelPosition, _param_color = param.color, color = _param_color === void 0 ? "primary" : _param_color, data = param.data, tweakStyles = param.tweakStyles, testId = param.testId, onChange = param.onChange;
   var classes = useTheme("Switch", styles$5, tweakStyles).classes;
-  var hasLabel = isNotEmpty(label);
-  var hasChild = isNotEmpty(children);
   var handleChange = function() {
     return onChange({
       name: value,
@@ -26869,24 +26875,22 @@ var Switch = function(param) {
   var _obj;
   return /* @__PURE__ */ jsxs("label", _object_spread_props$5(_object_spread$5({
     className: clsx(classes.root, classes[color], (_obj = {}, _define_property$5(_obj, classes.disabled, isDisabled), _define_property$5(_obj, classes.checked, isChecked), _define_property$5(_obj, classes.invalid, isInvalid), _obj))
-  }, addDataAttributes(data)), {
-    "data-testid": testId,
+  }, addDataTestId(testId), addDataAttributes(data)), {
     children: [
       /* @__PURE__ */ jsx("span", {
         className: classes.switch,
-        children: /* @__PURE__ */ jsx("input", {
+        children: /* @__PURE__ */ jsx("input", _object_spread$5({
           type: "checkbox",
           name: value,
           className: classes.input,
           onChange: isDisabled ? void 0 : handleChange,
           checked: isChecked,
-          disabled: isDisabled,
-          "data-testid": testId !== void 0 ? "".concat(testId, "-input") : void 0
-        })
+          disabled: isDisabled
+        }, addDataTestId(testId, "input")))
       }),
-      (hasLabel || hasChild) && /* @__PURE__ */ jsx("span", {
+      isNotEmpty(children) && /* @__PURE__ */ jsx("span", {
         className: clsx(classes.label, classes[labelPosition === "left" ? "labelLeft" : "labelRight"]),
-        children: hasLabel ? label : children
+        children
       })
     ]
   }));