@antscorp/antsomi-ui 1.3.3-beta.80 → 1.3.3-beta.82

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.js

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+export const StyledPeopleAccessRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    margin-bottom: 12px;
+    font-weight: bold;
+  }
+
+  .antsomi-list {
+    border: 1px solid #e6e6e6;
+
+    .antsomi-list-items {
+      padding: 0;
+
+      .antsomi-list-item {
+        padding: 8px;
+        border: none;
+
+        .info {
+          flex: 1;
+          margin-left: 15px;
+
+          .name {
+            font-weight: bold;
+          }
+
+          .email {
+            color: #595959;
+          }
+        }
+
+        .role-actions {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+`;

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ShareAccessProps } from '../../types';
+type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo'>;
+export declare const SearchUser: (props: SearchUserProps) => React.JSX.Element | null;
+export {};

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.js

@@ -0,0 +1,73 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useEffect, useState } from 'react';
+import { Avatar, Select } from 'antd';
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
+import { StyledSearchUserRoot, StyledSelectItem } from './styled';
+import { isEmail } from '@antscorp/antsomi-ui/es/utils';
+import { useShareAccess } from '../../hooks';
+import produce from 'immer';
+import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
+import { updateObjAccessInfo } from '../../actions';
+export const SearchUser = (props) => {
+    const { getUserInfo } = props;
+    const { state, dispatch } = useShareAccess();
+    const { accessInfo, allowEdit } = state;
+    const [users, setUsers] = useState([]);
+    const [isFetching, setIsFetching] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const debounceSearchTerm = useDebounce(searchTerm, 700);
+    useEffect(() => {
+        if (!isEmail(debounceSearchTerm) || !getUserInfo)
+            return;
+        const controller = new AbortController();
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                setIsFetching(true);
+                const data = yield getUserInfo(debounceSearchTerm, controller.signal);
+                setUsers(data);
+            }
+            catch (error) {
+                setUsers([]);
+            }
+            finally {
+                setIsFetching(false);
+            }
+        }))();
+        return () => {
+            controller.abort();
+        };
+    }, [debounceSearchTerm, getUserInfo]);
+    const handleAddUser = (user) => {
+        if (!accessInfo || !dispatch || !allowEdit)
+            return;
+        setSearchTerm('');
+        const existed = accessInfo.listAccess.some(access => access.userId === +user.user_id);
+        if (existed)
+            return;
+        const updated = produce(accessInfo, draft => {
+            const defaultViewerProps = ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.VIEWER];
+            const newUser = Object.assign({ userId: user.user_id, fullName: user.full_name, email: user.email, avatar: user.avatar }, defaultViewerProps);
+            draft.listAccess.push(newUser);
+        });
+        dispatch(updateObjAccessInfo(updated));
+    };
+    if (!allowEdit)
+        return null;
+    return (React.createElement(StyledSearchUserRoot, null,
+        React.createElement(Select, { showSearch: true, placeholder: "Add people and groups", value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
+                value: user.user_id,
+                label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
+                    React.createElement(Avatar, { src: user.avatar }),
+                    React.createElement("div", { className: "info" },
+                        React.createElement("div", { className: "name" }, user.user_name),
+                        React.createElement("div", { className: "email" }, user.email)))),
+            })) })));
+};

package/es/components/molecules/ShareAccess/components/SearchUser/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchUser';

package/es/components/molecules/ShareAccess/components/SearchUser/index.js

@@ -0,0 +1 @@
+export * from './SearchUser';

package/es/components/molecules/ShareAccess/components/SearchUser/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledSearchUserRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelectItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/ShareAccess/components/SearchUser/styled.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+export const StyledSearchUserRoot = styled.div `
+  width: 100%;
+
+  .antsomi-select {
+    width: 100%;
+  }
+`;
+export const StyledSelectItem = styled.div `
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 8px;
+
+  .info {
+    .name {
+      font-weight: bold;
+    }
+
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  :hover {
+    background-color: #f2f9ff;
+    cursor: pointer;
+  }
+`;

package/es/components/molecules/ShareAccess/components/index.d.ts

@@ -0,0 +1 @@
+export * from './LayoutContent';

package/es/components/molecules/ShareAccess/components/index.js

@@ -0,0 +1 @@
+export * from './LayoutContent';

package/es/components/molecules/ShareAccess/constants.d.ts

@@ -0,0 +1,67 @@
+import { AccessRole, UserAccessInfo } from './types';
+export declare const PUBLIC_ROLE: {
+    ONLY_EDITOR: number;
+    ONLY_VIEWER: number;
+};
+export declare const GENERAL_ACCESS: {
+    readonly PUBLIC: 1;
+    readonly RESTRICTED: 0;
+};
+export declare const ROLE_MAPPING: {
+    readonly OWNER: 1;
+    readonly EDITOR: 2;
+    readonly VIEWER: 3;
+};
+export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment'>>;
+export declare const ROLE_ACCESS_LABEL: {
+    1: string;
+    2: string;
+    3: string;
+};
+export declare const PEOPLE_ACTION_KEYS: {
+    readonly TO_VIEWER: "to_viewer";
+    readonly TO_EDITOR: "to_editor";
+    readonly TO_OWNER: "to_owner";
+    readonly REMOVE_ACCESS: "remove_acess";
+};
+export declare const PEOPLE_ACTIONS: {
+    readonly to_viewer: {
+        readonly label: "Viewer";
+        readonly key: "to_viewer";
+    };
+    readonly to_editor: {
+        readonly label: "Editor";
+        readonly key: "to_editor";
+    };
+    readonly to_owner: {
+        readonly label: "Transfer ownership";
+        readonly key: "to_owner";
+    };
+    readonly remove_acess: {
+        readonly label: "Remove Access";
+        readonly key: "remove_acess";
+    };
+};
+export declare const PEOPLE_ACTIONS_BY_ROLE: {
+    readonly 1: readonly ["remove_acess"];
+};
+export declare const GENERAL_ACTION_KEYS: {
+    readonly RESTRICTED: "restricted";
+    readonly PUBLIC: "public";
+};
+export declare const GENERAL_ACTIONS: {
+    readonly public: {
+        readonly key: "public";
+        readonly label: "public";
+    };
+    readonly restricted: {
+        readonly key: "restricted";
+        readonly label: "Restricted";
+    };
+};
+export declare const MENU_PERMISSION: {
+    readonly NONE: 1;
+    readonly CREATED_BY_USER: 2;
+    readonly MANAGEMENT_BY_USER: 3;
+    readonly EVERYTHING: 4;
+};

package/es/components/molecules/ShareAccess/constants.js

@@ -0,0 +1,85 @@
+export const PUBLIC_ROLE = {
+    ONLY_EDITOR: 2,
+    ONLY_VIEWER: 3,
+};
+export const GENERAL_ACCESS = {
+    PUBLIC: 1,
+    RESTRICTED: 0,
+};
+export const ROLE_MAPPING = {
+    OWNER: 1,
+    EDITOR: 2,
+    VIEWER: 3,
+};
+export const ACCESS_PROPERTIES_BY_ROLE = {
+    [ROLE_MAPPING.OWNER]: {
+        role: ROLE_MAPPING.OWNER,
+        allowView: 1,
+        allowEdit: 1,
+        allowComment: 1,
+    },
+    [ROLE_MAPPING.EDITOR]: {
+        role: ROLE_MAPPING.EDITOR,
+        allowView: 1,
+        allowEdit: 1,
+        allowComment: 1,
+    },
+    [ROLE_MAPPING.VIEWER]: {
+        role: ROLE_MAPPING.VIEWER,
+        allowView: 1,
+        allowEdit: 0,
+        allowComment: 0,
+    },
+};
+export const ROLE_ACCESS_LABEL = {
+    [ROLE_MAPPING.OWNER]: 'Owner',
+    [ROLE_MAPPING.EDITOR]: 'Editor',
+    [ROLE_MAPPING.VIEWER]: 'Viewer',
+};
+export const PEOPLE_ACTION_KEYS = {
+    TO_VIEWER: 'to_viewer',
+    TO_EDITOR: 'to_editor',
+    TO_OWNER: 'to_owner',
+    REMOVE_ACCESS: 'remove_acess',
+};
+export const PEOPLE_ACTIONS = {
+    [PEOPLE_ACTION_KEYS.TO_VIEWER]: {
+        label: 'Viewer',
+        key: PEOPLE_ACTION_KEYS.TO_VIEWER,
+    },
+    [PEOPLE_ACTION_KEYS.TO_EDITOR]: {
+        label: 'Editor',
+        key: PEOPLE_ACTION_KEYS.TO_EDITOR,
+    },
+    [PEOPLE_ACTION_KEYS.TO_OWNER]: {
+        label: 'Transfer ownership',
+        key: PEOPLE_ACTION_KEYS.TO_OWNER,
+    },
+    [PEOPLE_ACTION_KEYS.REMOVE_ACCESS]: {
+        label: 'Remove Access',
+        key: PEOPLE_ACTION_KEYS.REMOVE_ACCESS,
+    },
+};
+export const PEOPLE_ACTIONS_BY_ROLE = {
+    [ROLE_MAPPING.OWNER]: [PEOPLE_ACTION_KEYS.REMOVE_ACCESS],
+};
+export const GENERAL_ACTION_KEYS = {
+    RESTRICTED: 'restricted',
+    PUBLIC: 'public',
+};
+export const GENERAL_ACTIONS = {
+    [GENERAL_ACTION_KEYS.PUBLIC]: {
+        key: GENERAL_ACTION_KEYS.PUBLIC,
+        label: 'public',
+    },
+    [GENERAL_ACTION_KEYS.RESTRICTED]: {
+        key: GENERAL_ACTION_KEYS.RESTRICTED,
+        label: 'Restricted',
+    },
+};
+export const MENU_PERMISSION = {
+    NONE: 1,
+    CREATED_BY_USER: 2,
+    MANAGEMENT_BY_USER: 3,
+    EVERYTHING: 4,
+};

package/es/components/molecules/ShareAccess/context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ShareAccessAction, ShareAccessState } from './types';
+export declare const ShareAccessStateContext: React.Context<ShareAccessState | null>;
+export declare const ShareAccessDispatchContext: React.Context<React.Dispatch<ShareAccessAction> | null>;

package/es/components/molecules/ShareAccess/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const ShareAccessStateContext = createContext(null);
+export const ShareAccessDispatchContext = createContext(null);

package/es/components/molecules/ShareAccess/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useShareAccess';

package/es/components/molecules/ShareAccess/hooks/index.js

@@ -0,0 +1 @@
+export * from './useShareAccess';

package/es/components/molecules/ShareAccess/hooks/useShareAccess.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const useShareAccess: () => {
+    state: {
+        allowEdit: boolean;
+        allowView: boolean;
+        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessUserId?: number | undefined;
+        accessUserPermission?: {
+            view: number;
+            edit: number;
+        } | undefined;
+        modalTransferOwnership: {
+            open: boolean;
+            userToOwnerShipId: number;
+        };
+    };
+    dispatch: import("react").Dispatch<import("../types").ShareAccessAction> | null;
+};

package/es/components/molecules/ShareAccess/hooks/useShareAccess.js

@@ -0,0 +1,29 @@
+import { useContext, useMemo } from 'react';
+import { MENU_PERMISSION } from '../constants';
+import { ShareAccessDispatchContext, ShareAccessStateContext } from '../context';
+import { composeObjectMenuPermissions } from '../utils';
+export const useShareAccess = () => {
+    var _a, _b, _c, _d, _e;
+    const state = useContext(ShareAccessStateContext);
+    const dispatch = useContext(ShareAccessDispatchContext);
+    if (!state) {
+        throw new Error('useShareAccess must be used within a ShareAccessProvider');
+    }
+    const userAccess = useMemo(() => { var _a; return (_a = state.accessInfo) === null || _a === void 0 ? void 0 : _a.listAccess.find(access => access.userId === state.accessUserId); }, [state.accessUserId, (_a = state.accessInfo) === null || _a === void 0 ? void 0 : _a.listAccess]);
+    const { edit: allowEdit, view: allowView } = composeObjectMenuPermissions({
+        isPublic: !!((_b = state.accessInfo) === null || _b === void 0 ? void 0 : _b.isPublic),
+        publicRole: ((_c = state.accessInfo) === null || _c === void 0 ? void 0 : _c.publicRole) || null,
+        menuPermission: {
+            view: ((_d = state.accessUserPermission) === null || _d === void 0 ? void 0 : _d.view) || MENU_PERMISSION.NONE,
+            edit: ((_e = state.accessUserPermission) === null || _e === void 0 ? void 0 : _e.edit) || MENU_PERMISSION.NONE,
+        },
+        objectPermission: {
+            edit: !!(userAccess === null || userAccess === void 0 ? void 0 : userAccess.allowEdit),
+            view: !!(userAccess === null || userAccess === void 0 ? void 0 : userAccess.allowView),
+        },
+    });
+    return {
+        state: Object.assign(Object.assign({}, state), { allowEdit, allowView }),
+        dispatch,
+    };
+};

package/es/components/molecules/ShareAccess/index.d.ts

@@ -0,0 +1,4 @@
+import * as Constants from './constants';
+import * as Utils from './utils';
+export { ShareAccess } from './ShareAccess';
+export { Constants, Utils };

package/es/components/molecules/ShareAccess/index.js

@@ -0,0 +1,4 @@
+import * as Constants from './constants';
+import * as Utils from './utils';
+export { ShareAccess } from './ShareAccess';
+export { Constants, Utils };

package/es/components/molecules/ShareAccess/reducer.d.ts

@@ -0,0 +1,2 @@
+import { ShareAccessAction, ShareAccessProps, ShareAccessState } from './types';
+export declare const shareAccessReducer: (onChange: ShareAccessProps['onChange']) => (state: ShareAccessState, action: ShareAccessAction) => ShareAccessState;

package/es/components/molecules/ShareAccess/reducer.js

@@ -0,0 +1,19 @@
+import produce from 'immer';
+import { TYPES } from './actions';
+export const shareAccessReducer = (onChange) => (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
+            draft.accessInfo = action.payload;
+            if (onChange) {
+                onChange(action.payload);
+            }
+            break;
+        }
+        case TYPES.UPDATE_MODAL_TRANSTER_OWNERSHIP: {
+            draft.modalTransferOwnership = Object.assign(Object.assign({}, state.modalTransferOwnership), action.payload);
+            break;
+        }
+        default:
+            break;
+    }
+});

package/es/components/molecules/ShareAccess/types.d.ts

@@ -0,0 +1,54 @@
+import { updateModalTransferOwnership, updateObjAccessInfo } from './actions';
+export type UserInfo = {
+    avatar: string;
+    full_name: string;
+    email: string;
+    user_id: number;
+    user_name: string;
+    user_type: number;
+    ctime: Date;
+    utime: Date;
+};
+export type UserAccessInfo = {
+    userId: number;
+    fullName: string;
+    email: string;
+    avatar: string;
+    role: number;
+    allowView: number;
+    allowEdit: number;
+    allowComment: number;
+    [key: string]: any;
+};
+export type ObjectAccessInfo = {
+    isPublic: number;
+    publicRole: number | null;
+    ownerId: number;
+    listAccess: UserAccessInfo[];
+};
+export type ShareAccessProps = {
+    userId?: number;
+    userPermission?: {
+        edit: number;
+        view: number;
+    };
+    accessInfo?: ObjectAccessInfo;
+    allowChangeOnwership?: boolean;
+    getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
+    onChange?: (accessInfo: ObjectAccessInfo) => void;
+};
+export type ShareAccessState = {
+    accessInfo?: ObjectAccessInfo;
+    accessUserId?: number;
+    accessUserPermission?: {
+        view: number;
+        edit: number;
+    };
+    modalTransferOwnership: {
+        open: boolean;
+        userToOwnerShipId: number;
+    };
+};
+export type ShareAccessAction = ReturnType<typeof updateObjAccessInfo> | ReturnType<typeof updateModalTransferOwnership>;
+export type AccessRole = 1 | 2 | 3;
+export type GeneralAccess = 1 | 0;

package/es/components/molecules/ShareAccess/types.js

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

package/es/components/molecules/ShareAccess/utils.d.ts

@@ -0,0 +1,38 @@
+import { ObjectAccessInfo } from './types';
+export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
+export declare const composeObjectMenuPermissions: (params: {
+    isPublic: boolean;
+    publicRole: number | null;
+    objectPermission: {
+        edit: boolean;
+        view: boolean;
+    };
+    menuPermission: {
+        edit: number;
+        view: number;
+    };
+}) => {
+    edit: boolean;
+    view: boolean;
+};
+export declare const getActionsByUser: (args: {
+    userId?: number;
+    userPermission?: {
+        view: number;
+        edit: number;
+    };
+    updatedUserId?: number;
+    objectAccessInfo?: ObjectAccessInfo;
+}) => ({
+    readonly label: "Viewer";
+    readonly key: "to_viewer";
+} | {
+    readonly label: "Editor";
+    readonly key: "to_editor";
+} | {
+    readonly label: "Transfer ownership";
+    readonly key: "to_owner";
+} | {
+    readonly label: "Remove Access";
+    readonly key: "remove_acess";
+})[];

package/es/components/molecules/ShareAccess/utils.js

@@ -0,0 +1,57 @@
+import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_MAPPING, } from './constants';
+import { remove } from 'lodash';
+export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
+    const valueMapping = {
+        [`${MENU_PERMISSION.NONE}_false`]: false,
+        [`${MENU_PERMISSION.CREATED_BY_USER}_false`]: false,
+        [`${MENU_PERMISSION.MANAGEMENT_BY_USER}_false`]: false,
+        [`${MENU_PERMISSION.EVERYTHING}_false`]: true,
+        [`${MENU_PERMISSION.NONE}_true`]: false,
+        [`${MENU_PERMISSION.CREATED_BY_USER}_true`]: true,
+        [`${MENU_PERMISSION.MANAGEMENT_BY_USER}_true`]: true,
+        [`${MENU_PERMISSION.EVERYTHING}_true`]: true,
+    };
+    return !!valueMapping[`${menuPermissionValue}_${objectPermissionAllow}`];
+};
+export const composeObjectMenuPermissions = (params) => {
+    const { menuPermission, objectPermission, isPublic, publicRole } = params;
+    const edit = mergePermission(objectPermission.edit, menuPermission.edit);
+    const view = mergePermission(objectPermission.view, menuPermission.view);
+    return {
+        edit: edit || (isPublic && publicRole === PUBLIC_ROLE.ONLY_EDITOR),
+        view: view || (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER),
+    };
+};
+export const getActionsByUser = (args) => {
+    const { userId, userPermission, updatedUserId, objectAccessInfo } = args;
+    if (!userId || !updatedUserId || !objectAccessInfo)
+        return [];
+    const { ownerId, listAccess, publicRole, isPublic } = objectAccessInfo;
+    const user = listAccess.find(access => access.userId === userId);
+    const updatedUser = listAccess.find(access => access.userId === updatedUserId);
+    const { edit: allowEdit } = composeObjectMenuPermissions({
+        isPublic: !!isPublic,
+        publicRole,
+        objectPermission: {
+            view: !!(user === null || user === void 0 ? void 0 : user.allowView),
+            edit: !!(user === null || user === void 0 ? void 0 : user.allowEdit),
+        },
+        menuPermission: {
+            view: (userPermission === null || userPermission === void 0 ? void 0 : userPermission.view) || MENU_PERMISSION.NONE,
+            edit: (userPermission === null || userPermission === void 0 ? void 0 : userPermission.edit) || MENU_PERMISSION.NONE,
+        },
+    });
+    if ((!user && !isPublic) || !updatedUser || !allowEdit || updatedUser.userId === ownerId)
+        return [];
+    const actions = Object.values(PEOPLE_ACTION_KEYS);
+    if (userId !== ownerId) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_OWNER);
+    }
+    if (allowEdit && updatedUser.role === ROLE_MAPPING.EDITOR) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_EDITOR);
+    }
+    if (allowEdit && updatedUser.role === ROLE_MAPPING.VIEWER) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_VIEWER);
+    }
+    return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
+};

package/es/components/molecules/SliderWithInputNumber/index.d.ts

@@ -1,11 +1,11 @@
-import React, { CSSProperties } from 'react';
-import { SliderProps } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
-interface SliderWithInputNumberProps extends SliderProps {
-    precision?: number;
-    label?: React.ReactNode;
-    labelClassName?: string;
-    labelStyling?: Partial<CSSProperties>;
-    inputStyling?: Partial<CSSProperties>;
-}
-export declare const SliderWithInputNumber: React.FC<SliderWithInputNumberProps>;
-export {};
+import React, { CSSProperties } from 'react';
+import { SliderProps } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
+interface SliderWithInputNumberProps extends SliderProps {
+    precision?: number;
+    label?: React.ReactNode;
+    labelClassName?: string;
+    labelStyling?: Partial<CSSProperties>;
+    inputStyling?: Partial<CSSProperties>;
+}
+export declare const SliderWithInputNumber: React.FC<SliderWithInputNumberProps>;
+export {};