@evergis/uilib-gl 1.0.116 → 1.0.117

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Обёртка инпута-якоря: даёт полю собственный фон (сам `Input` прозрачен — `background: transparent`
  * в `inputMixin`), а `inline-flex` + `align-self` не дают обёртке растягиваться во flex-контейнере,
@@ -6,10 +7,12 @@
 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

@@ -29793,7 +29793,7 @@ const FieldIcons = /*#__PURE__*/styled(Flex)`
   right: 0.5rem;
   transform: translateY(-50%);
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.5rem;
   width: max-content;
   white-space: nowrap;
 `;
@@ -29825,10 +29825,11 @@ const CountBadge = styled.span`
   font-weight: 600;
   line-height: 1;
 `;
-const ResetIcon = /*#__PURE__*/styled(Icon)`
-  width: 0.875rem;
-  height: 0.875rem;
-  cursor: pointer;
+/** Иконка свёрнутого состояния без выбора (справа в инпуте). */
+
+const TreeIcon = /*#__PURE__*/styled(Icon)`
+  width: 1.125rem;
+  height: 1.125rem;
   color: ${_ref5 => {
   let {
     theme: {
@@ -29839,83 +29840,87 @@ const ResetIcon = /*#__PURE__*/styled(Icon)`
 }};
 
   &:after {
-    font-size: 0.875rem;
+    font-size: 1.125rem;
   }
+`;
+/** Компактная управляющая кнопка в инпуте заданного размера (без фикс. ширины и паддингов IconButton). */
 
-  &:hover {
-    color: ${_ref6 => {
-  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};
     }
-  } = _ref6;
-  return palette.textPrimary;
-}};
   }
 `;
-const Chevron = /*#__PURE__*/styled(Icon)`
-  width: 0.875rem;
-  height: 0.875rem;
-  cursor: pointer;
-  transform: ${_ref7 => {
-  let {
-    isOpen
-  } = _ref7;
-  return isOpen ? "rotate(180deg)" : "";
-}};
-  transition: transform ${transition.press};
-  color: ${_ref8 => {
+/** Кнопка «применить» (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
     }
-  } = _ref8;
+  } = _ref6;
   return palette.textSecondary;
 }};
-
-  &:after {
-    font-size: 0.875rem;
   }
 `;
 const Content = styled.div`
-  width: ${_ref9 => {
+  width: ${_ref7 => {
   let {
     width
-  } = _ref9;
+  } = _ref7;
   return width || "auto";
 }};
   padding: 0.5rem;
   box-sizing: border-box;
-  background-color: ${_ref10 => {
+  background-color: ${_ref8 => {
   let {
     theme: {
       palette
     }
-  } = _ref10;
+  } = _ref8;
   return palette.background;
 }};
-  border-radius: ${_ref11 => {
+  border-radius: ${_ref9 => {
   let {
     theme: {
       borderRadius
     }
-  } = _ref11;
+  } = _ref9;
   return borderRadius.medium;
 }};
-  box-shadow: ${_ref12 => {
+  box-shadow: ${_ref10 => {
   let {
     theme: {
       shadows
     }
-  } = _ref12;
+  } = _ref10;
   return shadows.raised;
 }};
 `;
 const TreeScroll = styled.div`
-  max-height: ${_ref13 => {
+  max-height: ${_ref11 => {
   let {
     maxHeight
-  } = _ref13;
+  } = _ref11;
   return maxHeight || "15rem";
 }};
   overflow-y: auto;
@@ -29951,20 +29956,20 @@ const ItemBadge = styled.span`
   margin-left: 0.25rem;
   padding: 0;
   border-radius: 0.5rem;
-  background-color: ${_ref14 => {
+  background-color: ${_ref12 => {
   let {
     theme: {
       palette
     }
-  } = _ref14;
+  } = _ref12;
   return palette.element;
 }};
-  color: ${_ref15 => {
+  color: ${_ref13 => {
   let {
     theme: {
       palette
     }
-  } = _ref15;
+  } = _ref13;
   return palette.textSecondary;
 }};
   font-size: 0.625rem;
@@ -30051,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(() => {
@@ -30119,6 +30142,7 @@ const useTreeDropdown = _ref => {
     onClose,
     onToggleSelect,
     onReset,
+    onSave,
     onSearchChange
   } = _ref;
   const {
@@ -30128,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 => {
@@ -30144,6 +30168,7 @@ const useTreeDropdown = _ref => {
     closeDropdown,
     toggleOpen,
     handleReset,
+    handleSave,
     contextValue,
     count,
     displayValue,
@@ -30173,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,