@abyss-project/commons-front-core 16.0.0 → 16.1.0

package/dist/motion/Appear.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface AppearProps {
+    children: ReactNode;
+    /**
+     * Whether the content is shown. Defaults to `true`. Going `false` fades it out and unmounts it;
+     * going `true` again mounts it and animates it in.
+     */
+    in?: boolean;
+    /**
+     * Animate the entry when this component mounts. Defaults to `true`; `false` for what is already
+     * there at the first render of a page, which never animates.
+     */
+    appear?: boolean;
+    /** Called once the exit fade is over and the content is unmounted. */
+    onExited?: () => void;
+    /** Styles of the wrapper element (its layout, say), merged after the motion styles. */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Wraps an element that enters: it fades in while rising 4 px (`motion.enter`), and fades out
+ * when `in` turns `false` (`motion.exit`). The animation lives on a wrapper `div`, so the wrapped
+ * element keeps its own `transform` (a dnd-kit card, see the README).
+ */
+export declare function Appear({ children, in: shown, appear, onExited, sx, }: AppearProps): JSX.Element;

package/dist/motion/AppearList.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface AppearListProps {
+    /**
+     * The items of the list, each with a stable `key`. An item whose key was not there before is
+     * animated in; one whose key disappears is faded out before it unmounts. The items present at
+     * the first render are never animated.
+     */
+    children: ReactNode;
+    /**
+     * Fade the removed items out before unmounting them. Defaults to `true`. `false` for a list
+     * whose items are replaced wholesale (a new page, a new filter), where the leaving items would
+     * sit next to the entering ones.
+     */
+    exit?: boolean;
+    /**
+     * Animate the items added by this update. Defaults to `true`; `false` for items that arrive by a
+     * drag and drop (a card dropped into a column), which must not fade in under the pointer. It is
+     * read when the children change: the items already in the list are never affected.
+     */
+    enter?: boolean;
+    /** Styles of the wrapper `div` of every item (it becomes the item in a flex or grid parent). */
+    itemSx?: SxProps<Theme>;
+}
+/**
+ * Animates the items added to a list after its first render (`Appear`: fade and 4 px rise) and the
+ * ones removed from it (fade out, unless `exit` is off), never the list as first shown. Each item sits in a wrapper
+ * `div`, which carries the animation: an item with its own inline `transform` (a dnd-kit card) is
+ * not disturbed.
+ */
+export declare function AppearList({ children, exit, enter, itemSx, }: AppearListProps): JSX.Element;

package/dist/motion/index.d.ts

@@ -0,0 +1,4 @@
+export * from './motion';
+export * from './Appear';
+export * from './AppearList';
+export * from './use-added-keys.hook';

package/dist/motion/motion.d.ts

@@ -0,0 +1,24 @@
+import { CSSObject, Theme } from '@mui/material/styles';
+/** How far an element rises while it fades in, in px. */
+export declare const ENTER_OFFSET = 4;
+/**
+ * The motion of the design system, read from the theme: the durations and the standard curve of
+ * `theme.design`, so a theme created with `reducedMotion` (or the user's « reduce animations »
+ * preference, through `AbyssThemeProvider`) turns all of it off.
+ */
+export declare const motion: {
+    /**
+     * Styles of an element that has just mounted: it fades in while rising 4 px, over
+     * `durations.base` on `easings.standard`. Put them on a wrapper, not on an element that carries
+     * its own inline `transform` (a dnd-kit card): the animation would own `transform` while it runs.
+     */
+    enter: (theme: Theme) => CSSObject;
+    /**
+     * Timing of an element that leaves: a plain fade over `durations.fast`, as the `timeout` and
+     * `easing` of an MUI `Fade`.
+     */
+    exit: (theme: Theme) => {
+        timeout: number;
+        easing: string;
+    };
+};

package/dist/motion/motion.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/motion/use-added-keys.hook.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The keys that showed up after the first render, among the `keys` of the current one: what a
+ * list adds while it is on screen, never what it opened with. A key that leaves and comes back
+ * counts as added again. For lists whose items cannot sit in a wrapper (table rows): the host
+ * gives these items `motion.enter`.
+ */
+export declare function useAddedKeys(keys: string[]): ReadonlySet<string>;

package/dist/motion/use-added-keys.hook.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme/AbyssThemeProvider.d.ts

@@ -9,6 +9,7 @@ export interface AbyssThemeProviderProps {
 /**
  * Provides the design system theme: the MUI theme of `mode`, the `--abyss-*` variables of both
  * modes, `data-theme` on the document root (read by those variables), and the CSS baseline with
- * tabular figures.
+ * tabular figures. It follows the « reduce animations » preference: under it every duration of the
+ * theme and every `--abyss-duration-*` variable is 0.
  */
 export declare function AbyssThemeProvider({ mode, density, children, }: AbyssThemeProviderProps): JSX.Element;

package/dist/theme/DesignCssVariables.d.ts

@@ -6,6 +6,7 @@ export interface DesignCssVariablesProps {
  * Writes the `--abyss-*` variables of `mode` on the document root, the ones `AbyssThemeProvider`
  * writes. For a host still under the legacy theme provider: the design system components that
  * paint through those variables (`ToolIcon`, the `AppShell` product icon) then render as they do
- * under `AbyssThemeProvider`. Never mount both: `AbyssThemeProvider` already writes them.
+ * under `AbyssThemeProvider`, the « reduce animations » rule of the durations included. Never
+ * mount both: `AbyssThemeProvider` already writes them.
  */
 export declare function DesignCssVariables({ mode, }: DesignCssVariablesProps): JSX.Element;

package/dist/theme/augmentation.d.ts

@@ -21,7 +21,8 @@ export interface DesignTheme {
         overlay: string;
         modal: string;
     };
-    durations: typeof durations;
+    /** Motion durations in ms; all 0 under `prefers-reduced-motion: reduce`. */
+    durations: Record<keyof typeof durations, number>;
     easings: typeof easings;
 }
 declare module '@mui/material/styles' {

package/dist/theme/create-abyss-theme.d.ts

@@ -3,8 +3,11 @@ import { Density } from './augmentation';
 import { ThemeMode } from './tokens/primitives';
 /**
  * The MUI theme of the design system, generated from the tokens (ADR-0174 §1, §3). Its values are
- * also exposed under `theme.design` for the components that style themselves.
+ * also exposed under `theme.design` for the components that style themselves. With
+ * `reducedMotion`, every duration (`theme.design.durations`, `theme.transitions.duration`) is 0:
+ * the one place the reduced-motion preference reaches the components.
  */
 export declare function createAbyssTheme(mode: ThemeMode, options?: {
     density?: Density;
+    reducedMotion?: boolean;
 }): Theme;

package/dist/theme/design-theme.d.ts

@@ -5,4 +5,4 @@ import { ThemeMode } from './tokens/primitives';
  * `createTheme`, so a new component rendered in an app still on the legacy theme reads the same
  * tokens.
  */
-export declare function buildDesignTheme(mode: ThemeMode, density?: Density): DesignTheme;
+export declare function buildDesignTheme(mode: ThemeMode, density?: Density, reducedMotion?: boolean): DesignTheme;

package/dist/theme/index.d.ts

@@ -2,8 +2,9 @@ export * from './tokens';
 export * from './augmentation';
 export * from './create-abyss-theme';
 export * from './css-variables';
+export * from './reduced-motion';
 export * from './AbyssThemeProvider';
 export * from './DesignCssVariables';
 export * from './design-media';
 export * from './use-design-breakpoint';
-export { focusRing, px } from './components/shared';
+export { focusRing, px, transitionOf } from './components/shared';

package/dist/theme/reduced-motion.d.ts

@@ -0,0 +1,7 @@
+/** The media query of the « reduce animations » system preference. */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/**
+ * The `--abyss-duration-*` variables at 0 under the reduced-motion preference: the CSS side of
+ * `createAbyssTheme({ reducedMotion: true })`, for what paints from the variables.
+ */
+export declare function buildReducedMotionCssVariables(): string;

package/dist/theme/reduced-motion.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/translations/en.d.ts

@@ -1626,6 +1626,9 @@ declare const _default: {
                 'too-many': string;
                 'rejected-type': string;
             };
+            'drop-target': {
+                label: string;
+            };
             'import-button': {
                 file: string;
                 url: string;

package/dist/translations/fr.d.ts

@@ -1626,6 +1626,9 @@ declare const _default: {
                 'too-many': string;
                 'rejected-type': string;
             };
+            'drop-target': {
+                label: string;
+            };
             'import-button': {
                 file: string;
                 url: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abyss-project/commons-front-core",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "Front Core package of AbyssProject",
   "main": "dist/index.js",
   "module": "./dist/index.js",
@@ -88,7 +88,7 @@
     "react-router-dom": "^6.15.0",
     "react-toastify": "^8.0.2 || ^10.0.0",
     "zustand": "^5.0.0",
-    "@abyss-project/main": "29.0.0"
+    "@abyss-project/main": "29.1.0"
   },
   "peerDependenciesMeta": {
     "@abyss-project/capacitor-auth": {
@@ -139,7 +139,7 @@
     "use-debounce": "^10.0.5",
     "uuid": "^9.0.0",
     "yup": "^0.32.11",
-    "@abyss-project/main": "29.0.0"
+    "@abyss-project/main": "29.1.0"
   },
   "devDependencies": {
     "@abyss-project/cloud": "^2.4.0",