@getsoren/design-system 4.88.0 → 4.90.0

package/dist/src/components/Inputs/Counter/Counter.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { InvalidColor } from '../../../utils/getInvalidColor';
+import { InvalidColor } from '../../../utils/colors';
 export interface CounterProps {
     label: ReactNode;
     /** Secondary line under the label */

package/dist/src/components/Inputs/PillGroup/PillGroup.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { InvalidColor } from '../../../utils/getInvalidColor';
+import { InvalidColor } from '../../../utils/colors';
 export interface PillOption {
     value: string;
     label: ReactNode;

package/dist/src/components/Inputs/TextFieldGroup/TextFieldGroup.d.ts

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material';
 import { PropsWithChildren, ReactNode } from 'react';
-import { InvalidColor } from '../../../utils/getInvalidColor';
+import { InvalidColor } from '../../../utils/colors';
 export interface TextFieldGroupProps extends PropsWithChildren {
     /** `row` puts two short fields side by side */
     direction?: "column" | "row";

package/dist/src/components/Inputs/TextFieldPhone/TextFieldPhone.d.ts

@@ -0,0 +1,15 @@
+import { TextFieldProps } from '@mui/material';
+export interface TextFieldPhoneProps extends Omit<TextFieldProps, "type" | "value" | "onChange"> {
+    /** Number as displayed, e.g. "06 34 39 39 49" */
+    value: string;
+    /** Called with the formatted number on each change */
+    onChange: (value: string) => void;
+    /** Display of the digits left by an edit, e.g. to cap their count (defaults to `phoneNumberAdapter`: French pairs) */
+    format?: (digits: string) => string;
+}
+/**
+ * A phone number field formatted as it is typed ("06 34 39 39 49"), the caret kept after the digit it followed:
+ * reformatting would otherwise send it to the end on each edit in the middle of the number.
+ */
+declare const TextFieldPhone: ({ value, onChange, format, inputRef, slotProps, ...props }: TextFieldPhoneProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TextFieldPhone;

package/dist/src/components/Inputs/TextFieldPhone/utils/computeNextPhone.d.ts

@@ -0,0 +1,23 @@
+export declare const toDigits: (value: string) => string;
+export interface NextPhoneParams {
+    /** Caret index in `rawValue` */
+    caret: number;
+    /** `InputEvent.inputType` — empty when the change was not a keystroke (autofill, a test harness) */
+    inputType: string;
+    /** Display value before the edit */
+    previous: string;
+    /** Input value as written by the browser, before formatting */
+    rawValue: string;
+    /** Display value of the digits left by the edit */
+    format: (digits: string) => string;
+}
+/**
+ * Pure transition of a phone field: previous value + raw input → next display value and caret.
+ * Reformatting rewrites the whole value, which would send the browser caret to the end: an edit in
+ * the middle of the number would then continue at the end. The caret is put back after the same
+ * count of digits it followed (spaces move, digits do not).
+ */
+export declare const computeNextPhone: ({ caret, inputType, previous, rawValue, format }: NextPhoneParams) => {
+    caret: number;
+    formatted: string;
+};

package/dist/src/main.d.ts

@@ -105,6 +105,8 @@ export * from './components/Inputs/TextFieldGroup/TextFieldGroup';
 export { default as TextFieldGroup } from './components/Inputs/TextFieldGroup/TextFieldGroup';
 export * from './components/Inputs/TextFieldPassword/TextFieldPassword';
 export { default as TextFieldPassword } from './components/Inputs/TextFieldPassword/TextFieldPassword';
+export * from './components/Inputs/TextFieldPhone/TextFieldPhone';
+export { default as TextFieldPhone } from './components/Inputs/TextFieldPhone/TextFieldPhone';
 export * from './components/Layout/Backoffice/Backoffice';
 export { default as Backoffice } from './components/Layout/Backoffice/Backoffice';
 export { default as CollapsingHeader } from './components/Layout/CollapsingHeader/CollapsingHeader';
@@ -144,9 +146,9 @@ export { default as useSnackbar } from './hooks/useSnackbar/useSnackbar';
 export * from './hooks/useTabs/useTabs';
 export { default as useTabs } from './hooks/useTabs/useTabs';
 export type { DataAttributes } from './types/dataAttributes';
+export * from './utils/colors';
 export * from './utils/getBackgroundImageElevation';
 export { default as getBackgroundImageElevation } from './utils/getBackgroundImageElevation';
-export type { InvalidColor } from './utils/getInvalidColor';
 export { default as isoToEmojiFlag } from './utils/isoToEmojiFlag';
 export { default as pickDataAttributes } from './utils/pickDataAttributes';
 export * from './utils/pxToRem';

package/dist/src/utils/colors.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '@mui/material';
+import { Palette } from '@mui/material/styles';
+export type InvalidColor = "error" | "warning";
+/** Resting border of a control: grey 400 in light mode, the translucent outline of the dark palette otherwise */
+export declare const getOutlineColor: (theme: Theme) => string;
+/**
+ * Resting border of a surface read as content rather than as a form control (card, text area): grey 200 in light
+ * mode, the same dark outline as a control otherwise
+ */
+export declare const getSoftOutlineColor: ({ border, grey, mode }: Palette) => string;
+/** Colour of an invalid control: the error palette, or the softer warning one for an answer still to be given */
+export declare const getInvalidColor: (theme: Theme, color?: InvalidColor) => string;
+/** Grey that sets a surface apart from the paper it sits on (avatar round, own message, filled composer), in both modes. */
+export declare const getSubtleSurfaceColor: ({ grey, mode }: Palette) => string;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@getsoren/design-system",
   "description": "Design System React library",
   "sideEffects": false,
-  "version": "4.88.0",
+  "version": "4.90.0",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",

package/dist/src/utils/getInvalidColor.d.ts

@@ -1,5 +0,0 @@
-import { Theme } from '@mui/material';
-export type InvalidColor = "error" | "warning";
-/** Colour of an invalid control: the error palette, or the softer warning one for an answer still to be given */
-declare const getInvalidColor: (theme: Theme, color?: InvalidColor) => string;
-export default getInvalidColor;

package/dist/src/utils/getOutlineColor.d.ts

@@ -1,4 +0,0 @@
-import { Theme } from '@mui/material';
-/** Resting border of a control: grey 400 in light mode, the translucent outline of the dark palette otherwise */
-declare const getOutlineColor: (theme: Theme) => string;
-export default getOutlineColor;

package/dist/src/utils/getSubtleSurfaceColor.d.ts

@@ -1,4 +0,0 @@
-import { Palette } from '@mui/material/styles';
-/** Grey that sets a surface apart from the paper it sits on (avatar round, own message, filled composer), in both modes. */
-declare const getSubtleSurfaceColor: ({ grey, mode }: Palette) => string;
-export default getSubtleSurfaceColor;