@true-engineering/true-react-common-ui-kit 4.0.0-alpha72 → 4.0.0-alpha74

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

@@ -1,4 +1,4 @@
-import { Key } from 'react';
+import { HTMLAttributes, Key } from 'react';
 import { IClickHandlerEvent } from '../../types';
 import { IIcon } from '../Icon';
 import { GROUP_PLACEMENTS } from './constants';
@@ -6,9 +6,10 @@ export interface IControlWrapperSizes {
 }
 export type IControlWrapperSize = keyof IControlWrapperSizes;
 export type IGroupPlacement = (typeof GROUP_PLACEMENTS)[number];
-export interface IControlWrapperIcon {
+export interface IControlWrapperIcon extends Pick<HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
     key?: Key;
     iconComponent: IIcon;
     onClick?: (event: IClickHandlerEvent) => void;
     shouldResetSize?: boolean;
+    isActiveIcon?: boolean;
 }

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

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
+import { Month } from 'date-fns';
 import { ITweakStylesProps } from '../../../../types';
 import { IDatePickerHeaderStyles } from './DatePickerHeader.styles';
 export interface IDatePickerHeaderProps extends BaseProps, ITweakStylesProps<IDatePickerHeaderStyles> {
-    months?: string[];
+    getMonthSelectString: (value: Month) => string;
 }
 export declare const DatePickerHeader: FC<IDatePickerHeaderProps>;

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

@@ -0,0 +1,3 @@
+import { Month } from 'date-fns';
+export declare const MONTH_SELECT_OPTIONS: Month[];
+export declare const YEARS_SELECT_OPTIONS: number[];

package/dist/components/Select/Select.d.ts

@@ -20,7 +20,7 @@ export interface ISelectProps<Value> extends Omit<IReplaceTweakStylesProps<IInpu
     minSymbolsCountToOpenList?: number;
     dropdownOptions?: IDropdownWithPopperOptions;
     /** @default 'chevron-down' */
-    dropdownIcon?: IIcon;
+    dropdownIcon?: IIcon | null;
     options: Value[] | readonly Value[];
     value: Value | undefined;
     /** @default true */

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

@@ -1,6 +1,6 @@
 import { createContext, useContext, useMemo, useRef, useEffect, memo, useLayoutEffect, useCallback, useState, Fragment as Fragment$1, forwardRef, PureComponent, createRef, createElement } from "react";
 import { createUseStyles } from "react-jss";
-import { isObject, isString, isNotEmpty, isArrayNotEmpty, mergeStyles, isStringEmpty, isStringNotEmpty, mergeRefs, isFunction, isEmpty, addDataAttributes as addDataAttributes$1, stopPropagation, applyAction, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, addDataTestId, getArray, isArrayLikeNotEmpty, doNothing, createFilter, merge, getTransition, indexMap, isNumberInteger, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
+import { isObject, isString, isNotEmpty, isArrayNotEmpty, mergeStyles, isStringEmpty, isStringNotEmpty, mergeRefs, isFunction, isEmpty, addDataAttributes as addDataAttributes$1, stopPropagation, applyAction, isReactNodeNotEmpty, addClickHandler, getTestId, getSelectKeyHandler, addDataTestId, getArray, isArrayLikeNotEmpty, doNothing, createFilter, indexMap, merge, getTransition, isNumberInteger, isArrayEmpty } from "@true-engineering/true-react-platform-helpers";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { CSSTransition } from "react-transition-group";
 import clsx from "clsx";
@@ -3073,12 +3073,13 @@ const WithPopup = ({
       onClick: stopPropagation
     }
   });
+  const triggerData = { popupOpen: isActive, ...data };
   const triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : void 0,
     triggerProps: {
       isActive,
       isDisabled,
-      ...!isTriggerWrapped && { data, testId, ...referenceProps }
+      ...!isTriggerWrapped && { data: triggerData, testId, ...referenceProps }
     }
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3091,7 +3092,7 @@ const WithPopup = ({
           [classes.active]: isActive
         }),
         ...referenceProps,
-        ...addDataAttributes$1(data, testId),
+        ...addDataAttributes$1(triggerData, testId),
         children: triggerElement
       }
     ) : triggerElement,
@@ -4142,6 +4143,7 @@ const ControlWrapper = ({
 }) => {
   const classes = useStyles$K({ tweakStyles });
   const [startControlsWidth, setStartControlsWidth] = useState();
+  const [endControlsWidth, setEndControlsWidth] = useState();
   const startIcons = getArray(startIcon).map(convertToControlWrapperIcon);
   const endIcons = getArray(endIcon).map(convertToControlWrapperIcon);
   const hasStartIcons = isArrayNotEmpty(startIcons);
@@ -4156,19 +4158,34 @@ const ControlWrapper = ({
   const startControlsRef = useResizeRef({
     onTargetChange: (target) => setStartControlsWidth(target.clientWidth)
   });
-  const renderIconControl = ({ key, iconComponent, onClick, shouldResetSize = false }, iconType, index) => /* @__PURE__ */ jsx(
+  const endControlsRef = useResizeRef({
+    onTargetChange: (target) => setEndControlsWidth(target.clientWidth)
+  });
+  const renderIconControl = ({
+    key,
+    iconComponent,
+    onClick,
+    shouldResetSize = false,
+    isActiveIcon = isNotEmpty(onClick),
+    ...iconContainerProps
+  }, iconType, index) => /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(classes.icon, classes[`${iconType}Icon`], {
-        [classes.activeIcon]: !isDisabled && isNotEmpty(onClick),
+        [classes.activeIcon]: !isDisabled && isActiveIcon,
         [classes.customIcon]: shouldResetSize
       }),
       ...addClickHandler(onClick, !isDisabled),
       ...addDataTestId(testId, `${iconType}-icon`),
+      ...iconContainerProps,
       children: /* @__PURE__ */ jsx("div", { className: classes.iconInner, children: renderIcon(iconComponent) })
     },
     key ?? index
   );
+  const style = {
+    "--start-controls-width": hasStartIcons ? `${startControlsWidth}px` : void 0,
+    "--end-controls-width": hasEndControls ? `${endControlsWidth}px` : void 0
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4186,7 +4203,7 @@ const ControlWrapper = ({
           [classes.withStartControls]: hasStartIcons
         }
       ),
-      style: hasStartIcons ? { "--start-controls-width": `${startControlsWidth}px` } : void 0,
+      style,
       ...addDataAttributes$1(data, testId),
       children: [
         isReactNodeNotEmpty(label) && /* @__PURE__ */ jsx(
@@ -4203,7 +4220,7 @@ const ControlWrapper = ({
         /* @__PURE__ */ jsxs("div", { className: classes.wrapper, children: [
           hasStartIcons && /* @__PURE__ */ jsx("div", { className: clsx(classes.controls, classes.startControls), ref: startControlsRef, children: startIcons.map((iconProps, index) => renderIconControl(iconProps, "start", index)) }),
           children,
-          hasEndControls && /* @__PURE__ */ jsxs("div", { className: classes.controls, children: [
+          hasEndControls && /* @__PURE__ */ jsxs("div", { className: classes.controls, ref: endControlsRef, children: [
             hasClearButton && renderIconControl({ iconComponent: "close", onClick: onClear }, "clear"),
             hasEndIcons && endIcons.map((iconProps, index) => renderIconControl(iconProps, "end", index)),
             isLoading && /* @__PURE__ */ jsx(
@@ -5335,26 +5352,23 @@ function Select(props) {
                 isLoading: areOptionsLoading,
                 tweakStyles: tweakInputStyles,
                 testId,
-                icon: [
+                endIcon: [
                   isMultiSelect && shouldShowMultiSelectCounter ? {
                     key: "counter",
                     iconComponent: /* @__PURE__ */ jsxs("div", { className: classes.counter, children: [
                       "(+",
                       value.length - 1,
                       ")"
-                    ] }, "counter"),
+                    ] }),
                     shouldResetSize: true
                   } : void 0,
                   ...getArray(endIcon),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(classes.arrow, isOpen && classes.activeArrow),
-                      onClick: onArrowClick,
-                      children: renderIcon(dropdownIcon)
-                    },
-                    "arrow"
-                  )
+                  isNotEmpty(dropdownIcon) ? {
+                    key: "arrow",
+                    onClick: onArrowClick,
+                    tabIndex: void 0,
+                    iconComponent: /* @__PURE__ */ jsx("div", { className: clsx(classes.arrow, { [classes.activeArrow]: isOpen }), children: renderIcon(dropdownIcon) })
+                  } : void 0
                 ].filter(isNotEmpty),
                 ...inputProps
               }
@@ -5366,6 +5380,8 @@ function Select(props) {
     }
   );
 }
+const MONTH_SELECT_OPTIONS = indexMap(12, (idx) => idx);
+const YEARS_SELECT_OPTIONS = indexMap(41, (idx) => getYear(/* @__PURE__ */ new Date()) - 30 + idx);
 const useStyles$F = createThemedStyles("DatePickerHeader", {
   btn: {
     width: 36,
@@ -5409,7 +5425,7 @@ const selectStyles$1 = {
 };
 const DatePickerHeader = ({
   date,
-  months = [],
+  getMonthSelectString,
   tweakStyles,
   prevMonthButtonDisabled,
   nextMonthButtonDisabled,
@@ -5425,31 +5441,28 @@ const DatePickerHeader = ({
     className: "tweakSelect",
     currentComponentName: "DatePickerHeader"
   });
-  const years = useMemo(
-    () => Array.from(Array(41)).map((_, i) => getYear(/* @__PURE__ */ new Date()) - 30 + i),
-    []
-  );
   return /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
     /* @__PURE__ */ jsx(
       Select,
       {
-        value: months[getMonth(date)],
-        options: months,
+        value: getMonth(date),
+        options: MONTH_SELECT_OPTIONS,
+        convertValueToString: getMonthSelectString,
         dropdownIcon: "chevron-down-small",
         isAutoSized: true,
         tweakStyles: tweakSelectStyles,
-        onChange: (value) => changeMonth(months.indexOf(value))
+        onChange: (value) => isNotEmpty(value) && changeMonth(value)
       }
     ),
     /* @__PURE__ */ jsx(
       Select,
       {
         value: getYear(date),
-        options: years,
+        options: YEARS_SELECT_OPTIONS,
         dropdownIcon: "chevron-down-small",
         isAutoSized: true,
         tweakStyles: tweakSelectStyles,
-        onChange: (value) => changeYear(value)
+        onChange: (value) => isNotEmpty(value) && changeYear(value)
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: classes.buttons, children: [
@@ -5584,13 +5597,14 @@ const DatePicker = forwardRef(function DatePicker2({
   const [end, setEnd] = useState(endDate);
   const [endDateValue, setEndDateValue] = useState(formatDate(endDate));
   const hasDateInputValue = isRange ? isStringNotEmpty(startDateValue) || isStringNotEmpty(endDateValue) : isStringNotEmpty(dateValue);
+  const endIcon = isClearable && hasDateInputValue ? inputProps.endIcon : getArray(inputProps.endIcon).concat("calendar");
   const dateInputProps = {
     ...inputProps,
     isRange,
     isDisabled,
     isClearable,
     isActive: isOpen,
-    icon: isClearable && hasDateInputValue ? void 0 : "calendar",
+    endIcon,
     tweakStyles: tweakDateInputStyles,
     ...isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }
   };
@@ -5669,13 +5683,24 @@ const DatePicker = forwardRef(function DatePicker2({
     (event) => datePickerRef.current?.handleClickOutside(event),
     OUTSIDE_CLICK_IGNORE_CLASS
   );
+  const resolvedLocale = isString(locale) ? LocalesMap[locale] : locale;
+  const getLocalizedMonth = useCallback(
+    (month) => {
+      if (isNotEmpty(months?.[month])) {
+        return months[month];
+      }
+      const localizedMonth = resolvedLocale.localize.month(month);
+      return localizedMonth.charAt(0).toUpperCase().concat(localizedMonth.slice(1));
+    },
+    [resolvedLocale, months]
+  );
   return /* @__PURE__ */ jsx("div", { className: classes.root, ...addDataAttributes$1(data), children: /* @__PURE__ */ jsx(
     DatePickerBase,
     {
       ref: componentRef,
       minDate,
       maxDate,
-      locale: isString(locale) ? LocalesMap[locale] : locale,
+      locale: resolvedLocale,
       dateFormat,
       placeholderText: placeholder,
       calendarStartDay,
@@ -5701,7 +5726,7 @@ const DatePicker = forwardRef(function DatePicker2({
       customInputRef,
       customInput: /* @__PURE__ */ jsx(CustomInput, { ...dateInputProps }),
       renderDayContents: (day) => /* @__PURE__ */ jsx("div", { className: classes.dayInner, children: day }),
-      renderCustomHeader: renderCustomHeader ?? ((baseProps) => /* @__PURE__ */ jsx(DatePickerHeader, { ...baseProps, months })),
+      renderCustomHeader: renderCustomHeader ?? ((baseProps) => /* @__PURE__ */ jsx(DatePickerHeader, { ...baseProps, getMonthSelectString: getLocalizedMonth })),
       todayButton,
       highlightDates,
       calendarContainer,