@uxf/ui 11.91.0 → 11.92.0

package/_private-utils/get-provider-config.d.ts

@@ -1,2 +1,3 @@
 import { UiContextType } from "../context";
+export declare const tFunction: import("@uxf/core-react/translations/types").TranslationFunction<string>;
 export declare const getProviderConfig: () => UiContextType;

package/_private-utils/get-provider-config.js

@@ -1,9 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getProviderConfig = void 0;
+exports.getProviderConfig = exports.tFunction = void 0;
+const create_default_t_1 = require("@uxf/core-react/translations/create-default-t");
+const cs_json_1 = __importDefault(require("@uxf/ui/translations/cs.json"));
 const color_scheme_1 = require("../color-scheme");
 const icons_1 = require("../config/icons");
 const tw_screens_1 = require("../tw-tokens/tw-screens");
+exports.tFunction = (0, create_default_t_1.createDefaultT)(cs_json_1.default);
 const getProviderConfig = () => ({
     colorScheme: {
         ...color_scheme_1.COLOR_SCHEME_DEFAULTS,
@@ -12,8 +18,12 @@ const getProviderConfig = () => ({
     },
     domain: "https://localhost:6006",
     icon: { spriteFilePath: "/icons-generated/_icon-sprite.svg", iconsConfig: icons_1.ICONS },
+    localeConfig: {
+        locale: "cs",
+    },
     rasterImage: {
         breakpoints: tw_screens_1.twScreens,
     },
+    translationFn: exports.tFunction,
 });
 exports.getProviderConfig = getProviderConfig;

package/calendar/calendar.js

@@ -33,25 +33,22 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Calendar = void 0;
 const cx_1 = require("@uxf/core/utils/cx");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const calendar_day_cell_1 = require("./calendar-day-cell");
 exports.Calendar = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c, _d, _e, _f;
     const calendarClassName = (0, cx_1.cx)("uxf-calendar", props.className);
     const { days, weekdayLabels } = (0, use_month_1.useMonth)({
-        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        dayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("D"),
         firstDayOfWeek: props.datePickerProps.firstDayOfWeek,
         month: (_c = (_a = props.month) !== null && _a !== void 0 ? _a : (_b = props.datePickerProps.activeMonths.at(0)) === null || _b === void 0 ? void 0 : _b.month) !== null && _c !== void 0 ? _c : new Date().getMonth(),
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM YYYY"),
-        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM YYYY"),
+        weekdayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("dd"),
         year: (_f = (_d = props.year) !== null && _d !== void 0 ? _d : (_e = props.datePickerProps.activeMonths.at(0)) === null || _e === void 0 ? void 0 : _e.year) !== null && _f !== void 0 ? _f : new Date().getFullYear(),
     });
     return (react_1.default.createElement("div", { className: calendarClassName, ref: ref },

package/color-scheme/color-scheme-defaults.d.ts

@@ -1,8 +1,3 @@
-import { ColorScheme } from "../types";
-export declare const COLOR_SCHEME_DEFAULTS: {
-    readonly defaultColorScheme: "light";
-    readonly getUserSettings: () => ColorScheme | null;
-    readonly respectSystemSetting: true;
-    readonly respectUserSettings: true;
-    readonly setUserSettings: (colorScheme: ColorScheme) => void;
-};
+import { type ColorSchemeOptions } from "./use-handle-color-scheme";
+export declare const COLOR_SCHEME_DEFAULTS: Required<ColorSchemeOptions>;
+export declare const COLOR_SCHEME_DEFAULTS_DISABLE_DARK_MODE: Required<ColorSchemeOptions>;

package/color-scheme/color-scheme-defaults.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.COLOR_SCHEME_DEFAULTS = void 0;
+exports.COLOR_SCHEME_DEFAULTS_DISABLE_DARK_MODE = exports.COLOR_SCHEME_DEFAULTS = void 0;
 exports.COLOR_SCHEME_DEFAULTS = {
     defaultColorScheme: "light",
     getUserSettings: () => localStorage.getItem("theme"),
@@ -8,3 +8,10 @@ exports.COLOR_SCHEME_DEFAULTS = {
     respectUserSettings: true,
     setUserSettings: (colorScheme) => localStorage.setItem("theme", colorScheme),
 };
+exports.COLOR_SCHEME_DEFAULTS_DISABLE_DARK_MODE = {
+    defaultColorScheme: "light",
+    getUserSettings: () => localStorage.getItem("theme"),
+    respectSystemSetting: false,
+    respectUserSettings: false,
+    setUserSettings: (colorScheme) => localStorage.setItem("theme", colorScheme),
+};

package/context/context.d.ts

@@ -1,17 +1,25 @@
+import { TranslationFunction } from "@uxf/core-react/translations/types";
 import { ColorSchemeOptions } from "../color-scheme/use-handle-color-scheme";
 import { IconName } from "../icon/types";
+export type IconOptions = {
+    spriteFilePath: string;
+    iconsConfig: Record<IconName, {
+        w: number;
+        h: number;
+    }>;
+};
+export type LocaleConfig = {
+    locale: string;
+};
+export type RasterImageOptions = {
+    breakpoints: Partial<Record<string, string>>;
+};
 export type UiContextType = {
     colorScheme: ColorSchemeOptions;
     domain: string;
-    icon: {
-        spriteFilePath: string;
-        iconsConfig: Record<IconName, {
-            w: number;
-            h: number;
-        }>;
-    };
-    rasterImage: {
-        breakpoints: Partial<Record<string, string>>;
-    };
+    icon: IconOptions;
+    localeConfig: LocaleConfig;
+    rasterImage: RasterImageOptions;
+    translationFn: TranslationFunction<string>;
 };
 export declare const UiContext: import("react").Context<UiContextType | undefined>;

package/context/provider.js

@@ -4,17 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UiContextProvider = void 0;
+const translations_1 = require("@uxf/core-react/translations");
+const context_1 = require("@uxf/localize/src/context/context");
 const dayjs_1 = require("dayjs");
 const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
 const localizedFormat_1 = __importDefault(require("dayjs/plugin/localizedFormat"));
 const react_1 = __importDefault(require("react"));
 const use_handle_color_scheme_1 = require("../color-scheme/use-handle-color-scheme");
-const context_1 = require("./context");
+const context_2 = require("./context");
 (0, dayjs_1.extend)(localizedFormat_1.default);
 (0, dayjs_1.extend)(customParseFormat_1.default);
 const UiContextProvider = (props) => {
     (0, use_handle_color_scheme_1.useHandleColorScheme)(props.value.colorScheme);
-    return react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children);
+    (0, dayjs_1.locale)(props.value.localeConfig.locale);
+    return (react_1.default.createElement(translations_1.TranslationsProvider, { value: props.value.translationFn },
+        react_1.default.createElement(context_1._LocalizeProvider, { value: props.value.localeConfig.locale },
+            react_1.default.createElement(context_2.UiContext.Provider, { value: props.value }, props.children))));
 };
 exports.UiContextProvider = UiContextProvider;
 exports.UiContextProvider.displayName = "UxfUiContextProvider";

package/context/use-ui-context-memoized-value.d.ts

@@ -0,0 +1,15 @@
+import { TranslationFunction } from "@uxf/core-react/translations/types";
+import { ColorSchemeOptions } from "../color-scheme/use-handle-color-scheme";
+import { IconOptions, LocaleConfig, RasterImageOptions, UiContextType } from "./context";
+interface Props {
+    colorScheme?: {
+        isDarkModeDisabled: true;
+    } | ColorSchemeOptions;
+    domain: string;
+    icon: IconOptions;
+    localeConfig: LocaleConfig;
+    rasterImage: RasterImageOptions;
+    translationFn: TranslationFunction<string>;
+}
+export declare function useUiContextMemoizedValue(props: Props): UiContextType;
+export {};

package/context/use-ui-context-memoized-value.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUiContextMemoizedValue = useUiContextMemoizedValue;
+const stable_stringify_1 = require("@uxf/core/utils/stable-stringify");
+const react_1 = require("react");
+const color_scheme_1 = require("../color-scheme");
+const color_scheme_defaults_1 = require("../color-scheme/color-scheme-defaults");
+function useUiContextMemoizedValue(props) {
+    return (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return ({
+            colorScheme: props.colorScheme && "isDarkModeDisabled" in props.colorScheme
+                ? color_scheme_defaults_1.COLOR_SCHEME_DEFAULTS_DISABLE_DARK_MODE
+                : {
+                    defaultColorScheme: (_b = (_a = props.colorScheme) === null || _a === void 0 ? void 0 : _a.defaultColorScheme) !== null && _b !== void 0 ? _b : color_scheme_1.COLOR_SCHEME_DEFAULTS.defaultColorScheme,
+                    getUserSettings: (_d = (_c = props.colorScheme) === null || _c === void 0 ? void 0 : _c.getUserSettings) !== null && _d !== void 0 ? _d : color_scheme_1.COLOR_SCHEME_DEFAULTS.getUserSettings,
+                    respectSystemSetting: (_f = (_e = props.colorScheme) === null || _e === void 0 ? void 0 : _e.respectSystemSetting) !== null && _f !== void 0 ? _f : color_scheme_1.COLOR_SCHEME_DEFAULTS.respectSystemSetting,
+                    respectUserSettings: (_h = (_g = props.colorScheme) === null || _g === void 0 ? void 0 : _g.respectUserSettings) !== null && _h !== void 0 ? _h : color_scheme_1.COLOR_SCHEME_DEFAULTS.respectUserSettings,
+                    setUserSettings: (_k = (_j = props.colorScheme) === null || _j === void 0 ? void 0 : _j.setUserSettings) !== null && _k !== void 0 ? _k : color_scheme_1.COLOR_SCHEME_DEFAULTS.setUserSettings,
+                },
+            domain: props.domain,
+            icon: props.icon,
+            localeConfig: props.localeConfig,
+            rasterImage: props.rasterImage,
+            translationFn: props.translationFn,
+        });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [(0, stable_stringify_1.stableStringify)(props)]);
+}

package/date-picker/date-picker-decade.js

@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerDecade = void 0;
 const translations_1 = require("@uxf/core-react/translations");
@@ -43,7 +40,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const use_decade_1 = require("@uxf/datepicker/hooks/use-decade");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DatePickerDecade = (0, react_1.memo)((props) => {
@@ -56,8 +53,8 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
     const { years } = (0, use_decade_1.useDecade)({
         year: currentYear,
     });
-    const canGoToPrevDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).subtract(5, "years").toDate());
-    const canGoToNextDecade = canGoToYear((0, dayjs_1.default)(new Date(currentYear, 0)).add(5, "years").toDate());
+    const canGoToPrevDecade = canGoToYear((0, date_1.dayjsTz)(new Date(currentYear, 0)).subtract(5, "years").toDate());
+    const canGoToNextDecade = canGoToYear((0, date_1.dayjsTz)(new Date(currentYear, 0)).add(5, "years").toDate());
     const handleGoToPrevDecadeClick = (0, react_1.useCallback)(() => {
         if (canGoToPrevDecade) {
             goToPrevYear(9);
@@ -74,10 +71,10 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
         }
     }, [canGoToYear, onYearSelect]);
     const { monthLabel } = (0, use_month_1.useMonth)({
-        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        dayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("D"),
         firstDayOfWeek,
         month: currentMonth,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
         year: currentYear,
     });
     const handleSetMonthViewMode = (0, react_1.useCallback)(() => props.setViewMode("year"), [props]);
@@ -96,6 +93,7 @@ exports.DatePickerDecade = (0, react_1.memo)((props) => {
                 children: currentYear,
                 isDisabled: true,
             } }),
-        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(year.date).year() === (0, dayjs_1.default)(selectedDate).year() && "uxf-calendar__cell--selected"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
+        react_1.default.createElement("div", { className: "uxf-calendar__decade" }, years.map((year) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-year", !canGoToYear(year.date) && classes_1.CLASSES.IS_DISABLED, (0, date_1.dayjsTz)(year.date).year() === (0, date_1.dayjsTz)(selectedDate).year() &&
+                "uxf-calendar__cell--selected"), key: year.yearLabel, onClick: handleSelectYear(year.date), type: "button" }, year.yearLabel))))));
 });
 exports.DatePickerDecade.displayName = "UxfUiDatePickerDecade";

package/date-picker/date-picker-month.js

@@ -32,15 +32,12 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerMonth = void 0;
 const translations_1 = require("@uxf/core-react/translations");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DatePickerMonth = (0, react_1.memo)((props) => {
@@ -53,11 +50,11 @@ exports.DatePickerMonth = (0, react_1.memo)((props) => {
     const currentMonth = (_b = (_a = activeMonths.at(0)) === null || _a === void 0 ? void 0 : _a.month) !== null && _b !== void 0 ? _b : new Date().getMonth();
     const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
     const { monthLabel } = (0, use_month_1.useMonth)({
-        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        dayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("D"),
         firstDayOfWeek,
         month: currentMonth,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
-        weekdayLabelFormat: (date) => (0, dayjs_1.default)(date).format("dd"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
+        weekdayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("dd"),
         year: currentYear,
     });
     const handleGoToPrevMonth = (0, react_1.useCallback)(() => {

package/date-picker/date-picker-year.js

@@ -32,9 +32,6 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePickerYear = void 0;
 const translations_1 = require("@uxf/core-react/translations");
@@ -43,7 +40,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const date_picker_context_1 = require("@uxf/datepicker/contexts/date-picker-context");
 const use_month_1 = require("@uxf/datepicker/hooks/use-month");
 const use_year_1 = require("@uxf/datepicker/hooks/use-year");
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const calendar_1 = require("../calendar");
 exports.DatePickerYear = (0, react_1.memo)((props) => {
@@ -54,14 +51,14 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
     const currentYear = (_d = (_c = activeMonths.at(0)) === null || _c === void 0 ? void 0 : _c.year) !== null && _d !== void 0 ? _d : new Date().getFullYear();
     const { months, yearLabel } = (0, use_year_1.useYear)({
         year: currentYear,
-        yearLabelFormat: (date) => (0, dayjs_1.default)(date).format("YYYY"),
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        yearLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("YYYY"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
     });
     const { monthLabel } = (0, use_month_1.useMonth)({
-        dayLabelFormat: (date) => (0, dayjs_1.default)(date).format("D"),
+        dayLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("D"),
         firstDayOfWeek,
         month: currentMonth,
-        monthLabelFormat: (date) => (0, dayjs_1.default)(date).format("MMMM"),
+        monthLabelFormat: (date) => (0, date_1.dayjsTz)(date).format("MMMM"),
         year: currentYear,
     });
     const handleGoToNextYear = (0, react_1.useCallback)(() => {
@@ -99,8 +96,8 @@ exports.DatePickerYear = (0, react_1.memo)((props) => {
                 onClick: handleYearClick,
                 title: (_k = (_j = props.customButtonTitles) === null || _j === void 0 ? void 0 : _j.selectYear) !== null && _k !== void 0 ? _k : t("uxf-ui-date-picker:select-year"),
             } }),
-        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, dayjs_1.default)(month.date).month() === (0, dayjs_1.default)(selectedDate).month() &&
-                (0, dayjs_1.default)(month.date).year() === (0, dayjs_1.default)(selectedDate).year() &&
+        react_1.default.createElement("div", { className: "uxf-calendar__year" }, months.map((month, index) => (react_1.default.createElement("button", { className: (0, cx_1.cx)("uxf-calendar__cell uxf-calendar__cell-month", !canGoToMonth(month.date) && classes_1.CLASSES.IS_DISABLED, (0, date_1.dayjsTz)(month.date).month() === (0, date_1.dayjsTz)(selectedDate).month() &&
+                (0, date_1.dayjsTz)(month.date).year() === (0, date_1.dayjsTz)(selectedDate).year() &&
                 "uxf-calendar__cell--selected"), key: month.monthLabel + index, onClick: handleMonthClick(month.date), type: "button" }, month.monthLabel))))));
 });
 exports.DatePickerYear.displayName = "UxfUiDatePickerYear";

package/date-picker/date-picker.stories.js

@@ -32,16 +32,13 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
-const dayjs_1 = __importDefault(require("dayjs"));
+const date_1 = require("@uxf/localize/src/date");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const date_picker_1 = require("./date-picker");
-const today = (0, dayjs_1.default)();
+const today = (0, date_1.dayjsTz)();
 const unavailableDates = [
     today.toDate(),
     today.add(5, "days").toDate(),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.91.0",
+    "version": "11.92.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -25,7 +25,8 @@
         "@headlessui/react": "1.7.19",
         "@uxf/core": "11.91.0",
         "@uxf/core-react": "11.91.0",
-        "@uxf/datepicker": "11.90.0",
+        "@uxf/datepicker": "11.92.0",
+        "@uxf/localize": "11.90.0",
         "@uxf/styles": "11.91.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.19",