@antscorp/antsomi-ui 1.3.3-beta.3 → 1.3.3-beta.30

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

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

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const Popover: import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
-    _InternalPanelDoNotUseOrYouWillBeFired: typeof import("antd/es/popover/PurePanel").default;
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 };

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const PopoverWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
-    _InternalPanelDoNotUseOrYouWillBeFired: typeof import("antd/es/popover/PurePanel").default;
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;

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

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const Progress: import("react").FC<import("antd").ProgressProps>;
+export declare const Progress: import("react").ForwardRefExoticComponent<import("antd").ProgressProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const Radio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").RadioProps & import("react").RefAttributes<HTMLElement>> & {
+export declare const Radio: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").RadioProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>> & {
     Group: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>;
-    Button: import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<any>>;
+    Button: import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>>;
 }, any, {}, never>;
-export declare const RadioButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<any>>, any, {}, never>;
+export declare const RadioButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/radio/radioButton").RadioButtonProps & import("react").RefAttributes<import("rc-checkbox").CheckboxRef>>, any, {}, never>;
 export declare const RadioGroupSub: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>, any, {}, never>;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface RateContinuousProps {
+    count?: number;
+    className?: string;
+    defaultValue?: number;
+    /**
+     * @description number of star
+     */
+    value?: number;
+    type?: 'full' | 'half' | 'continuous';
+    /**
+     * @param value current number of stars are selected
+     * @description number of stars = fillWidth / STAR_WIDTH
+     */
+    onChange?: (value: number) => void;
+}
+export declare const RateV2: React.FC<RateContinuousProps>;
+export {};

package/es/components/atoms/RateV2/RateV2.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import StarImage from '@antscorp/antsomi-ui/es/assets/images/stars_slider.png';
+const STAR_WIDTH = 30;
+const parseNumDecimals = (input, decimals) => +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
+const roundHalf = (num) => {
+    const multiplier = 1 / 0.5;
+    return Math.round(num * multiplier) / multiplier;
+};
+/**
+ *
+ * @param width width measure from the left edge of star container
+ * @param type type of star - 'full' | 'half' | 'continuous'
+ * @default type 'full'
+ * @returns
+ */
+const getWidth = (width, type = 'full') => {
+    const numberOfStar = width / STAR_WIDTH;
+    return type === 'full'
+        ? Math.ceil(numberOfStar) * STAR_WIDTH
+        : type === 'half'
+            ? roundHalf(numberOfStar) * STAR_WIDTH
+            : width;
+};
+export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = 'full', onChange, }) => {
+    const fullWidth = count * STAR_WIDTH;
+    // The width is calculated when move mouse => change the UI, not change the real value
+    const [fillWidth, setFillWidth] = useState(() => defaultValue ? getWidth(defaultValue * STAR_WIDTH, type) : 0);
+    // The real current value that will be return to parent component by onChange function
+    // currWidth = value * STAR_WIDTH
+    const [currWidth, setCurrWidth] = useState(0);
+    const handleMouseMove = e => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const hoverWidth = Math.round(x);
+        setFillWidth(getWidth(hoverWidth, type));
+    };
+    const handleClick = () => {
+        // If have no value => auto set current value; if have value => must control value with onChange props
+        if (!value)
+            setCurrWidth(fillWidth);
+        if (onChange)
+            onChange(parseNumDecimals(fillWidth / STAR_WIDTH, 2));
+    };
+    useEffect(() => {
+        if (typeof value === 'number') {
+            const width = getWidth(value * STAR_WIDTH, type);
+            setCurrWidth(width);
+            setFillWidth(width);
+        }
+    }, [value]);
+    return (React.createElement("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
+            position: 'relative',
+            width: `${fullWidth}px`,
+            backgroundPosition: '-27px',
+            height: '28px',
+        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick },
+        React.createElement("div", { className: "custom-rate custom-rate--fill", style: {
+                position: 'absolute',
+                background: `url(${StarImage}) 0px 0px`,
+                width: `${fillWidth}px`,
+                height: '26px',
+                zIndex: 1,
+            } }),
+        React.createElement("div", { className: "custom-rate custom-rate--empty", style: {
+                position: 'absolute',
+                top: '0px',
+                left: '0px',
+                backgroundImage: 'none',
+                background: `transparent url(${StarImage}) 0px -26px`,
+                width: `${fullWidth}px`,
+                height: '26px',
+            } })));
+};

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

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

package/es/components/atoms/RateV2/index.js

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

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

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { TextProps } from '../Text';
 interface RequiredLabelProps extends TextProps {
     children?: ReactNode;
+    isReverseMask?: boolean;
 }
 export declare const RequiredLabel: React.FC<RequiredLabelProps>;
 export {};

package/es/components/atoms/RequiredLabel/index.js

@@ -17,8 +17,9 @@ import { Text } from '../Text';
 import { StyledRequired } from './styled';
 export const RequiredLabel = memo(props => {
     // Props
-    const { children } = props, restProps = __rest(props, ["children"]);
+    const { children, isReverseMask = false } = props, restProps = __rest(props, ["children", "isReverseMask"]);
     return (React.createElement(Text, Object.assign({}, restProps),
-        React.createElement(StyledRequired, null, "*"),
-        children));
+        !isReverseMask && React.createElement(StyledRequired, null, "*"),
+        children,
+        isReverseMask && React.createElement(StyledRequired, null, "*")));
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
-export interface SliderProps extends SliderSingleProps {
+export interface SliderProps extends Omit<SliderSingleProps, 'tooltipVisible'> {
+    tooltipVisible?: boolean | 'default';
 }
 export declare const Slider: React.FC<SliderProps | SliderRangeProps>;

package/es/components/atoms/Slider/index.js

@@ -1,30 +1,23 @@
-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, { memo, useMemo } from 'react';
 // Antd Components
 import { Slider as AntdSlider } from 'antd';
 // Styled
 import { SliderWrapper } from './styled';
+import { omit } from 'lodash';
 export const Slider = memo(props => {
-    const { range, value, min = 0, max = 0, className } = props, restOf = __rest(props, ["range", "value", "min", "max", "className"]);
+    const { range, value, min = 0, max = 0, className, tooltipVisible } = props;
     const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
     const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
+    const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
     if (isNegative) {
         return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, Object.assign({ min: min, max: max, value: value }, restOf, { marks: { 0: ' ' } }))));
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
+                    0: ' ',
+                } }))));
     }
     return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, Object.assign({}, props))));
+        React.createElement(AntdSlider, Object.assign({}, restProps))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
+export interface SliderProps {
+    defaultSliderTrack?: boolean;
+}
+export declare const SliderV2: React.FC<(SliderSingleProps & SliderProps) | (SliderRangeProps & SliderProps)>;

package/es/components/atoms/SliderV2/index.js

@@ -0,0 +1,21 @@
+// Libraries
+import React, { useState } from 'react';
+// Antd Components
+import { Slider as AntdSlider } from 'antd';
+// React.FC<SliderProps>
+export const SliderV2 = props => {
+    const { min, max, onChange, styles, range, value, defaultValue, marks, defaultSliderTrack } = props;
+    const [valueInternal, setValueInternal] = useState(defaultValue || min || 0);
+    if (min && max && min < 0 && max > 0 && !range && !defaultSliderTrack) {
+        const sliderWidth = max - min;
+        const calcValue = value || valueInternal;
+        const leftTrackPosition = `${(Math.abs(calcValue > 0 ? min : min - calcValue) / sliderWidth) * 100}%`;
+        const sliderTrackWidth = `${(Math.abs(calcValue) / sliderWidth) * 100}%`;
+        return (React.createElement(AntdSlider, Object.assign({ value: value || valueInternal, onChange: value => {
+                setValueInternal(value);
+                if (onChange)
+                    onChange(value);
+            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: marks || { 0: ' ' } }, props)));
+    }
+    return React.createElement(AntdSlider, Object.assign({}, props));
+};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SpaceProps } from 'antd';
 export declare const OriginSpace: React.FC<SpaceProps>;
-export declare const Space: React.FC<SpaceProps> & {
+export declare const Space: React.ForwardRefExoticComponent<SpaceProps & React.RefAttributes<HTMLDivElement>> & {
     Compact: React.FC<import("antd/es/space/Compact").SpaceCompactProps>;
 };

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

@@ -1 +1 @@
-export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinFCType, any, {}, never>;
+export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinType, any, {}, never>;

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

@@ -1,4 +1 @@
-/// <reference types="react" />
-export declare const Statistic: import("react").FC<import("antd").StatisticProps> & {
-    Countdown: import("react").NamedExoticComponent<import("antd").CountdownProps>;
-};
+export declare const Statistic: import("antd/es/statistic").CompoundedStatistic;

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

@@ -30,4 +30,10 @@ export { Spin } from './Spin';
 export { Alert } from './Alert';
 export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
+export { SliderV2 } from './SliderV2';
+export * from './Flex';
+export * from './RateV2';
+export { InputDynamic } from './InputDynamic';
 export type { SliderProps } from './Slider';
+export type { PaginationProps } from './Pagination';
+export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -30,3 +30,7 @@ export { Spin } from './Spin';
 export { Alert } from './Alert';
 export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
+export { SliderV2 } from './SliderV2';
+export * from './Flex';
+export * from './RateV2';
+export { InputDynamic } from './InputDynamic';

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -9,11 +9,35 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
+const { accent6, accent7, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
+      /* width */
+      ::-webkit-scrollbar {
+        width: ${scrollBarSize};
+        height: ${scrollBarSize};
+      }
+
+      /* Track */
+      ::-webkit-scrollbar-track {
+        background: ${accent6};
+      }
+
+      /* Handle */
+      ::-webkit-scrollbar-thumb {
+        background: ${accent7};
+      }
+
+      .scrollbar--gutter-stable {
+        overflow-y: auto;
+        scrollbar-gutter: stable;
+        margin-right: -${scrollBarSize};
+        padding-right: -${scrollBarSize};
+      }
+
       /* Button */
       .antsomi-btn {
         font-weight: 700 !important;
@@ -409,6 +433,12 @@ export const GlobalStyle = () => {
           font-size: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.fontSize}px;
           margin-right: 0;
 
+          .antsomi-radio-disabled {
+            .antsomi-radio-inner {
+              border-color: #d9d9d9 !important;
+            }
+          }
+
           .antsomi-radio-inner {
             display: flex;
             justify-content: center;
@@ -474,7 +504,7 @@ export const GlobalStyle = () => {
           }
         }
         .antsomi-modal-footer {
-          padding: 10px 16px;
+          padding: 15px;
           text-align: right;
           background: transparent;
           border-top: 1px solid #f0f0f0;
@@ -486,5 +516,42 @@ export const GlobalStyle = () => {
       .ant-message {
         z-index: 999999 !important;
       }
+
+      /* Collapse */
+      .antsomi-collapse-header {
+        font-size: 14px;
+      }
+
+      .antsomi-collapse {
+        &.antsomi-collapse-borderless {
+          border-bottom: 1px solid ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.gray5};
+        }
+
+        > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
+          transition: all 200ms;
+        }
+      }
+
+      /* Switch */
+      .antsomi-switch {
+        border: 2px solid ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary} !important;
+
+        &.antsomi-switch-checked {
+          > .antsomi-switch-handle {
+            &::before {
+              background-color: ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.bw0} !important;
+            }
+          }
+        }
+      }
+
+      /* Tabs */
+      .antsomi-tabs {
+        .antsomi-tabs-tab {
+          &.antsomi-tabs-tab-active {
+            font-weight: bold;
+          }
+        }
+      }
     ` }));
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const Collapse: import("react").ForwardRefExoticComponent<import("antd").CollapseProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Panel: import("react").ForwardRefExoticComponent<import("antd").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+import React from 'react';
+export declare const Collapse: React.ForwardRefExoticComponent<import("antd").CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.ForwardRefExoticComponent<import("antd").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 };

package/es/components/molecules/Collapse/Collapse.js

@@ -1,2 +1,11 @@
+// Libraries
+import React from 'react';
 import { Collapse as AntdCollapse } from 'antd';
+// Icons
+import { Icon } from '../../atoms';
 export const Collapse = AntdCollapse;
+Collapse.defaultProps = {
+    expandIcon({ isActive }) {
+        return (React.createElement(Icon, { type: "icon-ants-expand-more", size: 24, style: { transform: `rotate(${isActive ? -180 : 0}deg)`, color: '#666' } }));
+    },
+};

package/es/components/molecules/ColorSetting/styled.d.ts

@@ -1,14 +1,7 @@
 /// <reference types="react" />
 export declare const ColorSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PresetColor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;
 export declare const PresetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/FontSetting/constants.d.ts

@@ -0,0 +1,3 @@
+import { TFontSettings, TFontStyles } from './types';
+export declare const FONT_SETTING_DEFAULT: TFontSettings;
+export declare const FONT_STYLE_DEFAULT: TFontStyles;

package/es/components/molecules/FontSetting/constants.js

@@ -0,0 +1,22 @@
+export const FONT_SETTING_DEFAULT = {
+    fontColor: '#000000',
+    fontFamily: 'Roboto',
+    fontItalic: false,
+    fontSize: 14,
+    fontWeight: '400',
+    letterSpacing: 2,
+    lineHeight: 1.5,
+    textTransform: 'none',
+    textDecoration: 'none',
+};
+export const FONT_STYLE_DEFAULT = {
+    color: '#000000',
+    fontFamily: 'Roboto',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 1.5,
+    letterSpacing: 2,
+    textTransform: 'none',
+    textDecoration: 'none',
+    fontStyle: 'normal',
+};

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

@@ -2,17 +2,23 @@ import React from 'react';
 import { PopoverProps } from 'antd';
 import { SettingWrapperProps } from '../SettingWrapper';
 import { TFontSettings, TFontStyles } from './types';
+type TFontSettingOptions = 'fontFamily' | 'color' | 'fontSize' | 'fontWeight' | 'textTransform' | 'textDecoration' | 'italic' | 'lineHeight' | 'letterSpacing';
 export type TFontSettingProps = {
     label?: string;
-    settings: TFontSettings;
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
     wrapperProps?: Omit<SettingWrapperProps, 'label'>;
     popoverProps?: Omit<PopoverProps, 'content'>;
     childrenProps?: Omit<TFontSettingEditProps, 'settings' | 'styles' | 'onChange'>;
-    onChange?: TFontSettingEditProps['onChange'];
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
 };
 export type TFontSettingEditProps = {
-    settings: TFontSettings;
-    onChange?: (settings: Partial<TFontSettings>, styles?: TFontStyles) => void;
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
 };
 export declare const FontSettingEdit: React.FC<TFontSettingEditProps>;
 export declare const FontSetting: React.FC<TFontSettingProps>;
+export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 /* Components */
 import { Space, Switch } from '../../atoms';
 import { ColorSetting } from '../ColorSetting';
@@ -9,45 +9,46 @@ import { FontFamilySelect } from '../FontFamilySelect';
 import { FontWeightSelect } from '../FontWeightSelect';
 import { TextTransformSelect } from '../TextTransformSelect';
 import { TextDecorationSelect } from '../TextDecorationSelect';
-export const FontSettingEdit = (props) => {
-    const { settings, onChange } = props;
-    const generateStyles = (settings) => ({
-        fontFamily: settings.fontFamily,
-        fontColor: settings.fontColor,
-        fontSize: settings.fontSize,
-        fontWeight: settings.fontWeight,
-        lineHeight: settings.lineHeight,
-        letterSpacing: settings.letterSpacing,
-        textTransform: settings.textTransform,
-        textDecoration: settings.textDecoration,
-        fontStyle: settings.fontItalic ? 'italic' : 'normal',
-    });
-    const handleChange = (setting) => {
+import { FONT_SETTING_DEFAULT, FONT_STYLE_DEFAULT } from './constants';
+export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) => {
+    const handleChange = (setting, style) => {
         if (typeof onChange === 'function') {
             const newSettings = Object.assign(Object.assign({}, settings), setting);
-            const newStyles = generateStyles(newSettings);
+            const newStyles = Object.assign(Object.assign({}, styles), style);
             onChange(newSettings, newStyles);
         }
     };
-    return (React.createElement(Space, { direction: "vertical" },
-        React.createElement(FontFamilySelect, { label: "Font Family", value: settings === null || settings === void 0 ? void 0 : settings.fontFamily, onChange: family => handleChange({ fontFamily: family }) }),
-        React.createElement(ColorSetting, { label: "Font Color", color: settings === null || settings === void 0 ? void 0 : settings.fontColor, onChange: fontColor => handleChange({ fontColor }) }),
-        React.createElement(SettingWrapper, { label: "Font Size", vertical: true },
-            React.createElement(SliderWithInputNumber, { value: typeof (settings === null || settings === void 0 ? void 0 : settings.fontSize) !== 'undefined' ? +settings.fontSize : 0, onAfterChange: fontSize => handleChange({ fontSize }) })),
-        React.createElement(FontWeightSelect, { label: "Font Weight", value: settings === null || settings === void 0 ? void 0 : settings.fontWeight, showOptions: ['Light', 'Black'], onChange: fontWeight => handleChange({ fontWeight }) }),
-        React.createElement(SettingWrapper, { label: "Line Height", vertical: true },
-            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.lineHeight) !== 'undefined' ? +settings.lineHeight : 0, min: 1, max: 5, step: 0.1, onAfterChange: lineHeight => handleChange({ lineHeight }) })),
-        React.createElement(SettingWrapper, { label: "Letter Spacing", vertical: true },
-            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.letterSpacing) !== 'undefined' ? +settings.letterSpacing : 0, min: -10, max: 10, onAfterChange: letterSpacing => handleChange({ letterSpacing }) })),
-        React.createElement(TextTransformSelect, { label: "Text Transform", value: settings === null || settings === void 0 ? void 0 : settings.textTransform, onChange: textTransform => handleChange({ textTransform }) }),
-        React.createElement(TextDecorationSelect, { label: "Text Decoration", value: settings === null || settings === void 0 ? void 0 : settings.textDecoration, onChange: textDecoration => handleChange({ textDecoration }) }),
-        React.createElement(SettingWrapper, { label: "Font Style Italic" },
-            React.createElement(Switch, { checked: settings === null || settings === void 0 ? void 0 : settings.fontItalic, onChange: fontItalic => handleChange({ fontItalic }) }))));
+    const settingMap = useMemo(() => ({
+        fontFamily: (React.createElement(FontFamilySelect, { label: "Font Family", value: settings === null || settings === void 0 ? void 0 : settings.fontFamily, onChange: fontFamily => handleChange({ fontFamily }, { fontFamily }) })),
+        color: (React.createElement(ColorSetting, { label: "Font Color", color: settings === null || settings === void 0 ? void 0 : settings.fontColor, onChange: fontColor => handleChange({ fontColor }, { color: fontColor }) })),
+        fontSize: (React.createElement(SettingWrapper, { label: "Font Size", vertical: true },
+            React.createElement(SliderWithInputNumber, { value: typeof (settings === null || settings === void 0 ? void 0 : settings.fontSize) !== 'undefined' ? +settings.fontSize : 0, onAfterChange: fontSize => handleChange({ fontSize }, { fontSize }) }))),
+        fontWeight: (React.createElement(FontWeightSelect, { label: "Font Weight", value: settings === null || settings === void 0 ? void 0 : settings.fontWeight, onChange: fontWeight => handleChange({ fontWeight }, { fontWeight }) })),
+        lineHeight: (React.createElement(SettingWrapper, { label: "Line Height", vertical: true },
+            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.lineHeight) !== 'undefined' ? +settings.lineHeight : 0, min: 1, max: 5, step: 0.1, onAfterChange: lineHeight => handleChange({ lineHeight }, { lineHeight }) }))),
+        letterSpacing: (React.createElement(SettingWrapper, { label: "Letter Spacing", vertical: true },
+            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.letterSpacing) !== 'undefined' ? +settings.letterSpacing : 0, min: -10, max: 10, onAfterChange: letterSpacing => handleChange({ letterSpacing }, { letterSpacing }) }))),
+        textTransform: (React.createElement(TextTransformSelect, { label: "Text Transform", value: settings === null || settings === void 0 ? void 0 : settings.textTransform, onChange: textTransform => handleChange({ textTransform }, { textTransform }) })),
+        textDecoration: (React.createElement(TextDecorationSelect, { label: "Text Decoration", value: settings === null || settings === void 0 ? void 0 : settings.textDecoration, onChange: textDecoration => handleChange({ textDecoration }, { textDecoration }) })),
+        italic: (React.createElement(SettingWrapper, { label: "Font Style Italic" },
+            React.createElement(Switch, { checked: settings === null || settings === void 0 ? void 0 : settings.fontItalic, onChange: fontItalic => handleChange({ fontItalic }, { fontStyle: fontItalic ? 'italic' : 'normal' }) }))),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [settings]);
+    const filteredSetting = useMemo(() => {
+        if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
+            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
+        }
+        return showSettings.map(keySetting => settingMap[keySetting]);
+    }, [showSettings, settingMap]);
+    return React.createElement(Space, { direction: "vertical" }, filteredSetting);
 };
 export const FontSetting = (props) => {
-    const { label, settings, wrapperProps, popoverProps, childrenProps, onChange } = props;
-    return (React.createElement(SettingWrapperPopover, { label: label !== null && label !== void 0 ? label : 'Font Settings', 
-        //   labelStyle={{ fontWeight: 'bold', ...wrapperProps?.labelStyle }}
-        popoverProps: Object.assign({ overlayStyle: { top: 0 }, placement: 'bottomRight' }, popoverProps), wrapperProps: Object.assign({ containerStyle: { minWidth: '288px' } }, wrapperProps) },
-        React.createElement(FontSettingEdit, Object.assign({ settings: settings, onChange: onChange }, childrenProps))));
+    const { label, settings, styles, wrapperProps, popoverProps, childrenProps, showSettings, onChange, } = props;
+    return (React.createElement(SettingWrapperPopover, { label: label !== null && label !== void 0 ? label : 'Font Settings', popoverProps: Object.assign({ overlayStyle: { top: 0 }, placement: 'bottomRight' }, popoverProps), wrapperProps: Object.assign({ containerStyle: { minWidth: '288px' } }, wrapperProps) },
+        React.createElement(FontSettingEdit, Object.assign({ settings: settings, styles: styles, showSettings: showSettings, onChange: onChange }, childrenProps))));
+};
+FontSetting.defaultProps = {
+    settings: FONT_SETTING_DEFAULT,
+    styles: FONT_STYLE_DEFAULT,
 };

package/es/components/molecules/FontSetting/types.d.ts

@@ -11,7 +11,7 @@ export type TFontSettings = {
 };
 export type TFontStyles = {
     fontFamily: string;
-    fontColor: string;
+    color: string;
     fontSize: string | number;
     fontWeight: string | number;
     lineHeight: string | number;

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

@@ -0,0 +1 @@
+export { Form } from 'antd';

package/es/components/molecules/Form/Form.js

@@ -0,0 +1 @@
+export { Form } from 'antd';

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

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

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

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

package/es/components/molecules/IconSelection/styled.d.ts

@@ -2,14 +2,7 @@
 export declare const IconSelectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperListRender: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperListItemRender: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CustomButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const CustomButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;