@pushwoosh/smart-components-kit 1.1.7 → 1.1.9

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.d.ts

@@ -1,9 +1,11 @@
 import { type FC, type PropsWithChildren } from 'react';
 import { type DynamicContent } from '@pushwoosh/dumb-components/RichMessageEditor/slate/types';
+import type { SystemVariable } from './types';
 type SimpleDynamicContentPickerFormSmartProps = {
     dc?: DynamicContent;
     onChange: (dc: DynamicContent) => void;
     update?: () => void;
+    systemVariables?: SystemVariable[];
 };
 export declare const SimpleDynamicContentPickerFormSmart: FC<PropsWithChildren<SimpleDynamicContentPickerFormSmartProps>>;
 export {};

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -5,6 +5,7 @@ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useDynamicContentTags } from './hooks';
 import { useLang } from './polyglot';
 import { SimpleTagPickerDiv } from './styled';
+import { buildOptions } from './utils';
 const defaultDynamicContent = {
   tagName: '',
   modifier: 'regular',
@@ -14,6 +15,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
   dc = defaultDynamicContent,
   onChange,
   update,
+  systemVariables,
   children
 }) => {
   const lang = useLang();
@@ -34,9 +36,10 @@ export const SimpleDynamicContentPickerFormSmart = ({
       })
     });
   }
-  const tags = asyncResult.value || [];
-  const currentTag = tags.find(tag => tag.name === dc.tagName) || {
+  const options = buildOptions(systemVariables ?? [], asyncResult.value || []);
+  const selectedTag = options.find(option => option.name === dc.tagName) || {
     name: '',
+    label: '',
     modifiers: ['regular']
   };
   return _jsxs(SimpleTagPickerDiv, {
@@ -51,18 +54,19 @@ export const SimpleDynamicContentPickerFormSmart = ({
           menuPlacement: "auto",
           value: {
             value: dc.tagName,
-            label: dc.tagName
+            label: selectedTag.name ? selectedTag.label : dc.tagName
           },
           onChange: option => {
+            const picked = options.find(item => item.name === option.value);
             onChange({
               tagName: option.value,
-              modifier: currentTag.modifiers[0],
+              modifier: (picked === null || picked === void 0 ? void 0 : picked.modifiers[0]) ?? 'regular',
               defaultValue: ''
             });
           },
-          options: tags.map(tag => ({
-            value: tag.name,
-            label: tag.name
+          options: options.map(option => ({
+            value: option.name,
+            label: option.label
           }))
         }), _jsx(Select, {
           width: "auto",
@@ -77,11 +81,11 @@ export const SimpleDynamicContentPickerFormSmart = ({
               modifier: option.value
             });
           },
-          options: currentTag.modifiers.map(modifier => ({
+          options: selectedTag.modifiers.map(modifier => ({
             value: modifier,
             label: modifier
           })),
-          isDisabled: !currentTag.name
+          isDisabled: !selectedTag.name
         })]
       })
     }), _jsx(FieldBox, {
@@ -96,7 +100,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
             defaultValue: e.target.value
           });
         },
-        disabled: !currentTag.name
+        disabled: !selectedTag.name
       })
     }), children]
   });

package/DynamicContentPickerForm/index.d.ts

@@ -1,3 +1,3 @@
 export { SimpleDynamicContentPickerFormSmart } from './SimpleDynamicContentPickerFormSmart';
-export type { VariedDynamicContent } from './types';
+export type { VariedDynamicContent, SystemVariable, PickerOption } from './types';
 export * from './hooks';

package/DynamicContentPickerForm/types.d.ts

@@ -2,6 +2,16 @@ import type { Tag } from '@pushwoosh/rpc-v2-http-api-data/tags';
 export type FullTagData = Tag & {
     modifiers: string[];
 };
+export type SystemVariable = {
+    name: string;
+    label?: string;
+    modifiers?: string[];
+};
+export type PickerOption = {
+    name: string;
+    label: string;
+    modifiers: string[];
+};
 export type TagDynamicContent = {
     kind: 'tag';
     dc: {

package/DynamicContentPickerForm/utils.d.ts

@@ -1,2 +1,3 @@
-import { type VariedDynamicContent } from './types';
+import { type FullTagData, type PickerOption, type SystemVariable, type VariedDynamicContent } from './types';
+export declare function buildOptions(systemVariables: SystemVariable[], tags: FullTagData[]): PickerOption[];
 export declare function createDefaultDynamicContent(kind: 'tag' | 'event' | 'customText'): VariedDynamicContent;

package/DynamicContentPickerForm/utils.js

@@ -1,3 +1,17 @@
+export function buildOptions(systemVariables, tags) {
+  const taken = new Set(systemVariables.map(v => v.name));
+  const system = systemVariables.map(v => ({
+    name: v.name,
+    label: v.label ?? v.name,
+    modifiers: v.modifiers ?? ['regular']
+  }));
+  const rest = tags.filter(tag => !taken.has(tag.name)).map(tag => ({
+    name: tag.name,
+    label: tag.name,
+    modifiers: tag.modifiers
+  }));
+  return [...system, ...rest];
+}
 export function createDefaultDynamicContent(kind) {
   switch (kind) {
     case 'tag':

package/RichMessageEditorSmart/NewDynamicContentForm.d.ts

@@ -1,8 +1,10 @@
 import { type FC } from 'react';
 import { type DynamicContent } from '@pushwoosh/dumb-components/RichMessageEditor/slate/types';
+import { type SystemVariable } from '../DynamicContentPickerForm';
 type NewDynamicContentFormProps = {
     update?: () => void;
     onSubmit: (dc: DynamicContent) => void;
+    systemVariables?: SystemVariable[];
 };
 export declare const NewDynamicContentForm: FC<NewDynamicContentFormProps>;
 export {};

package/RichMessageEditorSmart/NewDynamicContentForm.js

@@ -2,11 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button } from '@pushwoosh/dumb-components';
 import { Horizontal } from '@pushwoosh/kit-helpers';
-import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 import { useLang } from './polyglot';
+import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 export const NewDynamicContentForm = ({
   update,
-  onSubmit
+  onSubmit,
+  systemVariables
 }) => {
   const [dc, setDc] = useState();
   const lang = useLang();
@@ -14,6 +15,7 @@ export const NewDynamicContentForm = ({
     dc: dc,
     onChange: setDc,
     update: update,
+    systemVariables: systemVariables,
     children: _jsx(Horizontal, {
       "$justifyContent": "end",
       children: _jsx(Button, {

package/RichMessageEditorSmart/RichMessageEditorSmart.d.ts

@@ -1,5 +1,8 @@
 import { type FC } from 'react';
 import { type RichMessageEditorProps } from '@pushwoosh/dumb-components/RichMessageEditor/RichMessageEditor.types';
-type RichMessageEditorSmartProps = Omit<RichMessageEditorProps, 'renderDynamicContent'>;
+import { type SystemVariable } from '../DynamicContentPickerForm';
+type RichMessageEditorSmartProps = Omit<RichMessageEditorProps, 'renderDynamicContent'> & {
+    systemVariables?: SystemVariable[];
+};
 export declare const RichMessageEditorSmart: FC<RichMessageEditorSmartProps>;
 export {};

package/RichMessageEditorSmart/RichMessageEditorSmart.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RichMessageEditor } from '@pushwoosh/dumb-components';
-import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
 import { NewDynamicContentForm } from './NewDynamicContentForm';
-export const RichMessageEditorSmart = props => {
+import { SimpleDynamicContentPickerFormSmart } from '../DynamicContentPickerForm';
+export const RichMessageEditorSmart = ({
+  systemVariables,
+  ...props
+}) => {
   return _jsx(RichMessageEditor, {
     ...props,
     renderDynamicContent: ({
@@ -12,10 +15,12 @@ export const RichMessageEditorSmart = props => {
     }) => dc ? _jsx(SimpleDynamicContentPickerFormSmart, {
       dc: dc,
       onChange: onChange,
-      update: update
+      update: update,
+      systemVariables: systemVariables
     }) : _jsx(NewDynamicContentForm, {
       update: update,
-      onSubmit: onChange
+      onSubmit: onChange,
+      systemVariables: systemVariables
     })
   });
 };

package/Table/components/ItemDetailLink/ItemDetailLink.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from 'react';
+declare const StyledItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare function ItemDetailLink({ withChevron, children, ...props }: ComponentProps<typeof StyledItemDetailLink> & {
+    withChevron?: boolean;
+}): import("react").JSX.Element;
+export {};

package/Table/components/ItemDetailLink/ItemDetailLink.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { Color, FontWeight } from '@pushwoosh/kit-constants';
+import { ChevronIcon } from '@pushwoosh/kit-icons';
+const StyledItemDetailLink = styled.a.withConfig({
+  displayName: "StyledItemDetailLink",
+  componentId: "sc-v0vtp2-0"
+})(["display:flex;align-items:center;text-decoration:none;font-weight:", ";color:", ";width:100%;min-width:0;&:hover{text-decoration:none;color:", ";}"], FontWeight.MEDIUM, Color.MAIN, Color.PRIMARY_HOVER);
+const Truncate = styled.span.withConfig({
+  displayName: "Truncate",
+  componentId: "sc-v0vtp2-1"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;"]);
+const Chevron = styled(ChevronIcon).withConfig({
+  displayName: "Chevron",
+  componentId: "sc-v0vtp2-2"
+})(["flex-shrink:0;"]);
+export function ItemDetailLink({
+  withChevron,
+  children,
+  ...props
+}) {
+  if (!withChevron) return _jsx(StyledItemDetailLink, {
+    ...props,
+    children: children
+  });
+  return _jsxs(StyledItemDetailLink, {
+    ...props,
+    children: [_jsx(Truncate, {
+      children: children
+    }), _jsx(Chevron, {
+      size: "small",
+      direction: "right"
+    })]
+  });
+}

package/Table/components/ItemDetailLink/index.d.ts

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

package/Table/components/ItemDetailLink/index.js

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

package/Table/index.d.ts

@@ -6,5 +6,6 @@ export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TablePagination } from './components/TablePagination';
 export { useDataTableContext, useDataTableGetParams } from './hooks';
-export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, } from './styles';
+export { Table, Td, Tr, Th, ElementHover, ItemName, LockedText, Description, } from './styles';
+export { ItemDetailLink } from './components/ItemDetailLink';
 export type { DataTableParams, DataTableData, DataTableContextType } from './types';

package/Table/index.js

@@ -6,4 +6,5 @@ export { DataTableSortableCell } from './components/DataTableSortableCell';
 export { Loading } from './components/Loading';
 export { TablePagination } from './components/TablePagination';
 export { useDataTableContext, useDataTableGetParams } from './hooks';
-export { Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './styles';
+export { Table, Td, Tr, Th, ElementHover, ItemName, LockedText, Description } from './styles';
+export { ItemDetailLink } from './components/ItemDetailLink';

package/Table/styles.d.ts

@@ -60,7 +60,6 @@ export declare const Th: import("styled-components").StyledComponent<"div", any,
 } & {
     $color?: string;
 }, "$padding">;
-export declare const ItemDetailLink: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const ItemName: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", any, {
     $maxLines?: number;

package/Table/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, LineHeight, ShapeRadius } from '@pushwoosh/kit-constants';
 import { GridContainer, Horizontal, Vertical, toCssValue } from '@pushwoosh/kit-helpers';
 export const Table = styled(Vertical).withConfig({
   displayName: "Table",
@@ -30,31 +30,27 @@ export const Tr = styled(Horizontal).attrs({
 }).withConfig({
   displayName: "Tr",
   componentId: "sc-1vdjaze-3"
-})(["grid-template-columns:var(--table-columns);&:hover{background-color:#89A4BF0D;}&:hover ", "{display:block;}"], ElementHover);
+})(["grid-template-columns:var(--table-columns);&:hover{background-color:", ";}&:hover ", "{display:block;}"], Color.ROW_HOVER, ElementHover);
 export const Th = styled(Td).withConfig({
   displayName: "Th",
   componentId: "sc-1vdjaze-4"
-})(["padding:8px 12px;color:#969ca3;font-weight:", ";font-size:", ";line-height:1;text-transform:uppercase;"], FontWeight.MEDIUM, FontSize.SMALL);
-export const ItemDetailLink = styled.a.withConfig({
-  displayName: "ItemDetailLink",
-  componentId: "sc-1vdjaze-5"
-})(["display:flex;align-items:center;text-decoration:none;font-weight:", ";color:", ";width:100%;&:hover{text-decoration:none;color:", ";}"], FontWeight.MEDIUM, Color.MAIN, Color.PRIMARY_HOVER);
+})(["padding:8px 12px;color:", ";font-weight:", ";font-size:", ";line-height:", ";text-transform:uppercase;"], Color.LOCKED, FontWeight.MEDIUM, FontSize.HEADING5, LineHeight.HEADING5);
 export const ItemName = styled.div.withConfig({
   displayName: "ItemName",
-  componentId: "sc-1vdjaze-6"
+  componentId: "sc-1vdjaze-5"
 })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 const overflowStyles = css(["overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:", ";"], ({
   $maxLines
 }) => $maxLines);
 export const Description = styled.div.withConfig({
   displayName: "Description",
-  componentId: "sc-1vdjaze-7"
-})(["color:", ";font-size:", ";font-style:normal;font-weight:", ";line-height:130%;", ""], Color.LOCKED, FontSize.SMALL, FontWeight.REGULAR, ({
+  componentId: "sc-1vdjaze-6"
+})(["color:", ";font-size:", ";font-weight:", ";line-height:", ";", ""], Color.LOCKED, FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL, ({
   $maxLines
 }) => $maxLines ? overflowStyles : undefined);
 export const LockedText = styled.div.withConfig({
   displayName: "LockedText",
-  componentId: "sc-1vdjaze-8"
+  componentId: "sc-1vdjaze-7"
 })(["color:", ";font-size:", ";font-weight:", ";max-width:", ";"], Color.LOCKED, ({
   $fontSize
 }) => $fontSize || FontSize.REGULAR, ({

package/package.json

@@ -48,5 +48,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.1.7"
+  "version": "1.1.9"
 }