@antscorp/antsomi-ui 2.0.109 → 2.0.111

package/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -2,130 +2,130 @@ import styled from 'styled-components';
 import { Typography } from '../../../../atoms';
 import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text } = Typography;
-export const MenuWrapper = styled.div `
-  position: relative;
-  flex-shrink: 0;
-  width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
-  overflow: auto;
-  overflow-x: hidden;
-  border-right: 1px solid rgba(5, 5, 5, 0.06);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .category__listing {
-    position: relative;
-    height: 100%;
-    overflow-y: auto;
-
-    .antsomi-menu,
-    .ant-menu {
-      [role='menu'] {
-        background-color: white !important;
-      }
-
-      [role='menuitem'] {
-        width: 100%;
-        border-radius: 0;
-        height: 30px;
-        padding: 0 10px !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-
-        .antsomi-menu-title-content,
-        .ant-menu-title-content {
-          height: 100%;
-        }
-      }
-
-      .antsomi-menu-submenu-title,
-      .ant-menu-submenu-title {
-        height: 30px !important;
-      }
-
-      .antsomi-menu-submenu-title {
-        margin-top: 10px;
-        margin-bottom: 10px;
-        transition: all 0.3s;
-      }
-
-      .antsomi-menu-submenu-open {
-        .antsomi-menu-submenu-title {
-          margin-bottom: 0px;
-        }
-      }
-
-      .antsomi-menu-sub {
-        > li.antsomi-menu-item:first-child {
-          margin-top: 0;
-        }
-      }
-    }
-
-    .category-loading {
-      height: 100%;
-    }
-
-    .empty-wrapper {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-    }
-  }
+export const MenuWrapper = styled.div `
+  position: relative;
+  flex-shrink: 0;
+  width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
+  overflow: auto;
+  overflow-x: hidden;
+  border-right: 1px solid rgba(5, 5, 5, 0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .category__listing {
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+
+    .antsomi-menu,
+    .ant-menu {
+      [role='menu'] {
+        background-color: white !important;
+      }
+
+      [role='menuitem'] {
+        width: 100%;
+        border-radius: 0;
+        height: 30px;
+        padding: 0 10px !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+
+        .antsomi-menu-title-content,
+        .ant-menu-title-content {
+          height: 100%;
+        }
+      }
+
+      .antsomi-menu-submenu-title,
+      .ant-menu-submenu-title {
+        height: 30px !important;
+      }
+
+      .antsomi-menu-submenu-title {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        transition: all 0.3s;
+      }
+
+      .antsomi-menu-submenu-open {
+        .antsomi-menu-submenu-title {
+          margin-bottom: 0px;
+        }
+      }
+
+      .antsomi-menu-sub {
+        > li.antsomi-menu-item:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+
+    .category-loading {
+      height: 100%;
+    }
+
+    .empty-wrapper {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  }
 `;
-export const CustomLabelStyled = styled.div `
-  display: flex;
-  justify-content: space-between;
-  height: 100%;
-  align-items: center;
-
-  .label {
-    flex: 1 1 0%;
-    display: flex;
-    gap: 9px;
-    overflow: auto;
-
-    .antsomi-checkbox-wrapper {
-      width: 100%;
-      display: flex;
-      align-items: center;
-
-      .antsomi-checkbox-wrapper {
-        flex-shrink: 0;
-      }
-
-      span:nth-child(2) {
-        flex: 1 1 0%;
-        overflow: auto;
-        & > span {
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-
-  .total {
-    flex-shrink: 0;
-    font-size: 13px;
-    font-weight: 400;
-    color: ${globalToken?.bw8};
-    line-height: 1 !important;
-    font-size: 11px;
-    height: fit-content;
-  }
+export const CustomLabelStyled = styled.div `
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  align-items: center;
+
+  .label {
+    flex: 1 1 0%;
+    display: flex;
+    gap: 9px;
+    overflow: auto;
+
+    .antsomi-checkbox-wrapper {
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .antsomi-checkbox-wrapper {
+        flex-shrink: 0;
+      }
+
+      span:nth-child(2) {
+        flex: 1 1 0%;
+        overflow: auto;
+        & > span {
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+
+  .total {
+    flex-shrink: 0;
+    font-size: 13px;
+    font-weight: 400;
+    color: ${globalToken?.bw8};
+    line-height: 1 !important;
+    font-size: 11px;
+    height: fit-content;
+  }
 `;
-export const CustomRootLabel = styled.div `
-  font-size: 13px !important;
-  font-weight: 400;
-  /* color: ${THEME?.token?.bw8}; */
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding-right: 20px;
+export const CustomRootLabel = styled.div `
+  font-size: 13px !important;
+  font-weight: 400;
+  /* color: ${THEME?.token?.bw8}; */
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
 `;
-export const TextWrapper = styled(Text) `
-  max-width: 100%;
-  color: inherit !important;
-  height: fit-content;
-  font-size: inherit !important;
+export const TextWrapper = styled(Text) `
+  max-width: 100%;
+  color: inherit !important;
+  height: fit-content;
+  font-size: inherit !important;
 `;

package/es/components/template/TemplateListing/components/Empty/styled.js

@@ -4,13 +4,13 @@ import styled from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const EmptyWrapper = styled(Flex) `
-  width: 100%;
-  height: 100%;
-
-  .antsomi-typography {
-    color: ${THEME.token?.bw8};
-  }
+export const EmptyWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+
+  .antsomi-typography {
+    color: ${THEME.token?.bw8};
+  }
 `;
 EmptyWrapper.defaultProps = {
     vertical: true,
@@ -18,17 +18,17 @@ EmptyWrapper.defaultProps = {
     justify: 'center',
     gap: 15,
 };
-export const EmptyIcon = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  border-radius: 100%;
-  background-color: ${THEME.token?.bw2};
-
-  i {
-    font-size: 24px;
-    color: ${THEME.token?.bw6};
-  }
+export const EmptyIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 100%;
+  background-color: ${THEME.token?.bw2};
+
+  i {
+    font-size: 24px;
+    color: ${THEME.token?.bw6};
+  }
 `;

package/es/components/template/TemplateListing/stories/demo/styled.js

@@ -1,7 +1,7 @@
 // Libraries
 import styled from 'styled-components';
-export const ImageWrapper = styled.img `
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+export const ImageWrapper = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 `;

package/es/components/template/TemplateListing/styled/index.js

@@ -2,46 +2,46 @@
 import styled from 'styled-components';
 // Components
 import { Flex } from '../../../atoms';
-export const TemplateListingWrapper = styled(Flex) `
-  position: relative;
-  height: 100%;
-
-  .template-listing {
-    width: 100%;
-    flex: 1 1 0%;
-    height: 100%;
-    max-height: 100%;
-    min-height: 200px;
-    overflow-y: auto;
-    box-sizing: border-box;
-
-    &__loading {
-      height: 100%;
-
-      .antsomi-spin-container {
-        height: 100%;
-        width: 100%;
-
-        > div {
-          max-height: 100%;
-        }
-      }
-
-      &--full {
-        width: 100%;
-      }
-    }
-
-    div.scrollbar-view {
-      box-sizing: border-box;
-      padding: 15px;
-    }
-  }
+export const TemplateListingWrapper = styled(Flex) `
+  position: relative;
+  height: 100%;
+
+  .template-listing {
+    width: 100%;
+    flex: 1 1 0%;
+    height: 100%;
+    max-height: 100%;
+    min-height: 200px;
+    overflow-y: auto;
+    box-sizing: border-box;
+
+    &__loading {
+      height: 100%;
+
+      .antsomi-spin-container {
+        height: 100%;
+        width: 100%;
+
+        > div {
+          max-height: 100%;
+        }
+      }
+
+      &--full {
+        width: 100%;
+      }
+    }
+
+    div.scrollbar-view {
+      box-sizing: border-box;
+      padding: 15px;
+    }
+  }
 `;
-export const TemplateWrapper = styled.div `
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+export const TemplateWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 `;
 export const LoadMoreBlock = styled.div ``;

package/es/constants/index.d.ts

@@ -12,4 +12,5 @@ export * from './theme';
 export * from './postMessage';
 export * from './condition';
 export * from './portal';
+export * from './web';
 export * from './unsubscribe';

package/es/constants/index.js

@@ -12,4 +12,5 @@ export * from './theme';
 export * from './postMessage';
 export * from './condition';
 export * from './portal';
+export * from './web';
 export * from './unsubscribe';

package/es/constants/web.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generic font families that are CSS keywords, not specific fonts
+ */
+export declare const GENERIC_FONT_FAMILIES: readonly ["serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded"];
+/**
+ * List of web safe fonts that are commonly available across different operating systems
+ */
+export declare const WEB_SAFE_FONTS: readonly ["times new roman", "times", "georgia", "garamond", "book antiqua", "palatino linotype", "palatino", "arial", "helvetica", "arial black", "impact", "lucida sans unicode", "tahoma", "verdana", "ms sans serif", "geneva", "lucida console", "lucida sans", "trebuchet ms", "courier new", "courier", "monaco", "menlo", "consolas", "lucida console", "comic sans ms", "brush script mt", "papyrus", "copperplate", "fantasy", "system ui"];

package/es/constants/web.js

@@ -0,0 +1,57 @@
+/**
+ * Generic font families that are CSS keywords, not specific fonts
+ */
+export const GENERIC_FONT_FAMILIES = [
+    'serif',
+    'sans-serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+    'system-ui',
+    'ui-serif',
+    'ui-sans-serif',
+    'ui-monospace',
+    'ui-rounded',
+];
+/**
+ * List of web safe fonts that are commonly available across different operating systems
+ */
+export const WEB_SAFE_FONTS = [
+    // Serif fonts
+    'times new roman',
+    'times',
+    'georgia',
+    'garamond',
+    'book antiqua',
+    'palatino linotype',
+    'palatino',
+    // Sans-serif fonts
+    'arial',
+    'helvetica',
+    'arial black',
+    'impact',
+    'lucida sans unicode',
+    'tahoma',
+    'verdana',
+    'ms sans serif',
+    'geneva',
+    'lucida console',
+    'lucida sans',
+    'trebuchet ms', // Added: Microsoft font since Windows 2000, but use carefully
+    // Monospace fonts
+    'courier new',
+    'courier',
+    'monaco',
+    'menlo',
+    'consolas',
+    'lucida console',
+    // Cursive fonts
+    'comic sans ms',
+    'brush script mt',
+    // Fantasy fonts
+    'papyrus',
+    'copperplate',
+    'fantasy',
+    // Unknown
+    'system ui',
+];

package/es/hooks/index.d.ts

@@ -26,5 +26,9 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';
+export * from './useIsMounted';
+export * from './useBroadcastedLocalStorage';
+export * from './useEyedropper';
 export * from './useFocusManagement';
 export * from './useCountdown';

package/es/hooks/index.js

@@ -45,5 +45,9 @@ export * from './useCustomRouter';
 export * from './useUpdateEffect';
 export * from './useOutsideClick';
 export * from './useDebouncedCallbackV2';
+export * from './useElementSize';
+export * from './useIsMounted';
+export * from './useBroadcastedLocalStorage';
+export * from './useEyedropper';
 export * from './useFocusManagement';
 export * from './useCountdown';

package/es/hooks/useBroadcastedLocalStorage.d.ts

@@ -0,0 +1,5 @@
+export declare function useBroadcastedLocalStorage<T>(key: string, initialValue: T): {
+    readonly value: T;
+    readonly setValue: (next: T | ((prev: T) => T)) => void;
+    readonly remove: () => void;
+};

package/es/hooks/useBroadcastedLocalStorage.js

@@ -0,0 +1,71 @@
+/* eslint-disable no-console */
+import { useEffect, useState, useRef } from 'react';
+import { useDeepCompareEffect } from './useDeepCompareEffect';
+export function useBroadcastedLocalStorage(key, initialValue) {
+    const [value, setValue] = useState(() => {
+        if (typeof window === 'undefined')
+            return initialValue;
+        try {
+            const saved = window.localStorage.getItem(key);
+            return saved != null ? JSON.parse(saved) : initialValue;
+        }
+        catch {
+            return initialValue;
+        }
+    });
+    // We keep a ref to avoid re-creating the channel on every render
+    const channelRef = useRef(null);
+    // Initialize BroadcastChannel once
+    useEffect(() => {
+        if (typeof window === 'undefined' || !('BroadcastChannel' in window)) {
+            console.warn('BroadcastChannel not supported in this environment');
+            return;
+        }
+        const channel = new BroadcastChannel(`localstorage_${key}`);
+        channelRef.current = channel;
+        // Listen for incoming messages
+        const onMessage = (event) => {
+            setValue(event.data.value);
+        };
+        channel.addEventListener('message', onMessage);
+        return () => {
+            channel.removeEventListener('message', onMessage);
+            channel.close();
+        };
+    }, [key]);
+    // Whenever `value` changes, persist and broadcast
+    useDeepCompareEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+        catch (err) {
+            console.error('Failed to write to localStorage:', err);
+        }
+        if (channelRef.current) {
+            channelRef.current.postMessage({ value });
+        }
+    }, [key, value]);
+    // Expose setter that mirrors functional API of useState
+    const setValueAndBroadcast = (next) => {
+        setValue(prev => {
+            const computed = next instanceof Function ? next(prev) : next;
+            return computed;
+        });
+    };
+    // Optional: a remove function
+    const remove = () => {
+        try {
+            window.localStorage.removeItem(key);
+            setValue(initialValue);
+            if (channelRef.current) {
+                channelRef.current.postMessage({ value: initialValue });
+            }
+        }
+        catch (err) {
+            console.error('Failed to remove localStorage item:', err);
+        }
+    };
+    return { value, setValue: setValueAndBroadcast, remove };
+}

package/es/hooks/useElementSize.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useElementSize: <T extends HTMLElement>(options?: {
+    type: string;
+}) => readonly [import("react").RefObject<T>, {
+    width: number;
+    height: number;
+}];

package/es/hooks/useElementSize.js

@@ -0,0 +1,56 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+export const useElementSize = (options = { type: 'offset' }) => {
+    const { type = 'offset' } = options;
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    const ref = useRef(null);
+    const updateSize = useCallback(() => {
+        if (ref.current) {
+            let width;
+            let height;
+            switch (type) {
+                case 'client':
+                    width = ref.current.clientWidth; // excludes padding, border, scrollbar
+                    height = ref.current.clientHeight;
+                    break;
+                case 'scroll':
+                    width = ref.current.scrollWidth; // includes all scrollable content
+                    height = ref.current.scrollHeight;
+                    break;
+                case 'offset':
+                default:
+                    width = ref.current.offsetWidth; // includes padding and border
+                    height = ref.current.offsetHeight;
+                    break;
+            }
+            setSize({ width, height });
+        }
+    }, [type]);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Set initial size
+        updateSize();
+        // Use ResizeObserver if available
+        if (typeof ResizeObserver !== 'undefined') {
+            const resizeObserver = new ResizeObserver(() => {
+                // Always use the same measurement method as updateSize
+                updateSize();
+            });
+            resizeObserver.observe(element);
+            return () => {
+                resizeObserver.unobserve(element);
+            };
+        }
+        // Fallback to window resize event
+        const handleResize = () => updateSize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [updateSize]);
+    return [ref, size];
+};

package/es/hooks/useEyedropper/attach.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Attaches polyfill to the current window
+ */
+export declare function attachPolyfill(): void;

package/es/hooks/useEyedropper/attach.js

@@ -0,0 +1,9 @@
+import { EyeDropperPolyfill } from './eyedropper';
+/**
+ * Attaches polyfill to the current window
+ */
+export function attachPolyfill() {
+    if (!Reflect.defineProperty(window, 'EyeDropper', { value: EyeDropperPolyfill })) {
+        throw Error("Error attaching `EyeDropper` polyfill: couldn't attach `EyeDropper` to `window`");
+    }
+}