@antscorp/antsomi-ui 1.3.7-beta.68 → 1.3.7-beta.69

package/es/test.js

@@ -1,193 +1,111 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
-import { Button, RequiredLabel, } from './components';
+import { TemplateSaveAsModal, useTemplateSave, Button, Layout, } from './components';
+// Constants
+import { GET_LIST_TYPE, OBJECT_TYPES, PUBLIC_LEVEL } from './constants';
+// import { Slider } from 'antd';
 // Queries configs
-import { queryClientAntsomiUI, QueryClientProviderAntsomiUI } from './queries';
+import axios from 'axios';
+import { get } from 'lodash';
+import { MENU_PERMISSION } from './components/molecules/ShareAccess/constants';
+import { QueryClientProviderAntsomiUI, queryClientAntsomiUI } from './queries';
 import { ConfigProvider } from './providers';
 import { MatchesAnySelectTest } from './tests';
-import { AdvancedPicker } from './components/molecules/DatePicker/components/AdvancedPicker';
-export const BACKGROUND_COLOR_STYLE = {
-    SOLID: {
-        value: 'color',
-        label: 'Solid',
-    },
-    GRADIENT: {
-        value: 'gradient',
-        label: 'Gradient',
-    },
+const SHARE_ACCESS_DEFAULT_VALUE = {
+    ownerId: 1600085510,
+    isPublic: 1,
+    listAccess: [
+        {
+            userId: 1600085510,
+            role: 1,
+            email: 'vinlt@antsomi.com',
+            avatar: '//c0-platform.ants.tech/avatar/2023/05/04/b3rg0ye8oa.png',
+            fullName: 'Truong Vi',
+            allowEdit: 1,
+            allowView: 1,
+            allowComment: 1,
+        },
+        {
+            userId: 1600085513,
+            role: 2,
+            email: 'vinlt@antsomi.com',
+            avatar: '//c0-platform.ants.tech/avatar/2023/05/04/b3rg0ye8oa.png',
+            fullName: 'Truong Vi 2',
+            allowEdit: 0,
+            allowView: 0,
+            allowComment: 1,
+        },
+    ],
+    publicRole: null,
 };
-const DOMAIN_MEDIA_SANDBOX = 'https://sandbox-media-template.antsomi.com/cdp';
-export const customColors = [
-    '#f7da64',
-    '#8912dd',
-    '#ed1515',
-    '#230439',
-    '#d11a66',
-    '#ffbd64',
-    '#f1ab96',
-    '#824ccd',
-    '#5858e9',
-    '#57b8c2',
+const thumbnailPortrait = [
+    'https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg',
+    'https://images.unsplash.com/photo-1571423483570-eb27018d1ec0?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.creativefabrica.com/products/previews/2023/11/03/jG9YjMvHg/2XfoTnjLlEvPMgjGeu0VIDk96mr-desktop.jpg',
+];
+// const thumbnailPortrait = [];
+const thumbnailLandscape = [
+    'https://images.creativefabrica.com/products/previews/2023/10/27/mWT9IwQN7/2XL1J9SW0srS03MukpeIzEyg2Hb-desktop.jpg',
+    'https://thedaily.case.edu/wp-content/uploads/2023/06/underwater-view-1024x439.jpg',
+    'https://images.unsplash.com/photo-1502134249126-9f3755a50d78?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
 ];
+const thumbnails = [...thumbnailPortrait, ...thumbnailLandscape];
+const userId = 1600084823;
+const network_id = 33167;
+const token = '5474r2x214z294d4v284y4b4q4l5g406y2r2y2n4f5';
+const getUserInfos = async (email) => {
+    const type = 'search-user-info';
+    const res = await axios.get(`https://permission.antsomi.com/api/account/info?userId=${userId}&network_id=${network_id}&_token=${token}&_user_id=${userId}&_account_id=${userId}&_lang=en&type=${type}&email=${email}`, {
+        method: 'GET',
+    });
+    const data = get(res, 'data.data');
+    return data;
+};
 // Variables
 const appConfig = {
     env: 'sandbox',
     auth: {
         token: '5474r2x214z284d4w2b4y4h5a454p444m4h423u4z5t5',
         portalId: 33167,
-        userId: '1600083836',
-        accountId: '1600083836',
+        userId: '1600084695',
+        accountId: '1600084695',
     },
     languageCode: 'en',
 };
 /* Test Data Table */
 export const App = () => {
-    // const [valueShortlink, setValueShortlink] = useState('#{shortlink(https://test.com.vn)}');
-    const [valueShortlink, setValueShortlink] = useState('');
-    const [state, setState] = useState({
-        option: {
-            dateType: 'today',
-            calculationDate: 'years',
-            calculationType: 'minus',
-            value: 1,
+    const { categoryItems, templateItems, value: templateValue, onChange: onChangeTemplateValue, searchNameProps, form, errors, } = useTemplateSave({
+        service: {
+            url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
+            token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
+            userId: '1600080515',
+            accountId: '1600080515',
         },
-        date: '',
-        format: 'YYYYMMDD',
-    });
-    const [colorSettingState, setColorSettingState] = useState({
-        color: 'green',
-        customColors,
-    });
-    const [stateSlideBar, setStateSlideBar] = useState({
-        errors: [],
-        disabled: true,
-        prefix: 'Item',
-        isViewMode: false,
-        isShowAdd: true,
-        limit: {
-            min: 1,
-            max: 2,
+        config: {
+            getListType: GET_LIST_TYPE.OWNER,
+            objectType: OBJECT_TYPES.MEDIA_TEMPLATE,
+            publicLevel: PUBLIC_LEVEL.RESTRICTED,
+            limitListPerPage: 20,
+        },
+        defaultValue: {
+            accessInfo: SHARE_ACCESS_DEFAULT_VALUE,
+            saveOption: 'save-new',
         },
-        activeId: '1',
-        options: Array.from({ length: 5 }, (_, index) => ({
-            label: `Item ${index + 1}`,
-            value: `${index + 1}`,
-        })),
-        isShowLabelSequentially: false,
     });
-    const [radioValue, setRadioValue] = useState('color');
-    const [sliderValue, setSliderValue] = useState(10);
-    const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
-    const [icon, setIcon] = useState('');
-    // const {
-    //   categoryItems,
-    //   templateItems,
-    //   checkedCategories,
-    //   openCategoryKeys,
-    //   isLoadingCategoryList,
-    //   isLoadingTemplateList,
-    //   onLoadMore: onLoadMoreTemplates,
-    //   onChangeOpenCategoryKeys,
-    //   onChangeCheckedCategories,
-    //   onRemoveObjectTemplate,
-    // } = useTemplateListing({
-    //   serviceAuth: {
-    //     url: 'https://sandbox-media-template.antsomi.com/cdp/api/v1',
-    //     token: '5474r2x214z254a4u2a4y444m4j5p27444c4h4h4n5t5',
-    //     userId: '1600080515',
-    //     accountId: '1600080515',
-    //   },
-    //   config: {
-    //     getListType: GET_LIST_TYPE.OWNER,
-    //     objectType: 1,
-    //     publicLevel: 0,
-    //     limitListPerPage: 10,
-    //   },
-    //   checkedCategoriesDefault: {
-    //     device_type: [1, 2],
-    //     template_type: [1, 2, 3, 4, 5],
-    //   },
-    // });
-    const callbackColorSetting = (key, dataIn) => {
-        switch (key) {
-            case 'ON_ADD_NEW_PRESET':
-                // eslint-disable-next-line no-case-declarations
-                const { customColors = [] } = dataIn;
-                setColorSettingState(prev => ({
-                    ...prev,
-                    customColors,
-                }));
-                break;
-            case 'ON_EDIT_CLICKED': {
-                // eslint-disable-next-line no-console
-                console.log('insideee.dev - clicked edit preset :>');
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const handleChangeColorSetting = (colorOut) => {
-        setColorSettingState(prev => ({
-            ...prev,
-            color: colorOut,
-        }));
-    };
-    const handleChangeRadio = e => {
-        const { value = '' } = e.target;
-        setRadioValue(value);
-    };
-    const handleChangeSlider = value => {
-        setSliderValue(value);
-    };
-    const handleSetIcon = value => {
-        setIcon(value);
-    };
+    const [isOpenSaveTemplate, setIsOpenSaveTemplate] = useState(false);
     const callbackSlideBar = (type, data) => {
         console.log({ type, data });
     };
-    const d = {
-        loginDomain: 'https://iam.ants.tech/',
-    };
-    // const d = {
-    //   loginDomain: 'https://sandbox-aacm.ants.vn',
-    //   networkId: '76753',
-    //   theme: 'white',
-    //   u_ogs: 'uogs_sand_48956',
-    //   apiDomain: '//sandbox-permission.ants.vn',
-    // };
-    /* Login */
-    return (_jsx(AdvancedPicker, { timezone: "Australia/Brisbane", disableBeforeDate: "2024-09-05", format: "YYYY-MM-DD HH:mm:ss", valueType: "YEAR_MONTH_DAY_SECOND" }));
-    // return <Login {...d} />;
     /* MatchesAnySelect */
     return _jsx(MatchesAnySelectTest, {});
     /* Data Table */
-    return (_jsxs("div", { children: [_jsx(RequiredLabel, { children: "this is Required" }), "THIS IS TEST VITE BUILD", _jsx(Button, { children: "Click me" })] }));
+    return (_jsxs("div", { children: ["THIS IS TEST VITE BUILD", _jsx(Button, { children: "Click me" })] }));
     // return <DataTableTest />;
     // --------------------------- Test Layout 2.0 -------------------------------------------
-    // return (
-    //   <HeaderV2
-    //     accountSharingConfig={{ u_ogs: 'uogs', appCode: 'APP_CUSTOMER_360' }}
-    //     // useURLParam
-    //     helpConfig={{
-    //       configs: {
-    //         appCode: 'SANDBOX_MARKETING',
-    //         avatar: '//c0-platform.ants.tech/avatar/2021/09/17/0xgbkurioo.png',
-    //         config: {
-    //           p_timezone: 'Asia/Singapore',
-    //           api_pid: 33167,
-    //           p_f_longdatetime: "dd MMMM 'at' HH:mm:ss",
-    //           embeddedData: {},
-    //           INSIGHT_U_OGS: 'uogs',
-    //         },
-    //       },
-    //     }}
-    //   />
-    // );
-    // return <Layout leftMenuProps={{ objectId: 1, objectType: 'OVERVIEW', isGrouped: true }} />;
+    return _jsx(Layout, { leftMenuProps: { objectId: 1, objectType: 'OVERVIEW', isGrouped: true } });
     // --------------------------- Test SlideBar start -------------------------------------------
     // return (
     //   <div
@@ -221,224 +139,67 @@ export const App = () => {
     // );
     // --------------------------- Test SlideBar end -------------------------------------------
     // ----------------------------  Test Input Dynamic start ------------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       width: 500,
-    //       height: 500,
-    //       border: '1px solid black',
-    //       margin: '0 auto',
-    //       padding: 12,
-    //       borderRadius: '10px',
-    //     }}
-    //   >
-    //     <InputDynamic
-    //       errors={[]}
-    //       onChange={dataOut => setValueShortlink(dataOut)}
-    //       onError={() => {}}
-    //       isRealTime
-    //       isViewMode={false}
-    //       canMultipleLine={false}
-    //       value={valueShortlink}
-    //     />
-    //   </div>
-    // );
-    // ----------------------------  Test Input Dynamic End ------------------------------
-    // ----------------------------  Test Helps Start ------------------------------
-    // return (
-    //   <div style={{ display: 'flex', justifyContent: 'center', width: '100vw', height: '100vh' }}>
-    //     <Help />
-    //   </div>
-    // );
-    // ----------------------------  Test Helps End ------------------------------
-    // ------------------------ Media template components test start -------------------------
-    // return (
-    //   <ConfigProvider>
-    //     <div
-    //       style={{
-    //         width: 500,
-    //         height: 1000,
-    //         border: '1px solid black',
-    //         margin: '0 auto',
-    //         padding: 12,
-    //         borderRadius: '10px',
-    //         marginTop: 12,
-    //       }}
-    //     >
-    //       {/* <h2 style={{ textAlign: 'center' }}>Test component of media template</h2> */}
-    //       {/* <Space size={20} direction="vertical"> */}
-    //       {/*   {/* <SettingWrapper vertical label="Color Setting"> */}
-    //       {/*      <ColorSetting */}
-    //       {/*        label="Background Color" */}
-    //       {/*        labelStyling={{ color: THEME.token?.colorIcon }} */}
-    //       {/*        color={colorSettingState.color} */}
-    //       {/*        customColors={colorSettingState.customColors} */}
-    //       {/*        callback={callbackColorSetting} */}
-    //       {/*        onChange={handleChangeColorSetting} */}
-    //       {/*      /> */}
-    //       {/*    </SettingWrapper> */}
-    //       {/**/}
-    //       {/*    <SettingWrapper vertical label="Input number with unit"> */}
-    //       {/*      <InputNumberWithUnit */}
-    //       {/*        unit="px" */}
-    //       {/*        min={0} */}
-    //       {/*        max={2000} */}
-    //       {/*        value={700} */}
-    //       {/*        onChange={value => { */}
-    //       {/*          console.log('onChange:: ', value); */}
-    //       {/*        }} */}
-    //       {/*        onChangeUnit={unit => { */}
-    //       {/*          console.log('onChangeUnit:: ', unit); */}
-    //       {/*        }} */}
-    //       {/*      /> */}
-    //       {/*    </SettingWrapper> */}
-    //       {/*    <SettingWrapper label="Radio Group"> */}
-    //       {/*      <RadioGroup */}
-    //       {/*        options={Object.values(BACKGROUND_COLOR_STYLE)} */}
-    //       {/*        value={radioValue} */}
-    //       {/*        onChange={e => handleChangeRadio(e)} */}
-    //       {/*      /> */}
-    //       {/*    </SettingWrapper> */}
-    //       {/*   <SettingWrapper vertical label="Color Setting"> */}
-    //       {/*     <GradientSetting /> */}
-    //       {/*   </SettingWrapper> */}
-    //       {/*   <SliderWithInputNumber */}
-    //       {/*     label="Size (px)" */}
-    //       {/*     labelStyling={{ marginTop: 10 }} */}
-    //       {/*     min={0} */}
-    //       {/*     max={100} */}
-    //       {/*     value={sliderValue} */}
-    //       {/*     onAfterChange={handleChangeSlider} */}
-    //       {/*   /> */}
-    //       {/*   <EdgeSetting */}
-    //       {/*     label="Notification Spacing" */}
-    //       {/*     unit="px" */}
-    //       {/*     linked={false} */}
-    //       {/*     values={edge} */}
-    //       {/*     // edgeLabels={[t(translations.column.title), t(translations.row.title)]} */}
-    //       {/*     onChange={({ values, linked, unit }) => { */}
-    //       {/*       setEdge(values); */}
-    //       {/*       // onUpdateSettings({ */}
-    //       {/*       //   gapX: values[0] + unit, */}
-    //       {/*       //   gapY: values[1] + unit, */}
-    //       {/*       //   gapSuffix: unit, */}
-    //       {/*       //   linkedGapInput: linked, */}
-    //       {/*       // }); */}
-    //       {/*     }} */}
-    //       {/*   /> */}
-    //       {/*   <PositionSetting */}
-    //       {/*     settings={{ linkedPositionInput: false, positionSuffix: 'px' }} */}
-    //       {/*     styles={{ top: '10px', right: '20px', bottom: '30', left: '40' }} */}
-    //       {/*     onChange={() => {}} */}
-    //       {/*   /> */}
-    //       {/* </Space> */}
-    //       <Space size={10} direction="vertical">
-    //         <SettingWrapper vertical label="Background Image" containerStyle={{ gap: '20px' }}>
-    //           <UploadImage
-    //             // isInputMode={false}
-    //             domainMedia={DOMAIN_MEDIA_SANDBOX}
-    //             // extensions={['video/mp4']}
-    //             slug="api/v1"
-    //             // maxSize={200}
-    //             labelButtonSelect="Select video from computer"
-    //             labelHeadingModal="Video Selection"
-    //             labelModalDelete="Delete Video"
-    //             searchPlaceholder="Search video..."
-    //             paramConfigs={{
-    //               token: '5474r2x214z2a4b403e4y4a4q436l4s5s2q4x2r474v5',
-    //               userId: '1600085679',
-    //               accountId: '1600085679',
-    //             }}
-    //             // mode="video"
-    //             iconName="video"
-    //             // title="Background Image"
-    //             selectedImage={{
-    //               url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
-    //             }}
-    //             onChangeImage={image =>
-    //               // onChangeSettings('backgroundImageObj', {
-    //               //   name: image.name,
-    //               //   previewUrl: image.url,
-    //               // })
-    //               {}
-    //             }
-    //             onRemoveImage={() => {
-    //               // onChangeSettings('backgroundImageObj', {
-    //               //   name: '',
-    //               //   previewUrl: '',
-    //               // });
-    //             }}
-    //           />
-    //         </SettingWrapper>
-    //         {/* <SettingWrapper vertical label="Icon"> */}
-    //         {/*   <IconSelection */}
-    //         {/*     isOpen={false} */}
-    //         {/*     labelHeadingModal="Toggle Selection" */}
-    //         {/*     searchPlaceholder="Search for toggle..." */}
-    //         {/*     icon={icon} */}
-    //         {/*     onChange={handleSetIcon} */}
-    //         {/*     iconTypes={['cus', 'font-awesome']} */}
-    //         {/*     onChangeSvg={value => { */}
-    //         {/*       console.log('onChangeSvg', value); */}
-    //         {/*     }} */}
-    //         {/*   /> */}
-    //         {/* </SettingWrapper> */}
-    //       </Space>
-    //     </div>
-    //   </ConfigProvider>
-    // );
-    // ------------------------ Media template components test end -------------------------
-    // return (
-    //   <div style={{ width: '500px', margin: '32px' }}>
-    //     <GradientSetting onChange={e => console.log('gradient change')} />
-    //     <br />
-    //     <br />
-    //     <br />
-    //     <br />
-    //     <Slider
-    //       className="test-classname"
-    //       min={-10}
-    //       max={10}
-    //       onChange={e => console.log('slider change', e)}
-    //     />
-    //     <br />
-    //     <br />
-    //     <Rate />
-    //     <br />
-    //     <br />
-    //     <Slider className="test-classname" />
-    //   </div>
-    // );
-    // ------------------------ Template Listing test -------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       height: '50vh',
-    //     }}
-    //   >
-    //     <TemplateListing
-    //       templatesProps={{
-    //         items: templateItems,
-    //         loading: isLoadingTemplateList,
-    //         onLoadMoreTemplates,
-    //       }}
-    //       categoryListingProps={{
-    //         loading: isLoadingCategoryList,
-    //         items: categoryItems,
-    //         checkedCategories,
-    //         openKeys: openCategoryKeys,
-    //         onOpenChange: onChangeOpenCategoryKeys,
-    //         onMenuChange: onChangeCheckedCategories,
-    //       }}
-    //       templateItemProps={{
-    //         removeModalProps: {
-    //           // onOk
-    //           onOk: onRemoveObjectTemplate,
-    //         },
-    //       }}
-    //     />
-    //   </div>
-    // );
+    return (
+    // <TemplateSaveAs
+    //   form={form}
+    //   imageReview={{
+    //     thumbnails,
+    //     skeleton: true,
+    //   }}
+    //   categories={categoryItems}
+    //   templateNames={templateItems}
+    //   shareAccess={{
+    //     show: true,
+    //     userId: 1600085510,
+    //     userPermission: {
+    //       edit: MENU_PERMISSION.CREATED_BY_USER,
+    //       view: MENU_PERMISSION.NONE,
+    //     },
+    //     getUserInfo: getUserInfos,
+    //   }}
+    //   templateNamesOptions={{
+    //     ...searchNameProps,
+    //   }}
+    //   value={templateValue}
+    //   onChange={value => {
+    //     onChangeValue(value);
+    //   }}
+    // />
+    _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpenSaveTemplate(true), children: "Open Modal" }), _jsx(TemplateSaveAsModal, { open: isOpenSaveTemplate, destroyOnClose: true, okButtonProps: { loading: false }, cancelButtonProps: { disabled: false }, onCancel: () => setIsOpenSaveTemplate(false), onOk: (e, value) => {
+                    console.log('submit:: errors - ', errors, ' - value - ', value);
+                    if (!errors?.length)
+                        setIsOpenSaveTemplate(false);
+                }, templateProps: {
+                    form,
+                    value: templateValue,
+                    onChange: onChangeTemplateValue,
+                    // onEvent: event => {
+                    //   if (event.templateName && event.templateName.id)
+                    //     setSelectedTemplate(event.templateName.id.toString());
+                    // },
+                    imageReview: {
+                        thumbnails,
+                        skeleton: true,
+                    },
+                    templateNames: templateItems,
+                    categories: categoryItems,
+                    omitCategories: ['device_type', 'template_type'],
+                    shareAccess: {
+                        // getUserInfo: email => permissionServices.getUserInfo(email, userInfo?.user_id!) as any,
+                        show: true,
+                        // userId: +userInfo?.user_id!,
+                        userPermission: {
+                            edit: MENU_PERMISSION.CREATED_BY_USER,
+                            view: MENU_PERMISSION.CREATED_BY_USER,
+                        },
+                        placeholder: 'Add people',
+                        generalAccessSettings: {
+                            publicOnlyWith: true,
+                        },
+                        allowAddUser: true,
+                    },
+                    templateNamesOptions: searchNameProps,
+                } })] }));
 };
 const container = document.getElementById('root');
 const root = createRoot(container);

package/es/utils/color.d.ts

@@ -1,4 +1,3 @@
-import { ColorResult } from 'react-color';
 export declare const isDarkColor: (hexcolor: any, alpha?: number) => boolean;
 export declare const hexWithAlpha: (color: ColorResult) => string;
 /**

package/es/utils/common.js

@@ -291,7 +291,6 @@ export function callApiWithAuth(endpoint, method = 'GET', body, domain = '', con
         data: body,
         headers,
     }).catch(err => {
-        // console.log(err);
         console.log(err);
     });
 }

package/es/utils/cookie.js

@@ -11,7 +11,7 @@ export const setCookieSession = ({ name, value, cookieOptions }) => {
     cookies.set(name, value, {
         ...cookieOptions,
     });
-    if (typeof Storage !== 'undefined') {
+    if (typeof Storage !== undefined) {
         sessionStorage.setItem(name, name);
     }
 };
@@ -27,8 +27,9 @@ export const removeCookieSubDomain = ({ name, env = 'development', cookieOptions
         secure: true,
         ...cookieOptions,
     });
+    const addEnvKey = key => (env ? `${key}_${env}` : key);
     // Remove redundant cookies setted for full domain
-    if (['api_token', 'api_r_token', 'api_pid'].includes(name)) {
+    if (['api_token', addEnvKey('api_r_token'), addEnvKey('api_pid')].includes(name)) {
         cookies.remove(name, {
             path: '/',
             sameSite: 'none',
@@ -39,13 +40,13 @@ export const removeCookieSubDomain = ({ name, env = 'development', cookieOptions
 };
 export const removeAppCookieSessionSubdomain = (args) => {
     removeCookieSubDomain(args);
-    if (typeof Storage !== 'undefined') {
+    if (typeof Storage !== undefined) {
         sessionStorage.removeItem(args.name);
     }
 };
 export const removeAppCookieSession = (args) => {
     cookies.remove(args?.name, args?.cookieOptions);
-    if (typeof Storage !== 'undefined') {
+    if (typeof Storage !== undefined) {
         sessionStorage.removeItem(args.name);
     }
 };

package/es/utils/crossSubdomainCookieOptions.d.ts

@@ -0,0 +1,14 @@
+interface CrossSubdomainCookieOptionsInput {
+    hostname: string;
+    protocol: string;
+    maxAge?: number;
+}
+export interface CrossSubdomainCookieOptions {
+    domain: string;
+    path: '/';
+    sameSite: 'none';
+    secure?: true;
+    maxAge?: number;
+}
+export declare function createCrossSubdomainCookieOptions({ hostname, protocol, maxAge, }: CrossSubdomainCookieOptionsInput): CrossSubdomainCookieOptions;
+export {};

package/es/utils/crossSubdomainCookieOptions.js

@@ -0,0 +1,12 @@
+export function createCrossSubdomainCookieOptions({ hostname, protocol, maxAge, }) {
+    const hostnameParts = hostname.split('.');
+    return {
+        domain: hostnameParts.length < 4
+            ? hostnameParts.slice(-2).join('.')
+            : hostnameParts.slice(-3).join('.'),
+        path: '/',
+        sameSite: 'none',
+        ...(protocol === 'https:' && { secure: true }),
+        ...(maxAge !== undefined && { maxAge }),
+    };
+}

package/es/utils/web.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Parses a font family string and extracts individual font names
  * Handles quoted fonts, fallbacks, and CSS font-family syntax
@@ -70,7 +71,7 @@ export declare function createFontStack(primaryFont: string): string;
  * @returns {Record<string, unknown>}
  */
 export declare const searchPramsToObject: (searchParams?: string) => Record<string, unknown>;
-export declare const getPreventKeyboardAction: <T extends React.KeyboardEvent | KeyboardEvent>(actions?: Array<"undo" | "copy" | "paste" | "cut">, options?: {
+export declare const getPreventKeyboardAction: <T extends import("react").KeyboardEvent<Element> | KeyboardEvent>(actions?: Array<'undo' | 'copy' | 'paste' | 'cut'>, options?: {
     onKeydown?: (e: T) => void;
     onKeyup?: (e: T) => void;
 }) => {