@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/components/molecules/UnsubscribePreview/styled.js

@@ -1,51 +1,51 @@
 // Libraries
 import styled from 'styled-components';
-export const UnsubscribeLandingPageWrapper = styled.div `
-  .antsomi-card-body {
-    padding: 0px !important;
-  }
-  .ant-list-item {
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
-`;
-export const SpinContainer = styled.div `
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-export const Wrapper = styled.div `
-  padding: 30px 20px;
-
-  display: flex;
-  flex-direction: column;
-`;
-export const LogoContainer = styled.div `
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  margin-bottom: 30px;
-`;
-export const Logo = styled.img `
-  width: 60%;
-`;
-export const Identifier = styled.div `
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 7px 0px;
-`;
-export const Title = styled.div `
-  font-size: 24px;
-  font-weight: 500;
-`;
-export const Description = styled.div `
-  font-size: 16px;
-  font-weight: 400;
-`;
-export const ButtonWrapper = styled.div `
-  padding-top: 15px;
-  border-top: 1px solid #e5e5e5;
+export const UnsubscribeLandingPageWrapper = styled.div `
+  .antsomi-card-body {
+    padding: 0px !important;
+  }
+  .ant-list-item {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+`;
+export const SpinContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const Wrapper = styled.div `
+  padding: 30px 20px;
+
+  display: flex;
+  flex-direction: column;
+`;
+export const LogoContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 30px;
+`;
+export const Logo = styled.img `
+  width: 60%;
+`;
+export const Identifier = styled.div `
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 7px 0px;
+`;
+export const Title = styled.div `
+  font-size: 24px;
+  font-weight: 500;
+`;
+export const Description = styled.div `
+  font-size: 16px;
+  font-weight: 400;
+`;
+export const ButtonWrapper = styled.div `
+  padding-top: 15px;
+  border-top: 1px solid #e5e5e5;
 `;

package/es/components/molecules/UploadImage/styled.js

@@ -2,128 +2,128 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const WrapperListImages = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 250px;
-  height: auto;
-  text-align: center;
-
-  &.ants-group:hover .group-hover {
-    opacity: 1;
-  }
+export const WrapperListImages = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 250px;
+  height: auto;
+  text-align: center;
+
+  &.ants-group:hover .group-hover {
+    opacity: 1;
+  }
 `;
-export const TextStyled = styled.span `
-  color: ${THEME.token?.colorTextDark};
+export const TextStyled = styled.span `
+  color: ${THEME.token?.colorTextDark};
 `;
-export const Boxed = styled.div `
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 250px;
-  height: 250px;
-  border-width: 1px;
-  border-style: solid;
-  --tw-border-opacity: 1;
-  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+export const Boxed = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 250px;
+  height: 250px;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
 `;
-export const Image = styled.img `
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
+export const Image = styled.img `
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
 `;
-export const WrapperBtn = styled.div `
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 3;
-  gap: 15px;
-  opacity: 0;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+export const WrapperBtn = styled.div `
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3;
+  gap: 15px;
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 `;
-export const Paragraph = styled.p `
-  display: inline-block;
-  margin-top: 5px;
-  width: 100%;
-  font-size: ${THEME.token?.fontSize}px;
+export const Paragraph = styled.p `
+  display: inline-block;
+  margin-top: 5px;
+  width: 100%;
+  font-size: ${THEME.token?.fontSize}px;
 `;
-export const Overlay = styled.div `
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  z-index: 2;
-  background-color: ${THEME.token?.bgLightTransparent};
-  opacity: 0;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+export const Overlay = styled.div `
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 2;
+  background-color: ${THEME.token?.bgLightTransparent};
+  opacity: 0;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 `;
-export const WrapperInputMode = styled.div `
-  position: relative;
-  width: ${props => (props.width ? props.width : '100%')};
+export const WrapperInputMode = styled.div `
+  position: relative;
+  width: ${props => (props.width ? props.width : '100%')};
 `;
-export const WrapperIcon = styled.div `
-  position: absolute;
-  top: -10px;
-  left: calc(100% - 44px);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 12px;
-  border-radius: 50%;
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-  }
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: -10px;
+  left: calc(100% - 44px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px;
+  border-radius: 50%;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
 `;
-export const ErrorMessage = styled.div `
-  width: 100%;
-  margin-top: 3px;
-  color: #f44336;
-  font-size: 0.688rem;
-  line-height: 1.66;
+export const ErrorMessage = styled.div `
+  width: 100%;
+  margin-top: 3px;
+  color: #f44336;
+  font-size: 0.688rem;
+  line-height: 1.66;
 `;
-export const UploadImageWrapper = styled.div `
-  .antsomi-upload.antsomi-upload-btn {
-    padding: 0px;
-  }
-
-  .image-upload-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    gap: 20px;
-    position: relative;
-    border-radius: ${THEME.token?.borderRadius}px;
-    border-width: 2px;
-    border-style: dashed;
-    --tw-border-opacity: 1;
-    border-color: rgb(210 210 210 / var(--tw-border-opacity));
-    aspect-ratio: 3.2;
-
-    &.uploaded {
-      background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
-        repeat rgb(249, 251, 255);
-    }
-    .antsomi-upload-drag-container {
-    }
-    .upload-file-info {
-      p {
-        font-size: 12px;
-      }
-    }
-  }
+export const UploadImageWrapper = styled.div `
+  .antsomi-upload.antsomi-upload-btn {
+    padding: 0px;
+  }
+
+  .image-upload-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: 20px;
+    position: relative;
+    border-radius: ${THEME.token?.borderRadius}px;
+    border-width: 2px;
+    border-style: dashed;
+    --tw-border-opacity: 1;
+    border-color: rgb(210 210 210 / var(--tw-border-opacity));
+    aspect-ratio: 3.2;
+
+    &.uploaded {
+      background: url('data:image/svg+xml;base64, PHN2ZyBoZWlnaHQ9IjEwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMCAyNTZoMjU2djI1NkgweiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMjUiIGQ9Ik0yNTYgMjU2aDI1NnYyNTZIMjU2eiI+PC9wYXRoPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1vcGFjaXR5PSIuMTI1IiBkPSJNMjU2IDBoMjU2djI1NkgyNTZ6Ij48L3BhdGg+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTAgMGgyNTZ2MjU2SDB6Ij48L3BhdGg+PC9zdmc+')
+        repeat rgb(249, 251, 255);
+    }
+    .antsomi-upload-drag-container {
+    }
+    .upload-file-info {
+      p {
+        font-size: 12px;
+      }
+    }
+  }
 `;

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

@@ -8,6 +8,7 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useEffect, useCallback } from 'react';
+import { memo, useMemo, useRef, useCallback } from 'react';
 import { Typography } from '../../../../atoms/Typography';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
@@ -19,6 +19,7 @@ export const Item = memo((props) => {
     const expanded = hasChildren && expandedKeys.has(item.data.key);
     const selected = selectedKeys.has(item.data.key);
     const disabled = item.data?.disabled;
+    const displayOnly = item.data?.displayOnly;
     const indentSize = item.level * inlineIndent;
     const itemStyle = {
         ...style,
@@ -31,6 +32,7 @@ export const Item = memo((props) => {
         [CLS.Item.selected]: selected,
         [CLS.Item.expanded]: expanded,
         [CLS.Item.disabled]: disabled,
+        [CLS.Item.displayOnly]: displayOnly,
     }, item.data.className);
     const handleItemRef = useCallback((el) => {
         if (!el)
@@ -39,7 +41,7 @@ export const Item = memo((props) => {
         item.data.ref(el);
     }, [item.data]);
     const handleOnClick = (event, elKey) => {
-        if (!onClick || disabled)
+        if (!onClick || disabled || displayOnly)
             return;
         onClick({ item, index, elKey, domEvent: event });
     };
@@ -67,11 +69,7 @@ export const Item = memo((props) => {
     }, [item.id, normalizeTreeItems, selectedKeys]);
     const className = clsx(itemClassName, {
         [CLS.Item.selectedDescendant]: isSelectedDescendant,
+        [CLS.Item.focused]: isFocused,
     });
-    useEffect(() => {
-        if (isFocused) {
-            itemRef.current?.focus({ preventScroll: true });
-        }
-    }, [isFocused]);
-    return (_jsxs(MenuItemRoot, { ref: handleItemRef, role: "treeitem", tabIndex: isFocused ? 0 : -1, "aria-selected": selected, "aria-disabled": disabled, "aria-expanded": expanded, "aria-level": item.level, "aria-posinset": index + 1, "aria-setsize": items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
+    return (_jsxs(MenuItemRoot, { "data-selected": !!selected, "data-focused": isFocused, ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
 }, areEqual);

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { ItemType } from '../../types';
-export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Partial<{
-    items: ItemType[];
+/// <reference types="react" />
+export declare const MenuInline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Partial<{
+    items: import("../../types").ItemType[];
     inlineIndent: number;
     inlinePadding: number;
     itemSpacing: number;
@@ -9,15 +8,16 @@ export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoti
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
-        item: ItemType;
-        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
+        item: import("../../types").ItemType;
+        domEvent?: import("react").MouseEvent<Element, MouseEvent> | undefined;
         elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: ItemType, others: {
-        expandEl: React.ReactNode;
-    }) => React.ReactNode);
+    action: import("react").ReactNode | ((item: import("../../types").ItemType, others: {
+        expandEl: import("react").ReactNode;
+    }) => import("react").ReactNode);
 }> & {
     mode?: "inline" | undefined;
-} & React.RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;
+} & import("react").RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;