@snack-uikit/toolbar 0.5.4 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2024-01-18)
+
+
+### BREAKING CHANGES
+
+
+* **FF-4102:** rename prop 'actions' to 'after', add 'before' prop, composed some props to 'search' ([8178570](https://github.com/cloud-ru-tech/snack-uikit/commit/81785709769bde31e7d11db1af9db6b87568b148))
+
+
+
+
 ## 0.5.4 (2023-12-28)
 
 ### Only dependencies have been changed

package/README.md

@@ -13,11 +13,7 @@ Toolbar
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| onChange* | `(value: string) => void` | - | Колбек смены значения |
-| value* | `string` | - | Значение строки поиска |
-| onSubmit | `(value: string) => void` | - | Колбек на подтверждение поиска по строке |
-| placeholder | `string` | - | Плейсхолдер |
-| loading | `boolean` | - | Состояние загрузки |
+| search | `{ value: string; onChange(value: string): void; onSubmit?(value: string): void; placeholder?: string; loading?: boolean; }` | - | Параметры отвечают за строку поиска <br> <strong>value</strong>: Значение строки поиска <br> <strong>onChange</strong>: Колбэк смены значения <br> <strong>onSubmit</strong>: Колбэк на подтверждение поиска по строке <strong>placeholder</strong>: Плейсхолдер <br> <strong>loading</strong>: Состояние загрузки <br> |
 | className | `string` | - | Класснейм |
 | outline | `boolean` | - | Внешний бордер |
 | onCheck | `() => void` | - | Колбек смены значения чекбокса |
@@ -26,7 +22,8 @@ Toolbar
 | indeterminate | `boolean` | - | Состояние частичного выбора |
 | selectionMode | enum SelectionMode: `"single"`, `"multiple"` | 'multiple' | Режим выбора |
 | onRefresh | `() => void` | - | Колбек обновления |
-| actions | `ReactNode` | - | Дополнительный слот |
+| before | `ReactNode` | - | Дополнительный слот в начале Тулбара |
+| after | `ReactNode` | - | Дополнительный слот в конце тулбара |
 | moreActions | `Pick<DroplistItemSingleProps, "option" \| "caption" \| "description" \| "tagLabel" \| "disabled" \| "icon" \| "onClick">[]` | - | Элементы выпадающего списка кнопки с действиями |
 
 

package/dist/components/Toolbar/Toolbar.d.ts

@@ -1,4 +1,4 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { CheckedToolbarProps, DefaultToolbarProps } from './types';
 export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
-export declare function Toolbar({ className, actions, outline, moreActions, onRefresh, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar({ className, before, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toolbar/Toolbar.js

@@ -17,9 +17,11 @@ import { SearchPrivate } from '@snack-uikit/search';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../constants';
 import { DeleteAction, MoreActions, Separator } from '../../helperComponents';
-import { extractDeleteActionProps, extractSearchPrivateProps, isDeleteActionProps } from './helpers';
+import { extractDeleteActionProps, isDeleteActionProps } from './helpers';
 import styles from './styles.module.css';
 export function Toolbar(_a) {
-    var { className, actions, outline, moreActions, onRefresh } = _a, rest = __rest(_a, ["className", "actions", "outline", "moreActions", "onRefresh"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-outline": outline || undefined, children: [isDeleteActionProps(rest) && (_jsxs(_Fragment, { children: [_jsx(DeleteAction, Object.assign({}, extractDeleteActionProps(rest))), _jsx(Separator, {})] })), onRefresh && (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, { icon: _jsx(UpdateSVG, {}), size: 'm', className: styles.updateButton, onClick: onRefresh, "data-test-id": TEST_IDS.refreshButton }), _jsx(Separator, {})] })), _jsx(SearchPrivate, Object.assign({}, extractSearchPrivateProps(rest), { className: styles.search, size: 'm', "data-test-id": TEST_IDS.search })), actions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { "data-test-id": TEST_IDS.actions, className: styles.actions, children: actions })] })), moreActions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(MoreActions, { moreActions: moreActions })] }))] })));
+    var { className, before, after, outline, moreActions, onRefresh, search } = _a, rest = __rest(_a, ["className", "before", "after", "outline", "moreActions", "onRefresh", "search"]);
+    const needsDeleteAction = isDeleteActionProps(rest);
+    const hasLeftSideElements = Boolean(needsDeleteAction || before || onRefresh);
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-outline": outline || undefined, children: [hasLeftSideElements && (_jsxs("div", { className: styles.flexRow, children: [needsDeleteAction && _jsx(DeleteAction, Object.assign({}, extractDeleteActionProps(rest))), before && (_jsx("div", { "data-test-id": TEST_IDS.before, className: styles.actions, children: before })), (needsDeleteAction || before) && _jsx(Separator, {}), onRefresh && (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, { icon: _jsx(UpdateSVG, {}), size: 'm', className: styles.updateButton, onClick: onRefresh, "data-test-id": TEST_IDS.refreshButton }), _jsx(Separator, {})] }))] })), search && _jsx(SearchPrivate, Object.assign({}, search, { className: styles.search, size: 'm', "data-test-id": TEST_IDS.search })), (moreActions || after) && (_jsxs("div", { className: styles.flexRow, "data-align-right": (!search && !hasLeftSideElements) || undefined, children: [after && (_jsxs(_Fragment, { children: [(search || hasLeftSideElements) && _jsx(Separator, {}), _jsx("div", { "data-test-id": TEST_IDS.after, className: styles.actions, children: after })] })), moreActions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(MoreActions, { moreActions: moreActions })] }))] }))] })));
 }

package/dist/components/Toolbar/helpers.d.ts

@@ -1,12 +1,5 @@
 import { ToolbarProps } from './Toolbar';
 import { CheckedToolbarProps } from './types';
-export declare function extractSearchPrivateProps({ value, onChange, onSubmit, placeholder, loading }: Partial<ToolbarProps>): {
-    value: string | undefined;
-    onChange: ((value: string) => void) | undefined;
-    onSubmit: ((value: string) => void) | undefined;
-    placeholder: string | undefined;
-    loading: boolean | undefined;
-};
 export declare function extractDeleteActionProps({ onCheck, checked, indeterminate, onDelete, selectionMode, }: Omit<CheckedToolbarProps, 'onRefresh'>): {
     onCheck: (() => void) | undefined;
     checked: boolean | undefined;

package/dist/components/Toolbar/helpers.js

@@ -1,6 +1,3 @@
-export function extractSearchPrivateProps({ value, onChange, onSubmit, placeholder, loading }) {
-    return { value, onChange, onSubmit, placeholder, loading };
-}
 export function extractDeleteActionProps({ onCheck, checked, indeterminate, onDelete, selectionMode, }) {
     return { onCheck, checked, indeterminate, onDelete, selectionMode };
 }

package/dist/components/Toolbar/styles.module.css

@@ -6,6 +6,7 @@
   border-radius:var(--radius-toolbar-container, 14px);
   position:relative;
   display:flex;
+  justify-content:space-between;
   box-sizing:border-box;
   background-color:var(--sys-neutral-background1-level, #f9f9f9);
 }
@@ -47,7 +48,16 @@
   transition-duration:0s;
 }
 
-.actions{
+.flexRow{
   display:flex;
   flex-shrink:0;
+  box-sizing:border-box;
+}
+.flexRow[data-align-right]{
+  margin-left:auto;
+}
+
+.actions{
+  flex-shrink:0;
+  box-sizing:border-box;
 }

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

@@ -5,22 +5,28 @@ import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
     /** Колбек обновления */
     onRefresh?(): void;
-    /** Дополнительный слот */
-    actions?: ReactNode;
+    /** Дополнительный слот в начале Тулбара */
+    before?: ReactNode;
+    /** Дополнительный слот в конце тулбара */
+    after?: ReactNode;
     /** Элементы выпадающего списка кнопки с действиями */
     moreActions?: Pick<ItemSingleProps, 'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'>[];
 };
 export type CommonToolbarProps = {
-    /** Значение строки поиска */
-    value: string;
-    /** Колбек смены значения */
-    onChange(value: string): void;
-    /** Колбек на подтверждение поиска по строке */
-    onSubmit?(value: string): void;
-    /** Плейсхолдер */
-    placeholder?: string;
-    /** Состояние загрузки */
-    loading?: boolean;
+    /** Параметры отвечают за строку поиска <br>
+     * <strong>value</strong>: Значение строки поиска <br>
+     * <strong>onChange</strong>: Колбэк смены значения <br>
+     * <strong>onSubmit</strong>: Колбэк на подтверждение поиска по строке
+     * <strong>placeholder</strong>: Плейсхолдер <br>
+     * <strong>loading</strong>: Состояние загрузки <br>
+     *  */
+    search?: {
+        value: string;
+        onChange(value: string): void;
+        onSubmit?(value: string): void;
+        placeholder?: string;
+        loading?: boolean;
+    };
     /** Класснейм */
     className?: string;
     /** Внешний бордер */

package/dist/constants.d.ts

@@ -7,5 +7,6 @@ export declare const TEST_IDS: {
     moreActionsButton: string;
     droplist: string;
     option: string;
-    actions: string;
+    before: string;
+    after: string;
 };

package/dist/constants.js

@@ -7,5 +7,6 @@ export const TEST_IDS = {
     moreActionsButton: 'toolbar__more-actions-button',
     droplist: 'toolbar__droplist',
     option: 'toolbar__droplist-option',
-    actions: 'toolbar__actions',
+    before: 'toolbar__before',
+    after: 'toolbar__after',
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toolbar",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,5 +40,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "57c597a3eebaf6528c0c61b6b27dd244753de1cf"
+  "gitHead": "75f118e9d2fa2f38727460ebdd9ac5a1c31cc176"
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -7,56 +7,66 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { TEST_IDS } from '../../constants';
 import { DeleteAction, MoreActions, Separator } from '../../helperComponents';
-import { extractDeleteActionProps, extractSearchPrivateProps, isDeleteActionProps } from './helpers';
+import { extractDeleteActionProps, isDeleteActionProps } from './helpers';
 import styles from './styles.module.scss';
 import { CheckedToolbarProps, DefaultToolbarProps } from './types';
 
 export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
 
-export function Toolbar({ className, actions, outline, moreActions, onRefresh, ...rest }: ToolbarProps) {
+export function Toolbar({ className, before, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps) {
+  const needsDeleteAction = isDeleteActionProps(rest);
+  const hasLeftSideElements = Boolean(needsDeleteAction || before || onRefresh);
+
   return (
     <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-outline={outline || undefined}>
-      {isDeleteActionProps(rest) && (
-        <>
-          <DeleteAction {...extractDeleteActionProps(rest)} />
-          <Separator />
-        </>
-      )}
+      {hasLeftSideElements && (
+        <div className={styles.flexRow}>
+          {needsDeleteAction && <DeleteAction {...extractDeleteActionProps(rest)} />}
 
-      {onRefresh && (
-        <>
-          <ButtonFunction
-            icon={<UpdateSVG />}
-            size='m'
-            className={styles.updateButton}
-            onClick={onRefresh}
-            data-test-id={TEST_IDS.refreshButton}
-          />
-          <Separator />
-        </>
-      )}
+          {before && (
+            <div data-test-id={TEST_IDS.before} className={styles.actions}>
+              {before}
+            </div>
+          )}
+
+          {(needsDeleteAction || before) && <Separator />}
 
-      <SearchPrivate
-        {...extractSearchPrivateProps(rest)}
-        className={styles.search}
-        size='m'
-        data-test-id={TEST_IDS.search}
-      />
-
-      {actions && (
-        <>
-          <Separator />
-          <div data-test-id={TEST_IDS.actions} className={styles.actions}>
-            {actions}
-          </div>
-        </>
+          {onRefresh && (
+            <>
+              <ButtonFunction
+                icon={<UpdateSVG />}
+                size='m'
+                className={styles.updateButton}
+                onClick={onRefresh}
+                data-test-id={TEST_IDS.refreshButton}
+              />
+              <Separator />
+            </>
+          )}
+        </div>
       )}
 
-      {moreActions && (
-        <>
-          <Separator />
-          <MoreActions moreActions={moreActions} />
-        </>
+      {search && <SearchPrivate {...search} className={styles.search} size='m' data-test-id={TEST_IDS.search} />}
+
+      {(moreActions || after) && (
+        <div className={styles.flexRow} data-align-right={(!search && !hasLeftSideElements) || undefined}>
+          {after && (
+            <>
+              {(search || hasLeftSideElements) && <Separator />}
+
+              <div data-test-id={TEST_IDS.after} className={styles.actions}>
+                {after}
+              </div>
+            </>
+          )}
+
+          {moreActions && (
+            <>
+              <Separator />
+              <MoreActions moreActions={moreActions} />
+            </>
+          )}
+        </div>
       )}
     </div>
   );

package/src/components/Toolbar/helpers.ts

@@ -1,10 +1,6 @@
 import { ToolbarProps } from './Toolbar';
 import { CheckedToolbarProps } from './types';
 
-export function extractSearchPrivateProps({ value, onChange, onSubmit, placeholder, loading }: Partial<ToolbarProps>) {
-  return { value, onChange, onSubmit, placeholder, loading };
-}
-
 export function extractDeleteActionProps({
   onCheck,
   checked,

package/src/components/Toolbar/styles.module.scss

@@ -9,9 +9,14 @@
   @include composite-var($toolbar-container);
 
   position: relative;
+
   display: flex;
+  justify-content: space-between;
+
   box-sizing: border-box;
+
   background-color: $sys-neutral-background1-level;
+
   &[data-outline] {
     &::before {
       @include composite-var($toolbar-container-outline);
@@ -59,8 +64,17 @@
   }
 }
 
+.flexRow {
+  display: flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &[data-align-right] {
+    margin-left: auto;
+  }
+}
 
 .actions {
-  display: flex;
   flex-shrink: 0;
-}
+  box-sizing: border-box;
+}

package/src/components/Toolbar/types.ts

@@ -8,8 +8,10 @@ import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
   /** Колбек обновления */
   onRefresh?(): void;
-  /** Дополнительный слот */
-  actions?: ReactNode;
+  /** Дополнительный слот в начале Тулбара */
+  before?: ReactNode;
+  /** Дополнительный слот в конце тулбара */
+  after?: ReactNode;
   /** Элементы выпадающего списка кнопки с действиями */
   moreActions?: Pick<
     ItemSingleProps,
@@ -18,16 +20,20 @@ type OptionalProps = {
 };
 
 export type CommonToolbarProps = {
-  /** Значение строки поиска */
-  value: string;
-  /** Колбек смены значения */
-  onChange(value: string): void;
-  /** Колбек на подтверждение поиска по строке */
-  onSubmit?(value: string): void;
-  /** Плейсхолдер */
-  placeholder?: string;
-  /** Состояние загрузки */
-  loading?: boolean;
+  /** Параметры отвечают за строку поиска <br>
+   * <strong>value</strong>: Значение строки поиска <br>
+   * <strong>onChange</strong>: Колбэк смены значения <br>
+   * <strong>onSubmit</strong>: Колбэк на подтверждение поиска по строке
+   * <strong>placeholder</strong>: Плейсхолдер <br>
+   * <strong>loading</strong>: Состояние загрузки <br>
+   *  */
+  search?: {
+    value: string;
+    onChange(value: string): void;
+    onSubmit?(value: string): void;
+    placeholder?: string;
+    loading?: boolean;
+  };
   /** Класснейм */
   className?: string;
   /** Внешний бордер */

package/src/constants.ts

@@ -7,5 +7,6 @@ export const TEST_IDS = {
   moreActionsButton: 'toolbar__more-actions-button',
   droplist: 'toolbar__droplist',
   option: 'toolbar__droplist-option',
-  actions: 'toolbar__actions',
+  before: 'toolbar__before',
+  after: 'toolbar__after',
 };