@design-system-rte/core 1.6.5 → 1.7.0-rc1

package/components/datepicker/segmented-date-field.js

@@ -0,0 +1,318 @@
+import { ARROW_DOWN_KEY, ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, BACKSPACE_KEY, DELETE_KEY, } from "../../constants/keyboard/keyboard.constants";
+import { buildMaskedDdMmYyyyFromDigitParts, parseDate, parseDdMmYyyyMaskedString, getLastDayOfMonth, } from "./datepicker.utils";
+export const SEGMENT_ORDER = ["day", "month", "year"];
+const SEGMENT_LENGTH = {
+    day: 2,
+    month: 2,
+    year: 4,
+};
+const SEGMENT_DIGITS_KEY = {
+    day: "dayDigits",
+    month: "monthDigits",
+    year: "yearDigits",
+};
+function readSegmentDigits(state, segment) {
+    return state[SEGMENT_DIGITS_KEY[segment]];
+}
+function withSegmentDigits(state, segment, digits) {
+    const key = SEGMENT_DIGITS_KEY[segment];
+    return { ...state, [key]: digits };
+}
+export function getSegmentDisplayText(digits, segment, emptyPlaceholder) {
+    if (!digits?.length) {
+        return emptyPlaceholder;
+    }
+    const maxLength = SEGMENT_LENGTH[segment];
+    if (digits.length < maxLength) {
+        return digits.padStart(maxLength, "0");
+    }
+    return digits;
+}
+export function createEmptySegmentedDateFieldState() {
+    return {
+        dayDigits: "",
+        monthDigits: "",
+        yearDigits: "",
+        activeSegment: "day",
+    };
+}
+export function segmentedStateFromDdMmYyyyString(value) {
+    const parts = parseDdMmYyyyMaskedString(value);
+    return {
+        dayDigits: parts.dayDigits,
+        monthDigits: parts.monthDigits,
+        yearDigits: parts.yearDigits,
+        activeSegment: "day",
+    };
+}
+export function segmentedStateFromIsoDate(date) {
+    return {
+        dayDigits: `${date.getDate()}`.padStart(2, "0"),
+        monthDigits: `${date.getMonth() + 1}`.padStart(2, "0"),
+        yearDigits: `${date.getFullYear()}`.padStart(4, "0"),
+        activeSegment: "day",
+    };
+}
+export function buildDigitsOnlyFromState(state) {
+    return `${state.dayDigits}${state.monthDigits}${state.yearDigits}`;
+}
+export function buildMaskedDdMmYyyyFromState(state) {
+    return buildMaskedDdMmYyyyFromDigitParts({
+        dayDigits: state.dayDigits,
+        monthDigits: state.monthDigits,
+        yearDigits: state.yearDigits,
+    });
+}
+export function getParsedDateFromState(state) {
+    return parseDate(buildMaskedDdMmYyyyFromState(state));
+}
+function segmentToIndex(segment) {
+    return SEGMENT_ORDER.indexOf(segment);
+}
+function nextSegment(segment) {
+    const index = segmentToIndex(segment);
+    if (index < 0 || index >= SEGMENT_ORDER.length - 1) {
+        return null;
+    }
+    return SEGMENT_ORDER[index + 1] ?? null;
+}
+function clampDigits(raw, maxLength) {
+    return raw.replace(/\D/g, "").slice(0, maxLength);
+}
+function getMaxDayForDaySegment(state) {
+    const { monthDigits, yearDigits } = state;
+    if (monthDigits.length === 2 && yearDigits.length === 4) {
+        const monthNum = Number.parseInt(monthDigits, 10);
+        const yearNum = Number.parseInt(yearDigits, 10);
+        if (!Number.isNaN(monthNum) && monthNum >= 1 && monthNum <= 12 && !Number.isNaN(yearNum)) {
+            return getLastDayOfMonth(yearNum, monthNum - 1);
+        }
+    }
+    return 31;
+}
+function isMonthDigitsCompleteValid(monthDigits) {
+    if (monthDigits.length !== 2) {
+        return false;
+    }
+    const monthNum = Number.parseInt(monthDigits, 10);
+    return !Number.isNaN(monthNum) && monthNum >= 1 && monthNum <= 12;
+}
+function isYearDigitsCompleteValid(yearDigits) {
+    if (yearDigits.length !== 4) {
+        return false;
+    }
+    const yearNum = Number.parseInt(yearDigits, 10);
+    return !Number.isNaN(yearNum) && yearNum >= 1 && yearNum <= 9999;
+}
+function isDayDigitsCompleteValid(dayDigits, monthDigits, yearDigits) {
+    if (dayDigits.length !== 2) {
+        return false;
+    }
+    const dayNum = Number.parseInt(dayDigits, 10);
+    if (Number.isNaN(dayNum) || dayNum < 1 || dayNum > 31) {
+        return false;
+    }
+    if (monthDigits.length === 2 && yearDigits.length === 4) {
+        const monthNum = Number.parseInt(monthDigits, 10);
+        const yearNum = Number.parseInt(yearDigits, 10);
+        if (Number.isNaN(monthNum) || monthNum < 1 || monthNum > 12 || Number.isNaN(yearNum)) {
+            return true;
+        }
+        const maxDay = getLastDayOfMonth(yearNum, monthNum - 1);
+        return dayNum >= 1 && dayNum <= maxDay;
+    }
+    return true;
+}
+export function isSegmentCompleteValid(segment, state) {
+    if (segment === "day") {
+        return isDayDigitsCompleteValid(state.dayDigits, state.monthDigits, state.yearDigits);
+    }
+    if (segment === "month") {
+        return isMonthDigitsCompleteValid(state.monthDigits);
+    }
+    return isYearDigitsCompleteValid(state.yearDigits);
+}
+function clearSegmentDigits(state, segment) {
+    return withSegmentDigits(state, segment, "");
+}
+function padSegmentDigitsToWidth(digits, segment) {
+    const maxLength = SEGMENT_LENGTH[segment];
+    if (digits.length && digits.length < maxLength) {
+        return digits.padStart(maxLength, "0");
+    }
+    return digits;
+}
+export function applySegmentLeaveWhenChangingActiveSegment(state, nextActiveSegment) {
+    if (state.activeSegment === nextActiveSegment) {
+        return state;
+    }
+    const segmentLeaving = state.activeSegment;
+    let nextState = { ...state };
+    const rawDigits = readSegmentDigits(state, segmentLeaving);
+    const paddedDigits = padSegmentDigitsToWidth(rawDigits, segmentLeaving);
+    if (paddedDigits !== rawDigits) {
+        nextState = withSegmentDigits(nextState, segmentLeaving, paddedDigits);
+    }
+    if (!isSegmentCompleteValid(segmentLeaving, nextState)) {
+        nextState = clearSegmentDigits(nextState, segmentLeaving);
+    }
+    return { ...nextState, activeSegment: nextActiveSegment };
+}
+export function resetIncompleteSegmentsOnBlur(state) {
+    let next = {
+        ...state,
+        dayDigits: padSegmentDigitsToWidth(state.dayDigits, "day"),
+        monthDigits: padSegmentDigitsToWidth(state.monthDigits, "month"),
+        yearDigits: padSegmentDigitsToWidth(state.yearDigits, "year"),
+    };
+    if (!isSegmentCompleteValid("day", next)) {
+        next = { ...next, dayDigits: "" };
+    }
+    if (!isSegmentCompleteValid("month", next)) {
+        next = { ...next, monthDigits: "" };
+    }
+    if (!isSegmentCompleteValid("year", next)) {
+        next = { ...next, yearDigits: "" };
+    }
+    return next;
+}
+export function firstIncompleteSegmentForState(state) {
+    if (state.dayDigits.length < SEGMENT_LENGTH.day) {
+        return "day";
+    }
+    if (state.monthDigits.length < SEGMENT_LENGTH.month) {
+        return "month";
+    }
+    if (state.yearDigits.length < SEGMENT_LENGTH.year) {
+        return "year";
+    }
+    return "year";
+}
+function appendDigitToSegment(state, digit) {
+    const segment = state.activeSegment;
+    const maxLength = SEGMENT_LENGTH[segment];
+    const current = readSegmentDigits(state, segment);
+    if (current.length >= maxLength) {
+        return { ...withSegmentDigits(state, segment, digit), activeSegment: segment };
+    }
+    const nextValue = `${current}${digit}`;
+    if (segment === "day" && nextValue.length === 2) {
+        const dayNum = Number.parseInt(nextValue, 10);
+        if (dayNum < 1 || dayNum > 31) {
+            return state;
+        }
+    }
+    if (segment === "month" && nextValue.length === 2) {
+        const monthNum = Number.parseInt(nextValue, 10);
+        if (monthNum < 1 || monthNum > 12) {
+            return state;
+        }
+    }
+    let activeSegment = segment;
+    if (nextValue.length >= maxLength && segment !== "year") {
+        const advanced = nextSegment(segment);
+        if (advanced !== null) {
+            activeSegment = advanced;
+        }
+    }
+    return { ...withSegmentDigits(state, segment, nextValue), activeSegment };
+}
+function moveActiveSegmentClamped(state, delta) {
+    const currentIndex = segmentToIndex(state.activeSegment);
+    const nextIndex = currentIndex + delta;
+    if (nextIndex < 0 || nextIndex > SEGMENT_ORDER.length - 1) {
+        return state;
+    }
+    const nextActive = SEGMENT_ORDER[nextIndex];
+    if (nextActive === undefined) {
+        return state;
+    }
+    return applySegmentLeaveWhenChangingActiveSegment(state, nextActive);
+}
+function stepMonthDigits(monthDigits, delta) {
+    let value = monthDigits.length ? Number.parseInt(monthDigits, 10) : 0;
+    if (value === 0 && monthDigits.length === 0) {
+        value = delta > 0 ? 0 : 13;
+    }
+    let nextNum = value + delta;
+    nextNum = Math.max(1, Math.min(12, nextNum));
+    return String(nextNum).padStart(2, "0");
+}
+function stepYearDigits(yearDigits, delta) {
+    const currentYear = new Date().getFullYear();
+    if (yearDigits.length === 0) {
+        return clampDigits(String(currentYear + delta), 4);
+    }
+    const padded = yearDigits.padEnd(4, "0");
+    let next = Number.parseInt(padded, 10) + delta;
+    if (Number.isNaN(next)) {
+        next = currentYear + delta;
+    }
+    next = Math.max(1000, Math.min(9999, next));
+    return clampDigits(String(next), 4);
+}
+function withDayDigitsClampedToMonth(state, dayNumber) {
+    const maxDay = getMaxDayForDaySegment(state);
+    const clamped = Math.max(1, Math.min(maxDay, dayNumber));
+    return { ...state, dayDigits: String(clamped).padStart(2, "0") };
+}
+function applyArrowUp(state) {
+    if (state.activeSegment === "day") {
+        const value = state.dayDigits.length ? Number.parseInt(state.dayDigits, 10) : 0;
+        return withDayDigitsClampedToMonth(state, value + 1);
+    }
+    if (state.activeSegment === "month") {
+        return { ...state, monthDigits: stepMonthDigits(state.monthDigits, 1) };
+    }
+    return { ...state, yearDigits: stepYearDigits(state.yearDigits, 1) };
+}
+function applyArrowDown(state) {
+    if (state.activeSegment === "day") {
+        let value = state.dayDigits.length ? Number.parseInt(state.dayDigits, 10) : 0;
+        if (value === 0 && state.dayDigits.length === 0) {
+            value = getMaxDayForDaySegment(state) + 1;
+        }
+        return withDayDigitsClampedToMonth(state, value - 1);
+    }
+    if (state.activeSegment === "month") {
+        return { ...state, monthDigits: stepMonthDigits(state.monthDigits, -1) };
+    }
+    return { ...state, yearDigits: stepYearDigits(state.yearDigits, -1) };
+}
+function emptyActiveSegment(state) {
+    return withSegmentDigits(state, state.activeSegment, "");
+}
+export function reduceSegmentedDateFieldKey(params) {
+    const { state, key, isComposing } = params;
+    if (isComposing) {
+        return null;
+    }
+    if (key === ARROW_LEFT_KEY) {
+        return moveActiveSegmentClamped(state, -1);
+    }
+    if (key === ARROW_RIGHT_KEY) {
+        return moveActiveSegmentClamped(state, 1);
+    }
+    if (key === ARROW_UP_KEY) {
+        return applyArrowUp(state);
+    }
+    if (key === ARROW_DOWN_KEY) {
+        return applyArrowDown(state);
+    }
+    if (key === BACKSPACE_KEY || key === DELETE_KEY) {
+        return emptyActiveSegment(state);
+    }
+    if (key.length === 1 && /\d/.test(key)) {
+        return appendDigitToSegment(state, key);
+    }
+    return null;
+}
+export function shouldPreventDefaultSegmentedKey(key) {
+    if ([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, BACKSPACE_KEY, DELETE_KEY].includes(key)) {
+        return true;
+    }
+    if (key.length === 1 && /\d/.test(key)) {
+        return true;
+    }
+    return false;
+}

package/components/file-upload/file-upload.interface.d.ts

@@ -0,0 +1,26 @@
+import { InputProps } from "../common/input-props";
+
+export interface FileUploadProps extends Omit<InputProps, "value" | "onChange"> {
+  id: string;
+  label: string;
+  showLabel?: boolean;
+  compactSpacing?: boolean;
+  multiple?: boolean;
+  buttonLabel: string;
+  accept?: string;
+  onChange?: (files: File[]) => void;
+  onUpload?: (file: File) => Promise<void>;
+  errorFilesMap?: string[];
+  onRemovingFile?: (file: File) => void;
+  onUploadingFile?: (file: File) => void;
+  showAssistiveText?: boolean;
+}
+
+export interface FileItemProps {
+  file: File;
+  removeFile: () => void;
+  isError?: boolean;
+  errorMessage?: string;
+  compact?: boolean;
+  isLoading?: boolean;
+}

package/components/file-upload/file-upload.util.d.ts

@@ -0,0 +1,7 @@
+export declare const getStringWidthFromContext: (ctx: CanvasRenderingContext2D) => (t: string) => number;
+export declare const formatFileSize: (bytes: number) => string;
+export declare const extractFileNameParts: (name: string) => {
+    baseName: string;
+    fileType: string;
+};
+//# sourceMappingURL=file-upload.util.d.ts.map

package/components/file-upload/file-upload.util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.util.d.ts","sourceRoot":"","sources":["../../../components/file-upload/file-upload.util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,GAAI,KAAK,wBAAwB,MAAM,GAAG,MAAM,WAA6B,CAAC;AAEpH,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,WAK3C,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM;;;CAKhD,CAAC"}

package/components/file-upload/file-upload.util.js

@@ -0,0 +1,16 @@
+export const getStringWidthFromContext = (ctx) => (t) => ctx.measureText(t).width;
+export const formatFileSize = (bytes) => {
+    if (bytes < 1024)
+        return `${bytes} o`;
+    if (bytes < 1024 ** 2)
+        return `${(bytes / 1024).toFixed(2)} Ko`;
+    if (bytes < 1024 ** 3)
+        return `${(bytes / 1024 ** 2).toFixed(2)} Mo`;
+    return `${(bytes / 1024 ** 3).toFixed(2)} Go`;
+};
+export const extractFileNameParts = (name) => {
+    const fileTypeIndex = name.lastIndexOf(".");
+    const fileType = fileTypeIndex !== -1 ? name.substring(fileTypeIndex) : "";
+    const baseName = fileTypeIndex !== -1 ? name.substring(0, fileTypeIndex) : name;
+    return { baseName, fileType };
+};

package/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./file-upload.interface";
+//# sourceMappingURL=index.d.ts.map

package/components/file-upload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/file-upload/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,yBAAyB,CAAC"}

package/components/file-upload/index.js

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

package/components/toast/toast.utils.d.ts

@@ -1,5 +1,5 @@
 export declare const getToastPriority: (toast: {
     hasActionButton: boolean;
     type: "info" | "success" | "warning" | "error" | "neutral";
-}) => 3 | 2 | 1 | 4 | 9 | 5 | 6 | 7 | 8 | 10;
+}) => 3 | 2 | 1 | 4 | 10 | 8 | 6 | 7 | 9 | 5;
 //# sourceMappingURL=toast.utils.d.ts.map

package/index.d.ts

@@ -16,6 +16,7 @@ export * from "./components/checkbox";
 export * from "./components/checkbox-group";
 export * from "./components/chip";
 export * from "./components/divider";
+export * from "./components/datepicker";
 export * from "./components/drawer";
 export * from "./components/dropdown";
 export * from "./components/grid";
@@ -45,4 +46,5 @@ export * from "./components/stepper";
 export * from "./components/accordion";
 export * from "./components/avatar";
 export * from "./utils";
+export * from "./components/file-upload";
 //# sourceMappingURL=index.d.ts.map

package/index.js

@@ -16,6 +16,7 @@ export * from "./components/checkbox";
 export * from "./components/checkbox-group";
 export * from "./components/chip";
 export * from "./components/divider";
+export * from "./components/datepicker";
 export * from "./components/drawer";
 export * from "./components/dropdown";
 export * from "./components/grid";
@@ -45,3 +46,4 @@ export * from "./components/stepper";
 export * from "./components/accordion";
 export * from "./components/avatar";
 export * from "./utils";
+export * from "./components/file-upload";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-system-rte/core",
-  "version": "1.6.5",
+  "version": "1.7.0-rc1",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -74,6 +74,10 @@
       "types": "./components/chip/index.d.ts",
       "default": "./components/chip/index.js"
     },
+    "./components/datepicker": {
+      "types": "./components/datepicker/index.d.ts",
+      "default": "./components/datepicker/index.js"
+    },
     "./components/divider": {
       "types": "./components/divider/index.d.ts",
       "default": "./components/divider/index.js"
@@ -86,6 +90,10 @@
       "types": "./components/dropdown/index.d.ts",
       "default": "./components/dropdown/index.js"
     },
+    "./components/file-upload": {
+      "types": "./components/file-upload/index.d.ts",
+      "default": "./components/file-upload/index.js"
+    },
     "./components/grid": {
       "types": "./components/grid/index.d.ts",
       "default": "./components/grid/index.js"