@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.70

package/es/components/molecules/ColorPicker/ChromePicker/styled.js

@@ -2,14 +2,14 @@
 import styled from 'styled-components';
 // Components
 import { ChromePicker } from 'react-color';
-export const StyledChromePicker = styled(ChromePicker) `
-  padding: 0px !important;
-  --tw-shadow: 0 0 #0000 !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
-
-  div + div {
-    padding-left: 0px !important;
-    padding-right: 0px !important;
-  }
+export const StyledChromePicker = styled(ChromePicker) `
+  padding: 0px !important;
+  --tw-shadow: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow) !important;
+
+  div + div {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
 `;

package/es/components/molecules/ColorPicker/CustomPicker/styled.js

@@ -7,98 +7,98 @@ import { InputNumber } from '../../InputNumber';
 import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const CustomPickerWrapper = styled.div `
-  position: relative;
-  width: 260px;
+export const CustomPickerWrapper = styled.div `
+  position: relative;
+  width: 260px;
 `;
-export const SaturationPointer = styled.div `
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.2);
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-  box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px;
-  box-sizing: border-box;
-  transform: translate(-10px, -10px);
+export const SaturationPointer = styled.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
 `;
-export const HuePointer = styled.div `
-  width: 14px;
-  height: 14px;
-  border-radius: 6px;
-  background-color: rgb(248, 248, 248);
-  transform: translate(-6px, -1px);
-  box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px;
+export const HuePointer = styled.div `
+  width: 14px;
+  height: 14px;
+  border-radius: 6px;
+  background-color: rgb(248, 248, 248);
+  transform: translate(-6px, -1px);
+  box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px;
 `;
-export const PreviewColorPoint = styled.div `
-  width: 36px;
-  height: 36px;
-  background: ${({ $color }) => `linear-gradient(${$color ? `${$color}, ${$color}` : '#fff, #fff'}), url(${TransparentSvg}) repeat`};
-  border-radius: 9999px;
-  flex-shrink: 0;
+export const PreviewColorPoint = styled.div `
+  width: 36px;
+  height: 36px;
+  background: ${({ $color }) => `linear-gradient(${$color ? `${$color}, ${$color}` : '#fff, #fff'}), url(${TransparentSvg}) repeat`};
+  border-radius: 9999px;
+  flex-shrink: 0;
 `;
-export const EditableInputWrapper = styled.div `
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  input {
-    height: 30px;
-    width: 100%;
-    border-style: none;
-    border-radius: 0px;
-    padding-left: 5px;
-    padding-right: 5px;
-    font-family: Roboto;
-    font-size: ${THEME.token?.fontSize}px;
-    --tw-shadow: 0 1px 0 0 #e0e0e0;
-    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-      var(--tw-shadow);
-
-    &::placeholder {
-      color: ${THEME.token?.accent5};
-    }
-
-    &:hover {
-      background-color: ${THEME.token?.blue0};
-    }
-
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    outline-style: none !important;
-
-    &:active,
-    &:focus {
-      background-color: ${THEME.token?.blue0};
-      --tw-shadow: 0 1px 0 0 #194e8d;
-      --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-        var(--tw-shadow);
-    }
-
-    &:disabled {
-      background-color: ${THEME?.token?.accent1};
-      color: ${THEME.token?.accent5};
-      --tw-shadow: 0 1px 0 0 #e0e0e0;
-      --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
-      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-        var(--tw-shadow);
-    }
-  }
+export const EditableInputWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  input {
+    height: 30px;
+    width: 100%;
+    border-style: none;
+    border-radius: 0px;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-family: Roboto;
+    font-size: ${THEME.token?.fontSize}px;
+    --tw-shadow: 0 1px 0 0 #e0e0e0;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+
+    &::placeholder {
+      color: ${THEME.token?.accent5};
+    }
+
+    &:hover {
+      background-color: ${THEME.token?.blue0};
+    }
+
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    outline-style: none !important;
+
+    &:active,
+    &:focus {
+      background-color: ${THEME.token?.blue0};
+      --tw-shadow: 0 1px 0 0 #194e8d;
+      --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow);
+    }
+
+    &:disabled {
+      background-color: ${THEME?.token?.accent1};
+      color: ${THEME.token?.accent5};
+      --tw-shadow: 0 1px 0 0 #e0e0e0;
+      --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow);
+    }
+  }
 `;
-export const InputNumberWrapper = styled(props => _jsx(InputNumber, { ...props })) `
-  & > div {
-    width: unset !important;
-    padding: 0;
-  }
-
-  input {
-    padding: 0 6px !important;
-    text-align: center !important;
-  }
+export const InputNumberWrapper = styled(props => _jsx(InputNumber, { ...props })) `
+  & > div {
+    width: unset !important;
+    padding: 0;
+  }
+
+  input {
+    padding: 0 6px !important;
+    text-align: center !important;
+  }
 `;

package/es/components/molecules/ColorPicker/SketchPicker/styled.js

@@ -2,9 +2,9 @@
 import styled from 'styled-components';
 // Components
 import { SketchPicker } from 'react-color';
-export const SketchPickerWrapper = styled(SketchPicker) `
-  --tw-shadow: 0 0 #0000 !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow) !important;
-  padding: 0px !important;
+export const SketchPickerWrapper = styled(SketchPicker) `
+  --tw-shadow: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow) !important;
+  padding: 0px !important;
 `;

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

@@ -7,8 +7,10 @@ export interface ColorPickerProps {
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;
+    onAfterClosePicker?: (color: string) => void;
     showInput?: boolean;
     positionInput?: 'right' | 'left';
     style?: React.CSSProperties;
+    inputProps?: any;
 }
 export declare const ColorPicker: React.FC<ColorPickerProps>;

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

@@ -22,8 +22,8 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
-    const { onChange = () => { } } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, inputProps = {}, } = props;
+    const { onChange = () => { }, onAfterClosePicker = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
     const [popoverVisible, setPopoverVisible] = useState(false);
@@ -71,7 +71,12 @@ export const ColorPicker = props => {
     const onPopoverVisibleChange = visible => {
         setPopoverVisible(visible);
     };
-    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
+    const handleAfterOpenChange = (visible) => {
+        if (!visible && typeof onAfterClosePicker === 'function') {
+            onAfterClosePicker(color);
+        }
+    };
+    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput, ...inputProps })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, afterOpenChange: handleAfterOpenChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
                             backgroundColor: color,
                             display: 'block',
                             width: 20,

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

@@ -1,10 +1,10 @@
 // Libraries
 import styled from 'styled-components';
-export const ColorPickerWrapper = styled.span `
-  display: flex;
-  align-content: center;
-  justify-content: center;
-  width: 100px;
-  margin-right: 10px;
-  margin-left: 10px;
+export const ColorPickerWrapper = styled.span `
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  width: 100px;
+  margin-right: 10px;
+  margin-left: 10px;
 `;

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

@@ -5,46 +5,46 @@ import { ColorPicker } from '@antscorp/antsomi-ui/es/components/molecules/ColorP
 import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
 // Components
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
-export const StyledColorPicker = styled(ColorPicker) `
-  &.antsomi-color-picker {
-    .antsomi-popover-button {
-      display: flex;
-      align-items: center;
-    }
-  }
+export const StyledColorPicker = styled(ColorPicker) `
+  &.antsomi-color-picker {
+    .antsomi-popover-button {
+      display: flex;
+      align-items: center;
+    }
+  }
 `;
-export const PresetColor = styled.div `
-  position: relative;
-  width: 24px;
-  height: 24px;
-  border-radius: 9999px;
-  overflow: hidden;
-  cursor: pointer;
-  background: url(${TransparentSvg}) repeat !important;
-
-  .__color {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    z-index: 1;
-    border-radius: 9999px;
-    border: 1px solid rgba(0, 0, 0, 0.12);
-  }
+export const PresetColor = styled.div `
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  overflow: hidden;
+  cursor: pointer;
+  background: url(${TransparentSvg}) repeat !important;
+
+  .__color {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    z-index: 1;
+    border-radius: 9999px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+  }
 `;
-export const ButtonPreset = styled(Button) `
-  width: 24px !important;
-  height: 24px !important;
-  padding: 0px !important;
-  margin: 0px !important;
-  min-width: fit-content !important;
+export const ButtonPreset = styled(Button) `
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0px !important;
+  margin: 0px !important;
+  min-width: fit-content !important;
 `;
-export const PresetWrapper = styled.div `
-  max-height: 100px;
-  overflow: auto;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  margin-top: 10px;
+export const PresetWrapper = styled.div `
+  max-height: 100px;
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 10px;
 `;

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.js

@@ -4,123 +4,123 @@ import styled from 'styled-components';
 import { Input } from '@antscorp/antsomi-ui/es';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import React from 'react';
-export const DropdownContent = styled.div `
-  width: 250px;
-  padding: 10px 10px 0px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
-  .custom-picker-content {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    row-gap: 12px;
-    height: 120px;
-    overflow-y: auto;
-
-    &.day-of-month-container {
-      grid-template-columns: repeat(7, 1fr);
-    }
-
-    & > .custom-picker-item {
-      padding: 2px 8px;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.custom-picker-item-selected {
-        background-color: ${THEME.token?.colorPrimary};
-        color: #fff;
-        &:hover {
-          background-color: ${THEME.token?.colorPrimary};
-        }
-      }
-
-      &:hover {
-        background-color: rgba(34, 34, 34, 0.04);
-      }
-    }
-  }
-
-  .month-controller {
-    display: flex;
-    justify-content: space-around;
-    user-select: none;
-    i {
-      cursor: pointer;
-      &:hover {
-        color: #000;
-      }
-    }
-  }
+export const DropdownContent = styled.div `
+  width: 250px;
+  padding: 10px 10px 0px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .custom-picker-content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 12px;
+    height: 120px;
+    overflow-y: auto;
+
+    &.day-of-month-container {
+      grid-template-columns: repeat(7, 1fr);
+    }
+
+    & > .custom-picker-item {
+      padding: 2px 8px;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.custom-picker-item-selected {
+        background-color: ${THEME.token?.colorPrimary};
+        color: #fff;
+        &:hover {
+          background-color: ${THEME.token?.colorPrimary};
+        }
+      }
+
+      &:hover {
+        background-color: rgba(34, 34, 34, 0.04);
+      }
+    }
+  }
+
+  .month-controller {
+    display: flex;
+    justify-content: space-around;
+    user-select: none;
+    i {
+      cursor: pointer;
+      &:hover {
+        color: #000;
+      }
+    }
+  }
 `;
-export const DropdownHeader = styled.div `
-  padding: 10px 10px 0px 10px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-
-  > .__title {
-    color: ${THEME.token?.bw6};
-  }
+export const DropdownHeader = styled.div `
+  padding: 10px 10px 0px 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+
+  > .__title {
+    color: ${THEME.token?.bw6};
+  }
 `;
-export const DropdownFooter = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px 10px 10px;
+export const DropdownFooter = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px 10px 10px;
 `;
-export const DatePickerHeader = styled.div `
-  padding: 10px 10px 0px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  line-height: 1.6 !important;
+export const DatePickerHeader = styled.div `
+  padding: 10px 10px 0px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  line-height: 1.6 !important;
 `;
-export const DatePickerCustomInput = styled.input `
-  font-family: ${THEME.token?.fontFamily};
-  color: ${THEME.token?.bw10} !important;
-  text-overflow: ellipsis;
+export const DatePickerCustomInput = styled.input `
+  font-family: ${THEME.token?.fontFamily};
+  color: ${THEME.token?.bw10} !important;
+  text-overflow: ellipsis;
 `;
 const InputWithRef = React.forwardRef((props, ref) => (_jsx(Input, { ...props, ref: ref })));
-export const InputStyled = styled(InputWithRef) `
-  input {
-    text-overflow: ellipsis;
-  }
+export const InputStyled = styled(InputWithRef) `
+  input {
+    text-overflow: ellipsis;
+  }
 `;
-export const DatePickerFooter = styled.div `
-  position: absolute;
-  bottom: 0px;
-  width: 100%;
+export const DatePickerFooter = styled.div `
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
 `;
-export const CalendarIconWrapper = styled.div `
-  display: inline-flex;
-  cursor: pointer;
-  pointer-events: all;
+export const CalendarIconWrapper = styled.div `
+  display: inline-flex;
+  cursor: pointer;
+  pointer-events: all;
 `;
-export const TimeLabel = styled.div `
-  position: absolute;
-  right: 0;
-  /* top: 120px; */
-  top: ${({ $isRangePicker, $onlyShowFixed }) => $onlyShowFixed ? '81px' : $isRangePicker ? '140px' : '120px'};
-  height: 39.1px;
-  width: ${props => `${props.$width}px`};
-  /* width: 180px; */
-  display: flex;
-  align-items: stretch;
-  justify-content: space-around;
-
-  span {
-    width: 60px;
-    display: block;
-    text-align: center;
-    font-weight: bold;
-    border-left: 1px solid rgba(5, 5, 5, 0.06);
-
-    &:first-child {
-      border-left-color: transparent;
-    }
-  }
+export const TimeLabel = styled.div `
+  position: absolute;
+  right: 0;
+  /* top: 120px; */
+  top: ${({ $isRangePicker, $onlyShowFixed }) => $onlyShowFixed ? '81px' : $isRangePicker ? '140px' : '120px'};
+  height: 39.1px;
+  width: ${props => `${props.$width}px`};
+  /* width: 180px; */
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+
+  span {
+    width: 60px;
+    display: block;
+    text-align: center;
+    font-weight: bold;
+    border-left: 1px solid rgba(5, 5, 5, 0.06);
+
+    &:first-child {
+      border-left-color: transparent;
+    }
+  }
 `;

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

@@ -2,10 +2,10 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const DatePickerWrapper = styled.div `
-  input {
-    &::placeholder {
-      font-size: ${THEME.token?.fontSize}px;
-    }
-  }
+export const DatePickerWrapper = styled.div `
+  input {
+    &::placeholder {
+      font-size: ${THEME.token?.fontSize}px;
+    }
+  }
 `;

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

@@ -4,17 +4,17 @@ import { AutoComplete } from 'antd';
 import styled from 'styled-components';
 // Components
 import { Modal } from '../Modal';
-export const InputSuggestion = styled(AutoComplete) `
-  .antsomi-select-selector {
-    border-right: none !important;
-    border-left: none !important;
-    border-top: none !important;
-    border-bottom: 1px solid #d9d9d9 !important;
-  }
+export const InputSuggestion = styled(AutoComplete) `
+  .antsomi-select-selector {
+    border-right: none !important;
+    border-left: none !important;
+    border-top: none !important;
+    border-bottom: 1px solid #d9d9d9 !important;
+  }
 `;
-export const ModalCustom = styled(Modal) `
-  .antsomi-modal-body {
-    overflow: auto;
-    max-height: 500px;
-  }
+export const ModalCustom = styled(Modal) `
+  .antsomi-modal-body {
+    overflow: auto;
+    max-height: 500px;
+  }
 `;