@antscorp/antsomi-ui 1.3.5-beta.956 → 1.3.5-beta.958

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { ScrollbarProps as CustomScrollbarProps } from 'react-custom-scrollbars';
-export interface ScrollbarsProps extends CustomScrollbarProps {
-}
-export declare const Scrollbars: import("react").ForwardRefExoticComponent<Omit<ScrollbarsProps, "ref"> & import("react").RefAttributes<any>>;
+import { FC } from 'react';
+export type ScrollbarsProps = CustomScrollbarProps & {};
+export declare const Scrollbars: FC<ScrollbarsProps>;

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

@@ -0,0 +1,5 @@
+import type { SelectAssociatedTagProps } from './types';
+export declare const SelectAssociatedTag: {
+    (props: SelectAssociatedTagProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: SelectAssociatedTagProps;
+};

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Components
+import { StyledSpace } from './styled';
+import { Divider } from 'antd';
+import { Select } from '../../molecules';
+import SelectTag from './SelectTag';
+// Constants
+import { defaultProps } from './constants';
+export const SelectAssociatedTag = (props) => {
+    // Props
+    const { tagConfigs, selected, options, onSelect } = props;
+    const { tag, value } = selected || {};
+    return (_jsxs(StyledSpace, { className: "select-associated-tag", children: [_jsx(SelectTag, { ...tagConfigs, selectedTag: tag }), _jsx(Divider, { type: "vertical", style: { margin: '0px 1px 0px 6px' } }), _jsx(Select, { style: { width: '100%', height: '100%' }, value: value, options: options, onChange: onSelect })] }));
+};
+SelectAssociatedTag.defaultProps = defaultProps;

package/es/components/atoms/SelectAssociatedTag/SelectTag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TagConfigProps } from './types';
+declare const _default: import("react").MemoExoticComponent<(props: TagConfigProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/atoms/SelectAssociatedTag/SelectTag.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { memo, useMemo, useState } from 'react';
+import { keyBy } from 'lodash';
+// Components
+import { Flex, Typography } from 'antd';
+import { Popover } from '../Popover';
+import { SelectedTag } from './styled';
+const SelectTag = (props) => {
+    // Props
+    const { selectedTag, title, options, onSelect } = props;
+    // State
+    const [open, setOpen] = useState(false);
+    // Memoized
+    const mapOptsMemo = useMemo(() => keyBy(options, 'value'), [options]);
+    const selectedItem = useMemo(() => mapOptsMemo?.[selectedTag] || {}, [selectedTag, mapOptsMemo]);
+    const handleOpenChange = () => {
+        setOpen(!open);
+    };
+    const handleClick = (item) => {
+        setOpen(false);
+        onSelect(item);
+    };
+    return (_jsx(Popover, { open: open, title: _jsx(Typography.Text, { style: { fontWeight: '400', maxWidth: 130 }, ellipsis: { tooltip: title }, children: title }), content: _jsx(Flex, { wrap: "wrap", gap: 6, style: { padding: '10px 0px' }, children: options.map(item => (_jsx(SelectedTag, { "$color": item.color, "$background": item.background, ellipsis: { tooltip: item.label }, onClick: () => handleClick(item), children: item.label }, item.value))) }), placement: "bottomLeft", trigger: "click", overlayInnerStyle: { padding: 10, maxWidth: 150 }, onOpenChange: handleOpenChange, children: _jsx(SelectedTag, { "$color": selectedItem?.color, "$background": selectedItem?.background, ellipsis: { tooltip: selectedItem?.label }, children: selectedItem?.label }) }));
+};
+export default memo(SelectTag);

package/es/components/atoms/SelectAssociatedTag/constants.d.ts

@@ -0,0 +1,11 @@
+import type { SelectAssociatedTagProps, TagItem } from './types';
+export declare const DEFAULT_TAGS: {
+    readonly RAW: "RAW";
+    readonly md5: "md5";
+    readonly sha_256: "sha_256";
+    readonly MD5: "MD5";
+    readonly SHA_265: "SHA_265";
+};
+export declare const DEFAULT_TAGS_OPTS: Record<string, TagItem>;
+export declare const DEFAULT_TAGS_LIST: TagItem[];
+export declare const defaultProps: SelectAssociatedTagProps;

package/es/components/atoms/SelectAssociatedTag/constants.js

@@ -0,0 +1,43 @@
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Locales
+// import { translations, translate } from '@antscorp/antsomi-locales';
+export const DEFAULT_TAGS = {
+    RAW: 'RAW',
+    md5: 'md5',
+    sha_256: 'sha_256',
+    MD5: 'MD5',
+    SHA_265: 'SHA_265',
+};
+export const DEFAULT_TAGS_OPTS = {
+    RAW: { label: 'RAW', value: DEFAULT_TAGS.RAW, color: globalToken?.bw0, background: '#4CB4C9' },
+    md5: { label: 'md5', value: DEFAULT_TAGS.md5, color: globalToken?.bw0, background: '#3B8FDE' },
+    sha_256: {
+        label: 'sha-256',
+        value: DEFAULT_TAGS.sha_256,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+    MD5: { label: 'MD5', value: DEFAULT_TAGS.MD5, color: globalToken?.bw0, background: '#3B8FDE' },
+    SHA_265: {
+        label: 'SHA265',
+        value: DEFAULT_TAGS.SHA_265,
+        color: globalToken?.bw0,
+        background: '#12B800',
+    },
+};
+export const DEFAULT_TAGS_LIST = Object.values(DEFAULT_TAGS_OPTS);
+export const defaultProps = {
+    tagConfigs: {
+        options: DEFAULT_TAGS_LIST,
+        // title: translate(translations._, 'Hash Method'),
+        title: 'Hash Method',
+        onSelect: () => { },
+    },
+    selected: {
+        tag: DEFAULT_TAGS.RAW,
+        value: DEFAULT_TAGS.SHA_265,
+    },
+    options: DEFAULT_TAGS_LIST,
+    onSelect: () => { },
+};

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

@@ -0,0 +1,2 @@
+export { SelectAssociatedTag } from './SelectAssociatedTag';
+export type { SelectAssociatedTagProps } from './types';

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

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

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { TagItem } from './types';
+export declare const StyledSpace: import("styled-components").StyledComponent<import("react").FC<import("antd/es/space/Compact").SpaceCompactProps>, any, {}, never>;
+export declare const SelectedTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {
+    $background: TagItem['background'];
+    $color: TagItem['color'];
+}, never>;

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

@@ -0,0 +1,46 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Space } from '../Space';
+import { Typography } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSpace = styled(Space.Compact) `
+  width: 100%;
+  height: 30px;
+  padding-left: 5px;
+  align-items: center;
+
+  border-bottom: 1px solid ${globalToken?.blue1};
+
+  > div:last-child {
+    width: 100%;
+  }
+
+  .antsomi-divider.antsomi-divider-vertical {
+    height: 20px;
+  }
+
+  .antsomi-select-selector {
+    border: none !important;
+  }
+`;
+export const SelectedTag = styled(Typography.Text) `
+  border-radius: 3px;
+  height: 16px;
+  line-height: 16px;
+  padding-left: 3px;
+  padding-right: 3px;
+  flex-shrink: 0;
+  cursor: pointer;
+
+  background: ${props => props.$background};
+
+  &.antsomi-typography {
+    color: ${props => props.$color};
+
+    &.antsomi-typography-ellipsis {
+      max-width: 50px;
+    }
+  }
+`;

package/es/components/atoms/SelectAssociatedTag/types.d.ts

@@ -0,0 +1,54 @@
+import { Dictionary } from 'lodash';
+import { CSSProperties } from 'react';
+export type TagItem = {
+    label: string;
+    value: string;
+    background: CSSProperties['background'];
+    color: CSSProperties['color'];
+};
+export interface TagConfigProps {
+    selectedTag: TagItem['value'];
+    title?: string;
+    options: TagItem[];
+    onSelect: (newItem: TagItem) => void;
+}
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+/**
+ * Properties for the SelectAssociatedTag component.
+ */
+export interface SelectAssociatedTagProps {
+    /**
+     * Configuration properties for tag options, excluding the selected tag.
+     * @type {Omit<TagConfigProps, 'selectedTag'>}
+     */
+    tagConfigs: Omit<TagConfigProps, 'selectedTag'>;
+    /**
+     * The currently selected tag and its associated value.
+     * @type {{ tag: string; value: string; }}
+     */
+    selected: {
+        /**
+         * The identifier for the selected tag.
+         * @type {string}
+         */
+        tag: string;
+        /**
+         * The value associated with the selected tag.
+         * @type {Dictionary<SelectOption>}
+         */
+        value: Dictionary<SelectOption>;
+    };
+    /**
+     * A list of selectable options.
+     * @type {SelectOption[]}
+     */
+    options: SelectOption[];
+    /**
+     * Callback function called when an option is selected.
+     * @type {(value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void}
+     */
+    onSelect: (value: Dictionary<SelectOption>, option: SelectOption | SelectOption[]) => void;
+}

package/es/components/atoms/SelectAssociatedTag/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -34,6 +34,7 @@ export { Image } from './Image';
 export { IconField } from './IconField';
 export { Suspense } from './Suspense';
 export { App } from './App';
+export { SelectAssociatedTag } from './SelectAssociatedTag';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
@@ -54,3 +55,4 @@ export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';
 export type { ImageProps } from './Image';
 export type { AppProps } from './App';
+export type { SelectAssociatedTagProps } from './SelectAssociatedTag';

package/es/components/atoms/index.js

@@ -34,6 +34,7 @@ export { Image } from './Image';
 export { IconField } from './IconField';
 export { Suspense } from './Suspense';
 export { App } from './App';
+export { SelectAssociatedTag } from './SelectAssociatedTag';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';

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

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

package/es/components/organism/ModifyColumnModal/styled.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { ModalV2Props } from '../../molecules/ModalV2';
 export declare const StyledModal: import("styled-components").StyledComponent<(props: ModalV2Props) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
-export declare const ParentMetricWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../atoms/Scrollbars").ScrollbarsProps, "ref"> & import("react").RefAttributes<any>>, any, {}, never>;
-export declare const ChildrenMetricWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../atoms/Scrollbars").ScrollbarsProps, "ref"> & import("react").RefAttributes<any>>, any, {}, never>;
+export declare const ParentMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("react-custom-scrollbars").ScrollbarProps>, any, {}, never>;
+export declare const ChildrenMetricWrapper: import("styled-components").StyledComponent<import("react").FC<import("react-custom-scrollbars").ScrollbarProps>, any, {}, never>;
 export declare const SelectedMetricsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const SelectedMetricItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
     disabled?: boolean | undefined;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.956",
+  "version": "1.3.5-beta.958",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -62,6 +62,7 @@
   ],
   "dependencies": {
     "@antscorp/antsomi-locales": "1.0.28",
+    "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
@@ -137,8 +138,7 @@
     "use-context-selector": "^1.4.4",
     "use-image": "^1.1.1",
     "use-immer": "^0.4.1",
-    "zustand": "^4.5.2",
-    "@ant-design/cssinjs": "^1.6.2"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@antscorp/eslint-config-antsomi": "1.0.4",
@@ -170,6 +170,7 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/currency-formatter": "1.5.1",
     "@types/he": "^1.2.3",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.17.13",
@@ -177,19 +178,18 @@
     "@types/pako": "2.0.0",
     "@types/react": "^18.0.33",
     "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-dom": "^18.0.11",
+    "@types/react-frame-component": "^4.1.6",
     "@types/react-helmet": "^6.1.11",
     "@types/react-resizable": "^3.0.7",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/react-window": "^1.8.8",
     "@types/styled-components": "^5.1.26",
     "@types/yaireo__tagify": "^4.27.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
-    "@types/currency-formatter": "1.5.1",
-    "@types/react-custom-scrollbars": "^4.0.13",
-    "@types/react-frame-component": "^4.1.6",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",