@via-profit/ui-kit 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -820,6 +820,46 @@
       "import": "./esm/NoSSR/index.js",
       "require": "./NoSSR/index.js"
     },
+    "./Pagination/PaginationContainer": {
+      "types": "./Pagination/PaginationContainer.d.ts",
+      "import": "./esm/Pagination/PaginationContainer.js",
+      "require": "./Pagination/PaginationContainer.js"
+    },
+    "./Pagination/PaginationGap": {
+      "types": "./Pagination/PaginationGap.d.ts",
+      "import": "./esm/Pagination/PaginationGap.js",
+      "require": "./Pagination/PaginationGap.js"
+    },
+    "./Pagination/PaginationIcons": {
+      "types": "./Pagination/PaginationIcons.d.ts",
+      "import": "./esm/Pagination/PaginationIcons.js",
+      "require": "./Pagination/PaginationIcons.js"
+    },
+    "./Pagination/PaginationItem": {
+      "types": "./Pagination/PaginationItem.d.ts",
+      "import": "./esm/Pagination/PaginationItem.js",
+      "require": "./Pagination/PaginationItem.js"
+    },
+    "./Pagination/getPaginationItems": {
+      "types": "./Pagination/getPaginationItems.d.ts",
+      "import": "./esm/Pagination/getPaginationItems.js",
+      "require": "./Pagination/getPaginationItems.js"
+    },
+    "./Pagination/index": {
+      "types": "./Pagination/index.d.ts",
+      "import": "./esm/Pagination/index.js",
+      "require": "./Pagination/index.js"
+    },
+    "./Pagination": {
+      "types": "./Pagination/index.d.ts",
+      "import": "./esm/Pagination/index.js",
+      "require": "./Pagination/index.js"
+    },
+    "./Pagination/usePagination": {
+      "types": "./Pagination/usePagination.d.ts",
+      "import": "./esm/Pagination/usePagination.js",
+      "require": "./Pagination/usePagination.js"
+    },
     "./PhoneField/CountryFlagComponent": {
       "types": "./PhoneField/CountryFlagComponent.d.ts",
       "import": "./esm/PhoneField/CountryFlagComponent.js",
@@ -1375,11 +1415,6 @@
       "import": "./esm/TextField/index.js",
       "require": "./TextField/index.js"
     },
-    "./ThemeProvider/components": {
-      "types": "./ThemeProvider/components.d.ts",
-      "import": "./esm/ThemeProvider/components.js",
-      "require": "./ThemeProvider/components.js"
-    },
     "./ThemeProvider/createTheme": {
       "types": "./ThemeProvider/createTheme.d.ts",
       "import": "./esm/ThemeProvider/createTheme.js",
@@ -1400,11 +1435,6 @@
       "import": "./esm/ThemeProvider/tokens.js",
       "require": "./ThemeProvider/tokens.js"
     },
-    "./ThemeProvider/useThemeProps": {
-      "types": "./ThemeProvider/useThemeProps.d.ts",
-      "import": "./esm/ThemeProvider/useThemeProps.js",
-      "require": "./ThemeProvider/useThemeProps.js"
-    },
     "./Toast/ToastAction": {
       "types": "./Toast/ToastAction.d.ts",
       "import": "./esm/Toast/ToastAction.js",
@@ -1575,6 +1605,11 @@
       "import": "./esm/utils/TabManager.js",
       "require": "./utils/TabManager.js"
     },
+    "./utils/getElementRef": {
+      "types": "./utils/getElementRef.d.ts",
+      "import": "./esm/utils/getElementRef.js",
+      "require": "./utils/getElementRef.js"
+    },
     "./utils/spacing": {
       "types": "./utils/spacing.d.ts",
       "import": "./esm/utils/spacing.js",

package/utils/getElementRef.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Returns the ref of the element.
+ * React 19 keeps the ref in props and warns when `element.ref` is read,
+ * React 18 keeps it outside of props
+ */
+declare const getElementRef: <T>(element: React.ReactElement) => React.Ref<T> | undefined;
+export default getElementRef;

package/utils/getElementRef.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+/**
+ * Returns the ref of the element.
+ * React 19 keeps the ref in props and warns when `element.ref` is read,
+ * React 18 keeps it outside of props
+ */
+const getElementRef = (element) => {
+    if (parseInt(react_1.default.version, 10) >= 19) {
+        return element.props.ref;
+    }
+    return element.ref;
+};
+exports.default = getElementRef;

package/ThemeProvider/components.d.ts

@@ -1,79 +0,0 @@
-import type { AccordionProps, AccordionOverrides } from '../Accordion';
-import type { AvatarProps } from '../Avatar';
-import type { AvatarBaseOverrides } from '../Avatar/AvatarBase';
-import type { BadgeProps } from '../Badge';
-import type { BadgeBaseOverrides } from '../Badge/BadgeBase';
-import type { ButtonProps } from '../Button';
-import type { ButtonBaseOverrides } from '../Button/ButtonBase';
-import type { CalendarProps, CalendarOverrides } from '../Calendar/CalendarComponent';
-import type { CheckboxProps, CheckboxOverrides } from '../Checkbox';
-import type { HighlightedProps, HighlightedOverrides } from '../Highlighted';
-import type { MenuProps, MenuOverrides } from '../Menu/MenuContainer';
-import type { BaseModalProps, BaseModalOverrides } from '../Modal/BaseModal';
-import type { DialogProps } from '../Modal/Dialog';
-import type { DrawerProps, DrawerOverrides } from '../Modal/Drawer';
-import type { ConfirmBoxProps, ConfirmBoxOverrides } from '../Modal/ConfirmBox';
-import type { MessageBoxProps, MessageBoxOverrides } from '../Modal/MessageBox';
-import type { PopperProps, PopperOverrides } from '../Popper/Popper';
-import type { RadioProps, RadioOverrides } from '../Radio';
-import type { RadioGroupProps, RadioGroupOverrides } from '../RadioGroup';
-import type { SelectboxProps, SelectboxOverrides } from '../Selectbox';
-import type { SliderProps, SliderOverrides } from '../Slider';
-import type { SurfaceProps, SurfaceOverrides } from '../Surface';
-import type { SwiperProps, SwiperOverrides } from '../Swiper/Swiper';
-import type { SwitchProps, SwitchOverrides } from '../Switch';
-import type { TabsProps } from '../Tabs';
-import type { TextAreaProps, TextAreaOverrides } from '../TextArea';
-import type { TextFieldProps, TextFieldOverrides } from '../TextField';
-import type { ToastContainerProps, ToastOverrides } from '../Toast/ToastContainer';
-import type { TooltipProps, TooltipOverrides } from '../Tooltip';
-export interface ThemeComponentConfig<Props, Overrides = {}> {
-    /**
-     * The props the component gets when they are not passed explicitly
-     */
-    readonly defaultProps?: Partial<Omit<Props, 'overrides' | 'children'>>;
-    /**
-     * The parts that replace the standard ones, usually `styled(StandardPart)`.
-     * The `overrides` of the component instance win over them
-     */
-    readonly overrides?: Overrides;
-}
-/**
- * The look of the components in the theme, by the component name
- */
-export interface UIThemeComponents {
-    readonly Accordion?: ThemeComponentConfig<AccordionProps, AccordionOverrides>;
-    readonly Avatar?: ThemeComponentConfig<AvatarProps, AvatarBaseOverrides>;
-    readonly Badge?: ThemeComponentConfig<BadgeProps, BadgeBaseOverrides>;
-    readonly Button?: ThemeComponentConfig<ButtonProps, ButtonBaseOverrides>;
-    readonly Calendar?: ThemeComponentConfig<CalendarProps<any>, CalendarOverrides>;
-    readonly Checkbox?: ThemeComponentConfig<CheckboxProps, CheckboxOverrides>;
-    readonly Highlighted?: ThemeComponentConfig<HighlightedProps, HighlightedOverrides>;
-    readonly Menu?: ThemeComponentConfig<MenuProps<any, any>, MenuOverrides>;
-    /**
-     * The parts of the base modal window. Dialog, Drawer, ConfirmBox and MessageBox pass their own parts:
-     * set them in the config of these components
-     */
-    readonly Modal?: ThemeComponentConfig<BaseModalProps, BaseModalOverrides>;
-    readonly Dialog?: ThemeComponentConfig<DialogProps, BaseModalOverrides>;
-    readonly Drawer?: ThemeComponentConfig<DrawerProps, DrawerOverrides>;
-    readonly ConfirmBox?: ThemeComponentConfig<ConfirmBoxProps, ConfirmBoxOverrides>;
-    readonly MessageBox?: ThemeComponentConfig<MessageBoxProps, MessageBoxOverrides>;
-    readonly Popper?: ThemeComponentConfig<PopperProps, PopperOverrides>;
-    readonly Radio?: ThemeComponentConfig<RadioProps, RadioOverrides>;
-    readonly RadioGroup?: ThemeComponentConfig<RadioGroupProps, RadioGroupOverrides>;
-    readonly Selectbox?: ThemeComponentConfig<SelectboxProps<any, any>, SelectboxOverrides>;
-    readonly Slider?: ThemeComponentConfig<SliderProps<any>, SliderOverrides>;
-    readonly Surface?: ThemeComponentConfig<SurfaceProps, SurfaceOverrides>;
-    readonly Swiper?: ThemeComponentConfig<SwiperProps, SwiperOverrides>;
-    readonly Switch?: ThemeComponentConfig<SwitchProps, SwitchOverrides>;
-    /**
-     * The parts of the tabs are rendered by the user, so the theme sets only the `defaultProps`
-     */
-    readonly Tabs?: ThemeComponentConfig<TabsProps>;
-    readonly TextArea?: ThemeComponentConfig<TextAreaProps, TextAreaOverrides>;
-    readonly TextField?: ThemeComponentConfig<TextFieldProps, TextFieldOverrides>;
-    readonly Toast?: ThemeComponentConfig<ToastContainerProps, ToastOverrides>;
-    readonly Tooltip?: ThemeComponentConfig<TooltipProps, TooltipOverrides>;
-}
-export type ThemeComponentName = keyof UIThemeComponents;

package/ThemeProvider/components.js

@@ -1,3 +0,0 @@
-"use strict";
-/* eslint-disable import/max-dependencies */
-Object.defineProperty(exports, "__esModule", { value: true });

package/ThemeProvider/useThemeProps.d.ts

@@ -1,7 +0,0 @@
-import type { ThemeComponentName } from './components';
-/**
- * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
- * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
- */
-declare const useThemeProps: <P extends object>(name: ThemeComponentName, props: P) => P;
-export default useThemeProps;

package/ThemeProvider/useThemeProps.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@emotion/react");
-/**
- * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
- * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
- */
-const useThemeProps = (name, props) => {
-    var _a;
-    const theme = (0, react_2.useTheme)();
-    const config = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name];
-    const defaultProps = config === null || config === void 0 ? void 0 : config.defaultProps;
-    const themeOverrides = config === null || config === void 0 ? void 0 : config.overrides;
-    const { overrides } = props;
-    // A stable object: the components memoize the map of their parts by `overrides`
-    const mergedOverrides = react_1.default.useMemo(() => (themeOverrides ? Object.assign(Object.assign({}, themeOverrides), overrides) : overrides), [themeOverrides, overrides]);
-    if (!defaultProps && !themeOverrides) {
-        return props;
-    }
-    const merged = Object.assign(Object.assign({}, props), { overrides: mergedOverrides });
-    if (defaultProps) {
-        Object.entries(defaultProps).forEach(([key, value]) => {
-            if (typeof merged[key] === 'undefined') {
-                merged[key] = value;
-            }
-        });
-    }
-    return merged;
-};
-exports.default = useThemeProps;

package/esm/ThemeProvider/components.js

@@ -1,2 +0,0 @@
-/* eslint-disable import/max-dependencies */
-export {};

package/esm/ThemeProvider/useThemeProps.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { useTheme } from '@emotion/react';
-/**
- * Adds the `defaultProps` and the `overrides` of the theme to the props of the component.
- * The props passed explicitly win over `defaultProps`, the `overrides` of the instance win over the theme ones
- */
-const useThemeProps = (name, props) => {
-    var _a;
-    const theme = useTheme();
-    const config = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name];
-    const defaultProps = config === null || config === void 0 ? void 0 : config.defaultProps;
-    const themeOverrides = config === null || config === void 0 ? void 0 : config.overrides;
-    const { overrides } = props;
-    // A stable object: the components memoize the map of their parts by `overrides`
-    const mergedOverrides = React.useMemo(() => (themeOverrides ? Object.assign(Object.assign({}, themeOverrides), overrides) : overrides), [themeOverrides, overrides]);
-    if (!defaultProps && !themeOverrides) {
-        return props;
-    }
-    const merged = Object.assign(Object.assign({}, props), { overrides: mergedOverrides });
-    if (defaultProps) {
-        Object.entries(defaultProps).forEach(([key, value]) => {
-            if (typeof merged[key] === 'undefined') {
-                merged[key] = value;
-            }
-        });
-    }
-    return merged;
-};
-export default useThemeProps;