@true-engineering/true-react-common-ui-kit 4.0.0-alpha66 → 4.0.0-alpha67

package/dist/components/Selector/Selector.styles.d.ts

@@ -1,9 +1,3 @@
-import { CSSProperties } from 'react';
 import { ITweakStyles } from '../../theme';
-export declare const SELECTOR_GAP: number;
-export declare const getSelectorLineStyle: (activeElementData?: {
-    clientWidth: number;
-    offsetLeft: number;
-}) => CSSProperties | undefined;
-export declare const useStyles: import('../../theme').IUseStyles<"option" | "s" | "line" | "invalid" | "root" | "active" | "disabled" | "m" | "l" | "iconFromRight" | "required" | "optionWrapper" | "optionIcon" | "optionText" | "selector" | "autoWidth">;
+export declare const useStyles: import('../../theme').IUseStyles<"option" | "s" | "invalid" | "active" | "disabled" | "m" | "l" | "iconFromRight" | "required" | "selector" | "autoWidth" | "optionIcon" | "optionText">;
 export type ISelectorStyles = ITweakStyles<typeof useStyles>;

package/dist/hooks/use-resize-ref.d.ts

@@ -1,8 +1,8 @@
 import { RefCallback } from 'react';
-export interface IResizeRefOptions {
+export interface IResizeRefOptions<T extends Element> {
     /** @default false */
     isDisabled?: boolean;
     onChange?: (entry: ResizeObserverEntry) => void;
-    onTargetChange?: (target: Element) => void;
+    onTargetChange?: (target: T) => void;
 }
-export declare const useResizeRef: (options: IResizeRefOptions) => RefCallback<Element>;
+export declare const useResizeRef: <T extends Element>(options: IResizeRefOptions<T>) => RefCallback<T>;

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, hasDuplicates, 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, merge, getTransition, indexMap, 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";
@@ -10835,131 +10835,49 @@ function RadioButton({
     }
   );
 }
-const SELECTOR_TOTAL_GAP = 4;
-const SELECTOR_BORDER_WIDTH = 1;
-const SELECTOR_GAP = SELECTOR_TOTAL_GAP - SELECTOR_BORDER_WIDTH;
-const getSelectorLineStyle = (activeElementData) => isNotEmpty(activeElementData) ? {
-  width: activeElementData.clientWidth - SELECTOR_GAP * 2,
-  transform: `translateX(${activeElementData.offsetLeft}px)`
-} : void 0;
 const useStyles$7 = createThemedStyles("Selector", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    listStyle: "none",
-    position: "relative"
-  },
-  required: {
-    "&::before": {
-      top: "50%",
-      left: -12,
-      width: 6,
-      height: 6,
+  selector: {
+    display: "grid",
+    gridAutoFlow: "column",
+    gridAutoColumns: "auto",
+    boxSizing: "border-box",
+    position: "relative",
+    "&:has($active)::before": {
       content: '""',
       position: "absolute",
-      transform: "translate(0, -50%)",
-      borderRadius: "50%",
-      backgroundColor: colors.ORANGE_FOCUS
+      transition: animations.defaultTransition,
+      transitionProperty: "left, width",
+      width: "var(--active-element-width)",
+      height: "var(--active-element-height)",
+      top: "var(--active-element-top)",
+      left: "var(--active-element-left)"
     }
   },
-  invalid: {},
-  optionWrapper: {
-    height: "100%"
+  autoWidth: {
+    gridAutoColumns: "1fr"
   },
+  required: {},
+  invalid: {},
   option: {
+    appearance: "none",
+    background: "none",
+    border: "none",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    appearance: "none",
-    borderRadius: 0,
-    padding: 0,
-    border: "none",
-    cursor: "pointer",
-    width: "100%"
-  },
-  active: {
-    cursor: "default"
-  },
-  disabled: {
-    cursor: "default",
-    "& $optionText": {
-      color: colors.FONT_LABEL
-    }
-  },
-  optionIcon: {
-    width: 20,
-    height: 20
-  },
-  optionText: {},
-  iconFromRight: {
-    "& $option": {
+    zIndex: 1,
+    "$iconFromRight &": {
       flexDirection: "row-reverse"
     }
   },
+  active: {},
+  disabled: {},
+  optionIcon: {},
+  optionText: {},
+  iconFromRight: {},
   s: {},
   m: {},
-  l: {},
-  line: {},
-  selector: {
-    display: "grid",
-    gridAutoFlow: "column",
-    gridAutoColumns: "1fr",
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: colors.BORDER_LIGHT,
-    width: "fit-content",
-    position: "relative",
-    border: ["solid", SELECTOR_BORDER_WIDTH, "transparent"],
-    "& $line": {
-      content: '""',
-      position: "absolute",
-      left: SELECTOR_GAP,
-      height: `calc(100% - ${SELECTOR_GAP * 2}px)`,
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderRadius: dimensions.BORDER_RADIUS_SMALL,
-      transition: animations.defaultTransition,
-      transitionProperty: "transform, width"
-    },
-    "&$invalid": {
-      borderColor: colors.RED_WARNING
-    },
-    "& $option": {
-      gap: 6,
-      position: "relative",
-      zIndex: 1,
-      height: "100%",
-      color: colors.FONT_MEDIUM,
-      fontSize: 16,
-      transition: animations.defaultTransition,
-      transitionProperty: "color",
-      background: "none",
-      "&$s": {
-        padding: [4, 8],
-        fontSize: 10,
-        lineHeight: "14px"
-      },
-      "&$m": {
-        padding: [14, 18]
-      },
-      "&$l": {
-        padding: [16, 24]
-      },
-      "&:hover, &:focus": {
-        color: colors.FONT_MAIN
-      },
-      "&$active": {
-        color: colors.FONT_MAIN
-      }
-    }
-  },
-  autoWidth: {
-    "&$selector": {
-      gridAutoColumns: "auto",
-      "& $line": {
-        width: "unset",
-        transform: "unset"
-      }
-    }
-  }
+  l: {}
 });
 function Selector({
   options,
@@ -10975,57 +10893,53 @@ function Selector({
   tweakStyles,
   onChange
 }) {
-  const classes = useStyles$7({ theme: tweakStyles });
-  const optionsValues = options.map((opt) => opt.value);
-  const [elementsData, setElementsData] = useState([]);
-  const listRef = useRef(null);
-  if (hasDuplicates(optionsValues)) {
-    console.error("Selector: Значения options.value должны быть уникальными");
-  }
-  useEffect(() => {
-    const listEl = listRef.current;
-    if (listEl === null) {
-      return;
+  const classes = useStyles$7({ tweakStyles });
+  const updateVariables = (active) => {
+    if (isNotEmpty(active?.parentElement)) {
+      active.parentElement.style.setProperty("--active-element-width", `${active.clientWidth}px`);
+      active.parentElement.style.setProperty("--active-element-height", `${active.clientHeight}px`);
+      active.parentElement.style.setProperty("--active-element-left", `${active.offsetLeft}px`);
+      active.parentElement.style.setProperty("--active-element-top", `${active.offsetTop}px`);
     }
-    setElementsData([...listEl.querySelectorAll(`.${classes.optionWrapper}`)]);
-  }, [options, size2]);
-  const activeElementData = isNotEmpty(value) ? elementsData[optionsValues.indexOf(value)] : void 0;
-  return /* @__PURE__ */ jsxs(
+  };
+  const resizeRef = useResizeRef({
+    onTargetChange: (target) => updateVariables(target.querySelector(`.${classes.active}`))
+  });
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(classes.root, classes.selector, {
+      ref: resizeRef,
+      className: clsx(classes.selector, classes[size2], {
         [classes.iconFromRight]: iconPosition === "right",
         [classes.invalid]: isInvalid,
         [classes.required]: isRequired,
         [classes.autoWidth]: hasSameOptionsWidth
       }),
-      ref: listRef,
       ...addDataAttributes$1(data, testId),
-      children: [
-        isNotEmpty(activeElementData) && /* @__PURE__ */ jsx("div", { className: classes.line, style: getSelectorLineStyle(activeElementData) }),
-        options.map((option) => {
-          const optionId = option.value.toString();
-          const isDisabledOption = option.isDisabled ?? isDisabled;
-          const isActiveOption = option.value === value;
-          return /* @__PURE__ */ jsx("div", { className: classes.optionWrapper, children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: clsx(classes.option, classes[size2], {
-                [classes.active]: isActiveOption,
-                [classes.disabled]: isDisabledOption
-              }),
-              disabled: isDisabledOption,
-              onClick: !isDisabledOption ? () => onChange(option.value) : void 0,
-              ...addDataTestId(testId, optionId),
-              children: [
-                isReactNodeNotEmpty(option.icon) && /* @__PURE__ */ jsx("div", { className: classes.optionIcon, children: renderIcon(option.icon) }),
-                /* @__PURE__ */ jsx("div", { className: classes.optionText, children: option.label })
-              ]
-            }
-          ) }, optionId);
-        })
-      ]
+      children: options.map((option) => {
+        const optionId = String(option.value);
+        const isDisabledOption = option.isDisabled || isDisabled;
+        const isActiveOption = option.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: isActiveOption ? updateVariables : void 0,
+            type: "button",
+            className: clsx(classes.option, {
+              [classes.active]: isActiveOption,
+              [classes.disabled]: isDisabledOption
+            }),
+            disabled: isDisabledOption,
+            onClick: !isDisabledOption ? () => onChange(option.value) : void 0,
+            ...addDataTestId(testId, optionId),
+            children: [
+              isReactNodeNotEmpty(option.icon) && /* @__PURE__ */ jsx("div", { className: classes.optionIcon, children: renderIcon(option.icon) }),
+              /* @__PURE__ */ jsx("div", { className: classes.optionText, children: option.label })
+            ]
+          },
+          optionId
+        );
+      })
     }
   );
 }