@evergis/uilib-gl 1.0.115 → 1.0.117

package/dist/organisms/TreeDropdown/styled.d.ts

@@ -1,9 +1,18 @@
+/// <reference types="react" />
+/**
+ * Обёртка инпута-якоря: даёт полю собственный фон (сам `Input` прозрачен — `background: transparent`
+ * в `inputMixin`), а `inline-flex` + `align-self` не дают обёртке растягиваться во flex-контейнере,
+ * иначе Popover (`anchorOrigin="bottom-left"`) уводит меню к низу растянутого якоря.
+ */
+export declare const AnchorWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const FieldIcons: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../atoms/Grid").FlexProps, never>;
 export declare const CountBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ResetIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps, never>;
-export declare const Chevron: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps & {
-    isOpen?: boolean | undefined;
-}, never>;
+/** Иконка свёрнутого состояния без выбора (справа в инпуте). */
+export declare const TreeIcon: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps, never>;
+/** Кнопка «применить» (success). */
+export declare const SuccessControl: import("styled-components").StyledComponent<import("react").FC<import("../../molecules/IconButton").IIconButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+/** Кнопка «очистить» (error) — цвет как на макете (приглушённый серый). */
+export declare const ClearControl: import("styled-components").StyledComponent<import("react").FC<import("../../molecules/IconButton").IIconButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     width?: string | undefined;
 }, never>;

package/dist/organisms/TreeDropdown/types.d.ts

@@ -21,6 +21,10 @@ export interface ITreeDropdownProps {
     onClose?: VoidFunction;
     onToggleSelect: (item: TreeItemProps) => void;
     onReset?: VoidFunction;
+    /** Выбор изменён с момента последнего сохранения — активирует кнопку «применить» (success, primary). */
+    dirty?: boolean;
+    /** Применить текущий выбор (сохранить фильтр) — клик по кнопке success. */
+    onSave?: VoidFunction;
 }
 export interface ITreeDropdownContextValue {
     selectedIds: Set<TreeId>;

package/dist/organisms/TreeDropdown/useTreeDropdown.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent } from "react";
 import { ITreeDropdownProps } from "./types";
-export declare const useTreeDropdown: ({ multiSelect, selectedIds, selectedCount, selectedLabel, searchValue, onOpen, onClose, onToggleSelect, onReset, onSearchChange, }: ITreeDropdownProps) => {
+export declare const useTreeDropdown: ({ multiSelect, selectedIds, selectedCount, selectedLabel, searchValue, onOpen, onClose, onToggleSelect, onReset, onSave, onSearchChange, }: ITreeDropdownProps) => {
     open: boolean;
     openDropdown: () => void;
     closeDropdown: () => void;
@@ -8,6 +8,9 @@ export declare const useTreeDropdown: ({ multiSelect, selectedIds, selectedCount
     handleReset: (event: {
         stopPropagation: VoidFunction;
     }) => void;
+    handleSave: (event: {
+        stopPropagation: VoidFunction;
+    }) => void;
     contextValue: import("./types").ITreeDropdownContextValue;
     count: number;
     displayValue: string;

package/dist/organisms/TreeDropdown/useTreeDropdownActions.d.ts

@@ -0,0 +1,9 @@
+declare type StopEvent = {
+    stopPropagation: VoidFunction;
+};
+/** Обработчики управляющих кнопок инпута: очистка (error) и применение выбора (success). */
+export declare const useTreeDropdownActions: (closeDropdown: VoidFunction, onReset?: VoidFunction | undefined, onSave?: VoidFunction | undefined) => {
+    handleReset: (event: StopEvent) => void;
+    handleSave: (event: StopEvent) => void;
+};
+export {};

package/dist/uilib-gl.esm.js

@@ -29760,13 +29760,40 @@ const TreeComponent = _ref => {
 
 const Tree = /*#__PURE__*/memo(TreeComponent);
 
+/**
+ * Обёртка инпута-якоря: даёт полю собственный фон (сам `Input` прозрачен — `background: transparent`
+ * в `inputMixin`), а `inline-flex` + `align-self` не дают обёртке растягиваться во flex-контейнере,
+ * иначе Popover (`anchorOrigin="bottom-left"`) уводит меню к низу растянутого якоря.
+ */
+
+const AnchorWrap = styled.div`
+  display: inline-flex;
+  align-self: flex-start;
+  width: max-content;
+  background-color: ${_ref => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref;
+  return palette.background;
+}};
+  border-radius: ${_ref2 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref2;
+  return borderRadius.medium;
+}};
+`;
 const FieldIcons = /*#__PURE__*/styled(Flex)`
   position: absolute;
   top: 50%;
   right: 0.5rem;
   transform: translateY(-50%);
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.5rem;
   width: max-content;
   white-space: nowrap;
 `;
@@ -29778,66 +29805,74 @@ const CountBadge = styled.span`
   height: 1rem;
   padding: 0;
   border-radius: 0.5rem;
-  background-color: ${_ref => {
+  background-color: ${_ref3 => {
   let {
     theme: {
       palette
     }
-  } = _ref;
+  } = _ref3;
   return palette.primary;
 }};
-  color: ${_ref2 => {
+  color: ${_ref4 => {
   let {
     theme: {
       palette
     }
-  } = _ref2;
+  } = _ref4;
   return palette.background;
 }};
   font-size: 0.625rem;
   font-weight: 600;
   line-height: 1;
 `;
-const ResetIcon = /*#__PURE__*/styled(Icon)`
-  width: 0.875rem;
-  height: 0.875rem;
-  cursor: pointer;
-  color: ${_ref3 => {
+/** Иконка свёрнутого состояния без выбора (справа в инпуте). */
+
+const TreeIcon = /*#__PURE__*/styled(Icon)`
+  width: 1.125rem;
+  height: 1.125rem;
+  color: ${_ref5 => {
   let {
     theme: {
       palette
     }
-  } = _ref3;
+  } = _ref5;
   return palette.textSecondary;
 }};
 
   &:after {
-    font-size: 0.875rem;
+    font-size: 1.125rem;
   }
+`;
+/** Компактная управляющая кнопка в инпуте заданного размера (без фикс. ширины и паддингов IconButton). */
 
-  &:hover {
-    color: ${_ref4 => {
-  let {
-    theme: {
-      palette
+const controlButton = size => css`
+  width: auto;
+  height: ${size};
+  min-width: 0;
+  padding: 0;
+
+  ${Icon} {
+    width: ${size};
+    height: ${size};
+
+    &:after {
+      font-size: ${size};
     }
-  } = _ref4;
-  return palette.textPrimary;
-}};
   }
 `;
-const Chevron = /*#__PURE__*/styled(Icon)`
-  width: 0.875rem;
-  height: 0.875rem;
-  cursor: pointer;
-  transform: ${_ref5 => {
-  let {
-    isOpen
-  } = _ref5;
-  return isOpen ? "rotate(180deg)" : "";
-}};
-  transition: transform ${transition.press};
-  color: ${_ref6 => {
+/** Кнопка «применить» (success). */
+
+
+const SuccessControl = /*#__PURE__*/styled(IconButton)`
+  ${/*#__PURE__*/controlButton("1rem")};
+`;
+/** Кнопка «очистить» (error) — цвет как на макете (приглушённый серый). */
+
+const ClearControl = /*#__PURE__*/styled(IconButton)`
+  ${/*#__PURE__*/controlButton("0.75rem")};
+
+  ${Icon} {
+    color: ${_ref6 => {
   let {
     theme: {
       palette
@@ -29845,9 +29880,6 @@ const Chevron = /*#__PURE__*/styled(Icon)`
   } = _ref6;
   return palette.textSecondary;
 }};
-
-  &:after {
-    font-size: 0.875rem;
   }
 `;
 const Content = styled.div`
@@ -29859,12 +29891,36 @@ const Content = styled.div`
 }};
   padding: 0.5rem;
   box-sizing: border-box;
+  background-color: ${_ref8 => {
+  let {
+    theme: {
+      palette
+    }
+  } = _ref8;
+  return palette.background;
+}};
+  border-radius: ${_ref9 => {
+  let {
+    theme: {
+      borderRadius
+    }
+  } = _ref9;
+  return borderRadius.medium;
+}};
+  box-shadow: ${_ref10 => {
+  let {
+    theme: {
+      shadows
+    }
+  } = _ref10;
+  return shadows.raised;
+}};
 `;
 const TreeScroll = styled.div`
-  max-height: ${_ref8 => {
+  max-height: ${_ref11 => {
   let {
     maxHeight
-  } = _ref8;
+  } = _ref11;
   return maxHeight || "15rem";
 }};
   overflow-y: auto;
@@ -29900,20 +29956,20 @@ const ItemBadge = styled.span`
   margin-left: 0.25rem;
   padding: 0;
   border-radius: 0.5rem;
-  background-color: ${_ref9 => {
+  background-color: ${_ref12 => {
   let {
     theme: {
       palette
     }
-  } = _ref9;
+  } = _ref12;
   return palette.element;
 }};
-  color: ${_ref10 => {
+  color: ${_ref13 => {
   let {
     theme: {
       palette
     }
-  } = _ref10;
+  } = _ref13;
   return palette.textSecondary;
 }};
   font-size: 0.625rem;
@@ -30000,6 +30056,24 @@ const TreeDropdownItemComponent = _ref => {
 
 const TreeDropdownItem = /*#__PURE__*/memo(TreeDropdownItemComponent);
 
+/** Обработчики управляющих кнопок инпута: очистка (error) и применение выбора (success). */
+
+const useTreeDropdownActions = (closeDropdown, onReset, onSave) => {
+  const handleReset = useCallback(event => {
+    event.stopPropagation();
+    onReset == null ? void 0 : onReset();
+  }, [onReset]);
+  const handleSave = useCallback(event => {
+    event.stopPropagation();
+    onSave == null ? void 0 : onSave();
+    closeDropdown();
+  }, [onSave, closeDropdown]);
+  return {
+    handleReset,
+    handleSave
+  };
+};
+
 const useTreeDropdownOpen = (onOpen, onClose) => {
   const [open, setOpen] = useState(false);
   const openDropdown = useCallback(() => {
@@ -30068,6 +30142,7 @@ const useTreeDropdown = _ref => {
     onClose,
     onToggleSelect,
     onReset,
+    onSave,
     onSearchChange
   } = _ref;
   const {
@@ -30077,10 +30152,10 @@ const useTreeDropdown = _ref => {
     toggleOpen
   } = useTreeDropdownOpen(onOpen, onClose);
   const contextValue = useTreeDropdownSelection(selectedIds, onToggleSelect, closeDropdown, multiSelect);
-  const handleReset = useCallback(event => {
-    event.stopPropagation();
-    onReset == null ? void 0 : onReset();
-  }, [onReset]);
+  const {
+    handleReset,
+    handleSave
+  } = useTreeDropdownActions(closeDropdown, onReset, onSave);
   const count = selectedCount ?? selectedIds.size;
   const displayValue = useMemo(() => open ? searchValue : multiSelect ? "" : selectedLabel ?? "", [open, searchValue, multiSelect, selectedLabel]);
   const onInputChange = useCallback(event => {
@@ -30093,6 +30168,7 @@ const useTreeDropdown = _ref => {
     closeDropdown,
     toggleOpen,
     handleReset,
+    handleSave,
     contextValue,
     count,
     displayValue,
@@ -30122,25 +30198,30 @@ const TreeDropdownComponent = props => {
     expanded,
     setExpanded,
     onLoadChildren,
-    onReset
+    onReset,
+    dirty
   } = props;
   const {
     open,
     closeDropdown,
     toggleOpen,
     handleReset,
+    handleSave,
     contextValue,
     count,
     displayValue,
     onInputChange
   } = useTreeDropdown(props);
-  const iconAfter = React.createElement(FieldIcons, null, multiSelect && count > 0 && React.createElement(CountBadge, null, formatCount(count)), count > 0 && onReset && React.createElement(ResetIcon, {
-    kind: "close",
+  const iconAfter = React.createElement(FieldIcons, null, count > 0 && onReset && React.createElement(ClearControl, {
+    kind: "error",
     onClick: handleReset
-  }), React.createElement(Chevron, {
-    kind: "input_dropdown",
-    isOpen: open,
-    onClick: toggleOpen
+  }), multiSelect && count > 0 && React.createElement(CountBadge, null, formatCount(count)), open && React.createElement(SuccessControl, {
+    kind: "success",
+    primary: dirty,
+    disabled: !dirty,
+    onClick: handleSave
+  }), !open && count === 0 && React.createElement(TreeIcon, {
+    kind: "tree_vertical"
   }));
   return React.createElement(Popover, {
     open: open,
@@ -30149,7 +30230,7 @@ const TreeDropdownComponent = props => {
     targetOrigin: "top-left",
     animateX: false,
     zIndex: zIndex,
-    anchor: React.createElement("div", {
+    anchor: React.createElement(AnchorWrap, {
       onClick: toggleOpen
     }, React.createElement(Input$1, {
       readOnly: true,