@antscorp/antsomi-ui 1.3.3-beta.7 → 1.3.3-beta.71

package/es/components/molecules/RichMenu/RichMenuBlock/index.d.ts

@@ -0,0 +1,3 @@
+export { RichMenuBlock } from './RichMenuBlock';
+export * from './constants';
+export type { RichMenuBlockProps } from './RichMenuBlock';

package/es/components/molecules/RichMenu/RichMenuBlock/index.js

@@ -0,0 +1,2 @@
+export { RichMenuBlock } from './RichMenuBlock';
+export * from './constants';

package/es/components/molecules/RichMenu/RichMenuBlock/styled.d.ts

@@ -0,0 +1,9 @@
+import { RichMenu } from '@antscorp/antsomi-ui/es/types';
+interface StyledRichMenuProps {
+    $isCompact?: boolean;
+    $gridTemplateRows?: RichMenu['gridTemplateRows'];
+    $gridTemplateCols?: RichMenu['gridTemplateCols'];
+}
+export declare const StyledRichMenu: import("styled-components").StyledComponent<"div", any, StyledRichMenuProps, never>;
+export declare const StyledCell: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/es/components/molecules/RichMenu/RichMenuBlock/styled.js

@@ -0,0 +1,17 @@
+// Libraries
+import styled from 'styled-components';
+export const StyledRichMenu = styled.div `
+  display: grid;
+  width: 100%;
+  grid-gap: 1px;
+  aspect-ratio: ${({ $isCompact }) => ($isCompact ? '3 / 1' : '3/ 2')};
+  grid-template-columns: ${({ $gridTemplateCols }) => $gridTemplateCols === null || $gridTemplateCols === void 0 ? void 0 : $gridTemplateCols.map(col => col).join(' ')};
+  grid-template-rows: ${({ $gridTemplateRows }) => $gridTemplateRows === null || $gridTemplateRows === void 0 ? void 0 : $gridTemplateRows.map(row => row).join(' ')};
+`;
+export const StyledCell = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 1px solid var(--primary-color);
+  cursor: pointer;
+`;

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface RichMenuChatBarProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    label?: string;
+    showRichMenu?: boolean;
+    showTypingChat?: boolean;
+    disabled?: boolean;
+    onToggleRichMenu?: (toggle: boolean) => void;
+    onToggleTypingChat?: (toggle: boolean) => void;
+}
+export declare const RichMenuChatBar: React.FC<RichMenuChatBarProps>;

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+// Components
+import { Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styles
+import { ChatBarMenuBox, ChatBarWrapper } from './styled';
+import { TypingChat } from './TypingChat';
+const defaultProps = {
+    label: 'Menu',
+    showRichMenu: true,
+    showTypingChat: false,
+};
+export const RichMenuChatBar = props => {
+    const { disabled, label, showRichMenu, showTypingChat, className, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "onToggleRichMenu", "onToggleTypingChat"]);
+    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
+        React.createElement(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }),
+        React.createElement(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu) },
+            React.createElement(Typography.Text, { className: "ants-text-sm" }, label),
+            React.createElement(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 }))))));
+};
+RichMenuChatBar.defaultProps = defaultProps;

package/es/components/molecules/RichMenu/RichMenuChatBar/TypingChat/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface TypingChatProps {
+    onClickMenu?: () => void;
+}
+export declare const TypingChat: React.FC<TypingChatProps>;
+export {};

package/es/components/molecules/RichMenu/RichMenuChatBar/TypingChat/index.js

@@ -0,0 +1,15 @@
+// Libraries
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+import React, { memo } from 'react';
+// Styled
+import { TypingChatWrapper, TypingInput, TypingWrapper } from './styled';
+export const TypingChat = memo(props => {
+    const { onClickMenu } = props;
+    return (React.createElement(TypingChatWrapper, { gap: 8, justify: "space-between", align: "center" },
+        React.createElement(Icon, { type: "icon-ants-list-view-thumbnail", className: "ants-cursor-pointer", onClick: () => onClickMenu && onClickMenu() }),
+        React.createElement(Icon, { type: "icon-ants-angle-right", className: "icon-angle", size: 14 }),
+        React.createElement(TypingWrapper, null,
+            React.createElement(TypingInput, { placeholder: "Aa" }),
+            React.createElement(Icon, { type: "icon-ants-smile-face", size: 16 })),
+        React.createElement(Icon, { type: "icon-ants-big-search", className: "icon-search" })));
+});

package/es/components/molecules/RichMenu/RichMenuChatBar/TypingChat/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TypingInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const TypingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TypingChatWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuChatBar/TypingChat/styled.js

@@ -0,0 +1,47 @@
+// Libraries
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import styled from 'styled-components';
+export const TypingInput = styled.input `
+  width: 100%;
+  border-radius: 18px;
+  height: 28px;
+  font-size: 15px;
+  outline: none;
+  border: none;
+  padding: 0px 30px 0px 10px;
+
+  &::placeholder {
+    color: var(--accent-5);
+  }
+`;
+export const TypingWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex: 1 1 0%;
+
+  i {
+    top: 50%;
+    transform: translateY(-50%);
+    position: absolute;
+    right: 10px;
+  }
+`;
+export const TypingChatWrapper = styled(Flex) `
+  width: 100%;
+  height: fit-content;
+  color: #747474;
+
+  > i {
+    cursor: pointer;
+  }
+
+  .icon-angle {
+    padding: 0 16px;
+  }
+
+  .icon-search {
+    position: relative;
+    flex-shrink: 0;
+  }
+`;

package/es/components/molecules/RichMenu/RichMenuChatBar/index.d.ts

@@ -0,0 +1,2 @@
+export { RichMenuChatBar } from './RichMenuChatBar';
+export type { RichMenuChatBarProps } from './RichMenuChatBar';

package/es/components/molecules/RichMenu/RichMenuChatBar/index.js

@@ -0,0 +1 @@
+export { RichMenuChatBar } from './RichMenuChatBar';

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ChatBarWrapperProps {
+    $showRichMenu?: boolean;
+    $showTypingChat?: boolean;
+    $disabled?: boolean;
+}
+export declare const ChatBarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ChatBarWrapperProps, never>;
+export declare const ChatBarMenuBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export {};

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.js

@@ -0,0 +1,37 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+export const ChatBarWrapper = styled(Flex) `
+  position: relative;
+  height: 84px;
+  padding: 10px 20px;
+  background-color: #fff;
+  z-index: 10;
+
+  ${({ $disabled }) => css `
+    pointer-events: ${$disabled ? 'none' : 'auto'};
+  `}
+
+  .icon-caret {
+    transition: all 300ms;
+    ${({ $showRichMenu }) => css `
+      transform: ${$showRichMenu ? 'rotate(0deg)' : 'rotate(180deg)'};
+    `}
+  }
+
+  .icon-keyboard {
+    cursor: pointer;
+  }
+`;
+export const ChatBarMenuBox = styled(Flex) `
+  position: absolute;
+  transform: translateX(-50%);
+  top: 10px;
+  left: 50%;
+  cursor: pointer;
+`;
+ChatBarMenuBox.defaultProps = {
+    align: 'center',
+    gap: 20,
+};

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { RichMenu } from '@antscorp/antsomi-ui/es/types';
+interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    richMenu: RichMenu;
+    isPreview?: boolean;
+    onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
+    onClickCell?: (cellIndex: number) => void;
+}
+export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;
+export {};

package/es/components/molecules/RichMenu/RichMenuMobileView/RichMenuMobileView.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useState } from 'react';
+// Assets
+import IphoneTopBar from '@antscorp/antsomi-ui/es/assets/images/iphone-top-bar.png';
+// Components
+import { MobileFrame } from '@antscorp/antsomi-ui/es/components/atoms';
+import { RichMenuChatBar } from '../RichMenuChatBar';
+import { RichMenuBlock } from '../RichMenuBlock';
+// Styles
+import { MobileContent, RichMenuWrapper, TopBar } from './styled';
+export const RichMenuMobileView = props => {
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell"]);
+    // State
+    const [state, setState] = useState({
+        showRichMenu: true,
+        showTypingChat: false,
+        currentRichMenuIdx: 0,
+    });
+    // Variables
+    const { showRichMenu, showTypingChat } = state;
+    return (React.createElement(MobileFrame, Object.assign({ className: `ants-mx-auto ${className}` }, restOfProps),
+        isPreview && React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
+        React.createElement(MobileContent, null,
+            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell }))),
+            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
+};

package/es/components/molecules/RichMenu/RichMenuMobileView/index.d.ts

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

package/es/components/molecules/RichMenu/RichMenuMobileView/index.js

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

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.d.ts

@@ -0,0 +1,6 @@
+export declare const MobileContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RichMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    $showRichMenu: boolean;
+    $isPreview: boolean;
+}, never>;
+export declare const TopBar: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuMobileView/styled.js

@@ -0,0 +1,20 @@
+// Libraries
+import styled, { css } from 'styled-components';
+export const MobileContent = styled.div `
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  .antsomi-chat-bar {
+    background-color: #f8f8f8;
+  }
+`;
+export const RichMenuWrapper = styled.div `
+  transition: all 200ms;
+
+  ${({ $showRichMenu, $isPreview }) => css `
+    transform: ${$showRichMenu ? 'translateY(0)' : 'translateY(101%)'};
+    pointer-events: ${$isPreview ? 'none' : 'auto'};
+  `}
+`;
+export const TopBar = styled.img ``;

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

@@ -0,0 +1,3 @@
+export * from './RichMenuBlock';
+export * from './RichMenuChatBar';
+export * from './RichMenuMobileView';

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

@@ -0,0 +1,3 @@
+export * from './RichMenuBlock';
+export * from './RichMenuChatBar';
+export * from './RichMenuMobileView';

package/es/components/molecules/Select/Select.d.ts

@@ -1,15 +1,17 @@
 import { SelectProps as AntdSelectProps } from 'antd';
 import React from 'react';
+import { TextProps } from '../../atoms/Text';
 export interface SelectProps extends AntdSelectProps {
+    label?: string | React.ReactNode;
+    labelProps?: TextProps;
 }
 declare const Select: (<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: AntdSelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;
-} & {
-    ref?: React.Ref<import("antd").RefSelectProps> | undefined;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+} & React.RefAttributes<import("antd").RefSelectProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
     SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
     Option: import("rc-select/lib/Option").OptionFC;
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
-    _InternalPanelDoNotUseOrYouWillBeFired: any;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
 } & React.FC<SelectProps>;
 export { Select };

package/es/components/molecules/Select/Select.js

@@ -1,11 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var _a;
 // Libraries
 import { Select as AntdSelect } from 'antd';
 import React from 'react';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Text } from '../../atoms/Text';
 // Icons
 import Icon from '@antscorp/icons';
 // Constants
-import { THEME } from '../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Styled
 import { StyledTag, TagCloseBtn } from './styled';
 const tagRender = (props) => {
     const { label, closable, onClose } = props;
@@ -18,11 +33,17 @@ const tagRender = (props) => {
                     fontSize: 10,
                 } })) }, label));
 };
-const CustomSelect = props => React.createElement(AntdSelect, Object.assign({}, props));
+const CustomSelect = props => {
+    const { label, labelProps } = props, rest = __rest(props, ["label", "labelProps"]);
+    return (React.createElement(Flex, { vertical: true, gap: 4 },
+        typeof label === 'string' ? React.createElement(Text, Object.assign({}, labelProps), label) : label,
+        React.createElement(AntdSelect, Object.assign({}, rest))));
+};
 const Select = CustomSelect;
 Select.OptGroup = AntdSelect.OptGroup;
 Select.Option = AntdSelect.Option;
 Select.defaultProps = {
+    labelProps: { color: '#66666' },
     suffixIcon: (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 16, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw10 } })),
     tagRender,
 };

package/es/components/molecules/Select/Test.d.ts

@@ -1,2 +1,3 @@
-declare const SelectTest: () => JSX.Element;
+import React from 'react';
+declare const SelectTest: () => React.JSX.Element;
 export default SelectTest;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ShareAccessProps } from './types';
+export declare const ShareAccess: (props: ShareAccessProps) => React.JSX.Element;

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

@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, { useEffect, useReducer } from 'react';
+import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
+import { LayoutContent } from './components';
+import { shareAccessReducer } from './reducer';
+import { updateObjAccessInfo } from './actions';
+export const ShareAccess = (props) => {
+    const { accessInfo, userId, onChange, userPermission } = props;
+    const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
+        modalTransferOwnership: {
+            open: false,
+            userToOwnerShipId: -1,
+        },
+    });
+    useEffect(() => {
+        if (!accessInfo)
+            return;
+        dispatch(updateObjAccessInfo(accessInfo));
+    }, [accessInfo]);
+    return (React.createElement(ShareAccessStateContext.Provider, { value: Object.assign(Object.assign({}, state), { accessUserId: userId, accessUserPermission: userPermission }) },
+        React.createElement(ShareAccessDispatchContext.Provider, { value: dispatch },
+            React.createElement(LayoutContent, Object.assign({}, props)))));
+};

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

@@ -0,0 +1,16 @@
+import { ObjectAccessInfo, ShareAccessState } from './types';
+export declare const TYPES: {
+    readonly UPDATE_OBJECT_ACCESS_INFO: "UPDATE_OBJECT_ACCESS_INFO";
+    readonly UPDATE_MODAL_TRANSTER_OWNERSHIP: "UPDATE_MODAL_TRANSTER_OWNERSHIP";
+};
+export declare const updateObjAccessInfo: (objectAccessInfo: ObjectAccessInfo) => {
+    type: "UPDATE_OBJECT_ACCESS_INFO";
+    payload: ObjectAccessInfo;
+};
+export declare const updateModalTransferOwnership: (modalState: Partial<ShareAccessState['modalTransferOwnership']>) => {
+    type: "UPDATE_MODAL_TRANSTER_OWNERSHIP";
+    payload: Partial<{
+        open: boolean;
+        userToOwnerShipId: number;
+    }>;
+};

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

@@ -0,0 +1,12 @@
+export const TYPES = {
+    UPDATE_OBJECT_ACCESS_INFO: 'UPDATE_OBJECT_ACCESS_INFO',
+    UPDATE_MODAL_TRANSTER_OWNERSHIP: 'UPDATE_MODAL_TRANSTER_OWNERSHIP',
+};
+export const updateObjAccessInfo = (objectAccessInfo) => ({
+    type: TYPES.UPDATE_OBJECT_ACCESS_INFO,
+    payload: objectAccessInfo,
+});
+export const updateModalTransferOwnership = (modalState) => ({
+    type: TYPES.UPDATE_MODAL_TRANSTER_OWNERSHIP,
+    payload: modalState,
+});

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GeneralAccess: () => React.JSX.Element | null;

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

@@ -0,0 +1,78 @@
+import Icon from '@antscorp/icons';
+import { Dropdown } from 'antd';
+import produce from 'immer';
+import React from 'react';
+import { updateObjAccessInfo } from '../../actions';
+import { GENERAL_ACCESS, PUBLIC_ROLE, ROLE_ACCESS_LABEL } from '../../constants';
+import { useShareAccess } from '../../hooks';
+import { StyledGeneralAccessRoot } from './styled';
+export const GeneralAccess = () => {
+    const { state, dispatch } = useShareAccess();
+    const { accessInfo, allowEdit } = state;
+    if (!accessInfo)
+        return null;
+    const { isPublic, publicRole } = accessInfo;
+    const handleChangeGeneralAccess = (value) => {
+        if (!accessInfo || !dispatch || !allowEdit)
+            return;
+        const updated = produce(accessInfo, draft => {
+            draft.isPublic = value;
+            if (!isPublic && value === GENERAL_ACCESS.PUBLIC) {
+                draft.publicRole = PUBLIC_ROLE.ONLY_VIEWER;
+            }
+        });
+        dispatch(updateObjAccessInfo(updated));
+    };
+    const handleChangePublicRole = (value) => {
+        if (!accessInfo || !dispatch || !allowEdit)
+            return;
+        const updated = produce(accessInfo, draft => {
+            draft.publicRole = value;
+        });
+        dispatch(updateObjAccessInfo(updated));
+    };
+    const renderDescription = () => {
+        let description = 'Only people with access can open this item.';
+        if (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER) {
+            description = 'Anyone on the portal can view this item.';
+        }
+        if (isPublic && publicRole === PUBLIC_ROLE.ONLY_EDITOR) {
+            description = 'Anyone on the portal can edit this item.';
+        }
+        return description;
+    };
+    return (React.createElement(StyledGeneralAccessRoot, null,
+        React.createElement("div", { className: "title" }, "General access"),
+        React.createElement("div", { className: "setting" },
+            React.createElement(Icon, { className: "accessable-icon", type: isPublic ? 'icon-ants-mui-lock-open' : 'icon-ants-mui-lock' }),
+            React.createElement("div", { className: "general-info" },
+                React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                        items: [
+                            isPublic
+                                ? { key: GENERAL_ACCESS.RESTRICTED, label: React.createElement("div", null, "Restricted ") }
+                                : { key: GENERAL_ACCESS.PUBLIC, label: React.createElement("div", null, "Public") },
+                        ],
+                        onClick: v => handleChangeGeneralAccess(+v.key),
+                    } },
+                    React.createElement("div", { className: "general-dropdown-wrapper" },
+                        React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
+                        allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))),
+                React.createElement("div", { className: "description" }, renderDescription())),
+            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                    items: [
+                        publicRole === PUBLIC_ROLE.ONLY_VIEWER
+                            ? {
+                                key: PUBLIC_ROLE.ONLY_EDITOR,
+                                label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_EDITOR],
+                            }
+                            : {
+                                key: PUBLIC_ROLE.ONLY_VIEWER,
+                                label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_VIEWER],
+                            },
+                    ],
+                    onClick: v => handleChangePublicRole(+v.key),
+                } },
+                React.createElement("div", { className: "public-role-dropdown-wrapper" },
+                    React.createElement("div", { className: "for-title" }, ROLE_ACCESS_LABEL[publicRole]),
+                    allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" })))))));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const StyledGeneralAccessRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    margin-bottom: 12px;
+    font-weight: bold;
+  }
+
+  .setting {
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #e6e6e6;
+    padding: 8px;
+
+    .icon-angle {
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+    }
+
+    .accessable-icon {
+      font-size: 28px;
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+      display: flex;
+      align-items: center;
+    }
+
+    .general-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-left: 15px;
+
+      .general-dropdown-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        width: fit-content;
+
+        .accessable-title {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .public-role-dropdown-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+`;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ShareAccessProps } from '../../types';
+export declare const LayoutContent: (props: ShareAccessProps) => React.JSX.Element | null;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useShareAccess } from '../../hooks';
+import { GeneralAccess } from '../GeneralAccess';
+import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferOwnerShip';
+import { PeopleAccess } from '../PeopleAccess';
+import { SearchUser } from '../SearchUser';
+import { StyledLayoutContentRoot } from './styled';
+export const LayoutContent = (props) => {
+    const { getUserInfo, allowChangeOnwership = true } = props;
+    const { state } = useShareAccess();
+    const { allowEdit, allowView } = state;
+    if (!allowEdit && !allowView)
+        return null;
+    return (React.createElement(StyledLayoutContentRoot, null,
+        React.createElement(SearchUser, { getUserInfo: getUserInfo }),
+        React.createElement(PeopleAccess, { allowChangeOnwership: allowChangeOnwership }),
+        React.createElement(GeneralAccess, null),
+        React.createElement(ModalTransferOwnership, null)));
+};

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

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

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

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

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

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