@snack-uikit/toolbar 0.12.2 → 0.12.3-preview-a879b9ed.0

package/README.md

@@ -13,18 +13,6 @@ Toolbar
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| 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` | - | Колбек смены значения чекбокса |
-| checked | `boolean` | - | Значение чекбокса |
-| indeterminate | `boolean` | - | Состояние частичного выбора |
-| selectionMode | enum SelectionMode: `"single"`, `"multiple"` | 'multiple' | Режим выбора |
-| bulkActions | `BulkAction[]` | - | Список массовых действий |
-| onRefresh | `() => void` | - | Колбек обновления |
-| after | `ReactNode` | - | Дополнительный слот в конце тулбара |
-| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
-| filterRow | `FilterRow<TState>` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -3,5 +3,6 @@ import { WithSupportProps } from '@snack-uikit/utils';
 import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
 export type ToolbarProps<TState extends FiltersState = Record<string, unknown>> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
     filterRow?: FilterRow<TState>;
+    filtersDefaultOpen?: boolean;
 };
-export declare function Toolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, ...rest }: ToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, filtersDefaultOpen, ...rest }: ToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Toolbar/Toolbar.js

@@ -38,9 +38,10 @@ function Toolbar(_a) {
       moreActions,
       onRefresh,
       search,
-      filterRow: filterRowProps
+      filterRow: filterRowProps,
+      filtersDefaultOpen
     } = _a,
-    rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
+    rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow", "filtersDefaultOpen"]);
   const needsBulkActions = (0, helpers_1.isBulkActionsProps)(rest);
   const hasLeftSideElements = Boolean(needsBulkActions || onRefresh);
   const resizingContainerRef = (0, react_1.useRef)(null);
@@ -48,7 +49,8 @@ function Toolbar(_a) {
     filterButton,
     filterRow
   } = (0, hooks_1.useFilters)({
-    filterRow: filterRowProps
+    filterRow: filterRowProps,
+    defaultOpen: filtersDefaultOpen
   });
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: styles_module_scss_1.default.containerWrapper

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

@@ -3,10 +3,11 @@ import { FilterButtonProps } from '../../helperComponents';
 import { FilterRow } from './types';
 type UseFiltersProps<TState extends FiltersState> = {
     filterRow?: FilterRow<TState>;
+    defaultOpen?: boolean;
 };
 type UseFiltersReturnType<TState extends FiltersState> = {
     filterButton?: FilterButtonProps;
     filterRow?: FilterRow<TState>;
 };
-export declare function useFilters<TState extends FiltersState>({ filterRow, }: UseFiltersProps<TState>): UseFiltersReturnType<TState>;
+export declare function useFilters<TState extends FiltersState>({ filterRow, defaultOpen, }: UseFiltersProps<TState>): UseFiltersReturnType<TState>;
 export {};

package/dist/cjs/components/Toolbar/hooks.js

@@ -16,10 +16,11 @@ const chips_1 = require("@snack-uikit/chips");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function useFilters(_ref) {
   let {
-    filterRow
+    filterRow,
+    defaultOpen = false
   } = _ref;
   var _a;
-  const [filtersOpen, setFiltersOpen] = (0, uncontrollable_1.useUncontrolledProp)(filterRow === null || filterRow === void 0 ? void 0 : filterRow.open, false, newValue => {
+  const [filtersOpen, setFiltersOpen] = (0, uncontrollable_1.useUncontrolledProp)(filterRow === null || filterRow === void 0 ? void 0 : filterRow.open, defaultOpen, newValue => {
     var _a;
     const result = typeof newValue === 'function' ? newValue(filtersOpen) : newValue;
     (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);

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

@@ -3,5 +3,6 @@ import { WithSupportProps } from '@snack-uikit/utils';
 import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
 export type ToolbarProps<TState extends FiltersState = Record<string, unknown>> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
     filterRow?: FilterRow<TState>;
+    filtersDefaultOpen?: boolean;
 };
-export declare function Toolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, ...rest }: ToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, filtersDefaultOpen, ...rest }: ToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Toolbar/Toolbar.js

@@ -23,10 +23,13 @@ import { extractBulkActionsProps, isBulkActionsProps } from './helpers';
 import { useFilters } from './hooks';
 import styles from './styles.module.css';
 export function Toolbar(_a) {
-    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
+    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, filtersDefaultOpen } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow", "filtersDefaultOpen"]);
     const needsBulkActions = isBulkActionsProps(rest);
     const hasLeftSideElements = Boolean(needsBulkActions || onRefresh);
     const resizingContainerRef = useRef(null);
-    const { filterButton, filterRow } = useFilters({ filterRow: filterRowProps });
+    const { filterButton, filterRow } = useFilters({
+        filterRow: filterRowProps,
+        defaultOpen: filtersDefaultOpen,
+    });
     return (_jsxs("div", Object.assign({ className: styles.containerWrapper }, extractSupportProps(rest), { children: [_jsxs("div", { className: cn(styles.container, className), "data-outline": outline || undefined, ref: resizingContainerRef, children: [hasLeftSideElements && (_jsxs("div", { className: styles.beforeSearch, children: [needsBulkActions && (_jsxs(_Fragment, { children: [_jsx(BulkActions, Object.assign({}, extractBulkActionsProps(rest), { resizingContainerRef: resizingContainerRef })), _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 || filterButton) && (_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 || filterButton) && _jsx(Separator, {}), filterButton && _jsx(FilterButton, Object.assign({}, filterButton)), moreActions && _jsx(MoreActions, { moreActions: moreActions })] }))] }), filterRow && _jsx(ChipChoiceRow, Object.assign({}, filterRow, { size: 'xs', "data-test-id": TEST_IDS.filterRow }))] })));
 }

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

@@ -3,10 +3,11 @@ import { FilterButtonProps } from '../../helperComponents';
 import { FilterRow } from './types';
 type UseFiltersProps<TState extends FiltersState> = {
     filterRow?: FilterRow<TState>;
+    defaultOpen?: boolean;
 };
 type UseFiltersReturnType<TState extends FiltersState> = {
     filterButton?: FilterButtonProps;
     filterRow?: FilterRow<TState>;
 };
-export declare function useFilters<TState extends FiltersState>({ filterRow, }: UseFiltersProps<TState>): UseFiltersReturnType<TState>;
+export declare function useFilters<TState extends FiltersState>({ filterRow, defaultOpen, }: UseFiltersProps<TState>): UseFiltersReturnType<TState>;
 export {};

package/dist/esm/components/Toolbar/hooks.js

@@ -3,9 +3,9 @@ import { useMemo } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { hasFilterBeenApplied } from '@snack-uikit/chips';
 import styles from './styles.module.css';
-export function useFilters({ filterRow, }) {
+export function useFilters({ filterRow, defaultOpen = false, }) {
     var _a;
-    const [filtersOpen, setFiltersOpen] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.open, false, newValue => {
+    const [filtersOpen, setFiltersOpen] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.open, defaultOpen, newValue => {
         var _a;
         const result = typeof newValue === 'function' ? newValue(filtersOpen) : newValue;
         (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toolbar",
-  "version": "0.12.2",
+  "version": "0.12.3-preview-a879b9ed.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -51,5 +51,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "83190fc4f4d6dac84d3801ac3fe18c73354e1029"
+  "gitHead": "fe6e582495064f88a840c966c0cbd3381c2482a3"
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -18,6 +18,7 @@ export type ToolbarProps<TState extends FiltersState = Record<string, unknown>>
   DefaultToolbarProps | CheckedToolbarProps
 > & {
   filterRow?: FilterRow<TState>;
+  filtersDefaultOpen?: boolean;
 };
 
 export function Toolbar<TState extends FiltersState = Record<string, unknown>>({
@@ -28,13 +29,17 @@ export function Toolbar<TState extends FiltersState = Record<string, unknown>>({
   onRefresh,
   search,
   filterRow: filterRowProps,
+  filtersDefaultOpen,
   ...rest
 }: ToolbarProps<TState>) {
   const needsBulkActions = isBulkActionsProps(rest);
   const hasLeftSideElements = Boolean(needsBulkActions || onRefresh);
   const resizingContainerRef = useRef<HTMLDivElement>(null);
 
-  const { filterButton, filterRow } = useFilters<TState>({ filterRow: filterRowProps });
+  const { filterButton, filterRow } = useFilters<TState>({
+    filterRow: filterRowProps,
+    defaultOpen: filtersDefaultOpen,
+  });
 
   return (
     <div className={styles.containerWrapper} {...extractSupportProps(rest)}>

package/src/components/Toolbar/hooks.ts

@@ -10,6 +10,7 @@ import { FilterRow } from './types';
 
 type UseFiltersProps<TState extends FiltersState> = {
   filterRow?: FilterRow<TState>;
+  defaultOpen?: boolean;
 };
 
 type UseFiltersReturnType<TState extends FiltersState> = {
@@ -19,8 +20,9 @@ type UseFiltersReturnType<TState extends FiltersState> = {
 
 export function useFilters<TState extends FiltersState>({
   filterRow,
+  defaultOpen = false,
 }: UseFiltersProps<TState>): UseFiltersReturnType<TState> {
-  const [filtersOpen, setFiltersOpen] = useUncontrolledProp<boolean>(filterRow?.open, false, newValue => {
+  const [filtersOpen, setFiltersOpen] = useUncontrolledProp<boolean>(filterRow?.open, defaultOpen, newValue => {
     const result = typeof newValue === 'function' ? newValue(filtersOpen) : newValue;
     filterRow?.onOpenChange?.(result);
   });