@antscorp/antsomi-ui 1.3.5-beta.927 → 1.3.5-beta.929

package/es/components/atoms/Icon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconProps as OriginIconProps } from '../../icons/types';
 export interface IconProps extends OriginIconProps {
     size?: number;

package/es/components/atoms/Switch/Switch.d.ts

@@ -1,3 +1,13 @@
-/// <reference types="react" />
-export declare const Switch: import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>;
-export type { SwitchProps } from 'antd';
+import React from 'react';
+import { type SwitchProps as AntdSwitchProps } from 'antd';
+import { DataType } from 'csstype';
+declare module 'react' {
+    interface CSSProperties {
+        '--switch-color'?: DataType.Color;
+    }
+}
+type SwitchProps = AntdSwitchProps & {
+    color?: string;
+};
+declare const Switch: React.FC<SwitchProps>;
+export { Switch, type SwitchProps };

package/es/components/atoms/Switch/Switch.js

@@ -1,3 +1,8 @@
-import { Switch as AntdSwitch } from 'antd';
-export const Switch = AntdSwitch;
-Switch.defaultProps = {};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { StyledSwitch } from './styled';
+const Switch = props => {
+    const { color = THEME.token?.colorPrimary || '#005eb8', ...rest } = props;
+    return _jsx(StyledSwitch, { style: { '--switch-color': color }, ...rest });
+};
+export { Switch };

package/es/components/atoms/Switch/index.d.ts

@@ -1,2 +1 @@
-export { Switch } from './Switch';
-export type { SwitchProps } from 'antd';
+export { Switch, type SwitchProps } from './Switch';

package/es/components/atoms/Switch/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledSwitch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").SwitchProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/atoms/Switch/styled.js

@@ -0,0 +1,60 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Switch } from 'antd';
+import styled from 'styled-components';
+export const StyledSwitch = styled(Switch) `
+  &.antsomi-switch {
+    border: 2px solid var(--switch-color);
+
+    &.antsomi-switch-checked {
+      background: var(--switch-color);
+
+      > .antsomi-switch-handle {
+        &::before {
+          background-color: ${THEME.token?.bw0};
+        }
+      }
+
+      .antsomi-switch-inner {
+        padding-inline-start: 4px;
+        padding-inline-end: 18px;
+      }
+
+      &:hover:not(.antsomi-switch-disabled) {
+        background-color: var(--switch-color);
+      }
+    }
+
+    &.antsomi-switch-disabled {
+      background: ${THEME.token?.bw0};
+      border-color: ${THEME.token?.colorTextPlaceholder};
+
+      > .antsomi-switch-handle {
+        &::before {
+          background-color: ${THEME.token?.colorTextPlaceholder};
+        }
+      }
+
+      &.antsomi-switch-checked {
+        background: ${THEME.token?.colorTextPlaceholder};
+        border-color: ${THEME.token?.colorTextPlaceholder};
+
+        > .antsomi-switch-handle {
+          &::before {
+            background-color: ${THEME.token?.bw0};
+          }
+        }
+      }
+    }
+
+    .antsomi-switch-handle {
+      &::before {
+        background-color: var(--switch-color);
+      }
+    }
+
+    .antsomi-switch-inner {
+      padding-inline-start: 4px;
+      padding-inline-end: 18px;
+    }
+  }
+`;

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -85,7 +85,8 @@ const TagifyInput = forwardRef((props, ref) => {
                 throw new Error('Tagify instance is not initialized');
             }
             const { scope } = tagifyRef.current?.DOM;
-            const isValidSelection = isAnchorNodeChildOfElement(scope);
+            const anchorNodeInstance = _.get(tagifyRef.current, 'state.selection.anchorNode', null);
+            const isValidSelection = isAnchorNodeChildOfElement(scope, anchorNodeInstance);
             if (isValidSelection) {
                 const selection = window.getSelection();
                 if (!selection?.rangeCount)
@@ -114,17 +115,20 @@ const TagifyInput = forwardRef((props, ref) => {
             }
             const { settings, DOM } = tagifyRef.current;
             const rangeInstance = _.get(tagifyRef.current, 'state.selection.range', null);
+            const anchorNodeInstance = _.get(tagifyRef.current, 'state.selection.anchorNode', null);
             const { empty } = settings.classNames;
-            const isValidSelection = isAnchorNodeChildOfElement(DOM.scope);
+            const isValidAnchor = isAnchorNodeChildOfElement(DOM.scope, anchorNodeInstance);
             const selection = window.getSelection();
+            const isValidRange = selection?.rangeCount && rangeInstance;
+            const hasValidSelection = isValidRange && isValidAnchor;
             // In case not have the selection yet or lost the selection,
-            if (!selection?.rangeCount || !isValidSelection || !rangeInstance) {
+            if (!hasValidSelection) {
                 // need to restore the last range before inject a new tag if the last range exists
                 if (lastRange.current) {
                     selection?.removeAllRanges();
                     selection?.addRange(lastRange.current);
                 }
-                else {
+                else if (!isValidRange) {
                     // If the last range is lost, need to select the last text node of the input
                     const { input: inputElement } = tagifyRef.current.DOM;
                     if (inputElement) {

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

@@ -180,6 +180,7 @@ export declare const getAttributesString: (map: Map<string, string | boolean | n
  * is a child of a specific DOM element.
  *
  * @param {HTMLElement} element - The parent element to check against
+ * @param {HTMLElement} anchorNodeInstance - The anchor node of the Tagify instance
  * @returns {boolean} True if the anchor node is a child of the element, false otherwise
  */
-export declare const isAnchorNodeChildOfElement: (element: Node) => boolean;
+export declare const isAnchorNodeChildOfElement: (element: Node, anchorNodeInstance: Node | null) => boolean;

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

@@ -628,9 +628,10 @@ export const getAttributesString = (map) => Array.from(map.entries())
  * is a child of a specific DOM element.
  *
  * @param {HTMLElement} element - The parent element to check against
+ * @param {HTMLElement} anchorNodeInstance - The anchor node of the Tagify instance
  * @returns {boolean} True if the anchor node is a child of the element, false otherwise
  */
-export const isAnchorNodeChildOfElement = (element) => {
+export const isAnchorNodeChildOfElement = (element, anchorNodeInstance) => {
     // Get the current selection
     const selection = window.getSelection();
     // Check if there's an active selection
@@ -644,5 +645,5 @@ export const isAnchorNodeChildOfElement = (element) => {
         return false;
     }
     // Use Node.contains() to check if the element contains the anchor node
-    return element.contains(anchorNode);
+    return element.contains(anchorNode) && element.contains(anchorNodeInstance);
 };

package/es/components/organism/LeftMenu/types/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TFeatureMenu } from '@antscorp/antsomi-ui/es/models/LeftMenu';
 export type TMenuItem = Omit<Partial<TFeatureMenu>, 'children' | keyof TRequireMenuItemKey> & {
     key: string;

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -999,46 +999,6 @@ export const GlobalStyle = () => (_jsx(Global, { styles: css `
         }
       }
 
-      /* Switch */
-      .antsomi-switch {
-        border: 2px solid ${THEME.token?.colorPrimary} !important;
-
-        &.antsomi-switch-checked {
-          > .antsomi-switch-handle {
-            &::before {
-              background-color: ${THEME.token?.bw0} !important;
-            }
-          }
-        }
-
-        &.antsomi-switch-disabled[aria-checked='true'] {
-          background-color: ${THEME.token?.colorTextPlaceholder} !important;
-          border: 2px solid ${THEME.token?.colorTextPlaceholder} !important;
-
-          > .antsomi-switch-handle {
-            &::before {
-              background-color: ${THEME.token?.bw0} !important;
-            }
-          }
-        }
-
-        &.antsomi-switch-disabled[aria-checked='false'] {
-          background-color: ${THEME.token?.bw0} !important;
-          border: 2px solid ${THEME.token?.colorTextPlaceholder} !important;
-
-          > .antsomi-switch-handle {
-            &::before {
-              background-color: ${THEME.token?.colorTextPlaceholder} !important;
-            }
-          }
-        }
-
-        .antsomi-switch-inner {
-          padding-inline-start: 4px !important;
-          padding-inline-end: 18px !important;
-        }
-      }
-
       /* Tabs */
       .antsomi-tabs {
         .antsomi-tabs-tab {

package/es/types/richMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AREA_LAYOUT_KEYS, BLOCK_KEYS } from '../constants';
 import { TAlign } from './variables';
 export type TImageStyles = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.927",
+  "version": "1.3.5-beta.929",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -256,4 +256,3 @@
     "react-router-dom": ">= 5.1.0"
   }
 }
-