@pushwoosh/dumb-components 1.0.15 → 1.0.17

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -5,17 +5,18 @@ import { DropdownContext } from '../../context';
 const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
 export const DropdownMenu = ({
   renderHandler,
-  children,
+  color,
   isScrollable,
   menuZIndex,
-  menuPlacement
+  menuPlacement,
+  children
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const {
     refs,
     floatingStyles
   } = useFloating({
-    middleware: [offset(2), autoPlacement({
+    middleware: [offset(4), autoPlacement({
       allowedPlacements: menuPlacement ? [menuPlacement] : defaultPlacements
     })]
   });
@@ -42,6 +43,7 @@ export const DropdownMenu = ({
   }), isOpen && React.createElement(Place, {
     ref: refs.setFloating,
     style: floatingStyles,
+    "$color": color,
     "$scrollable": isScrollable,
     "$zIndex": menuZIndex
   }, typeof children === 'function' ? children() : children));

package/DropdownMenu/components/DropdownMenu/styles.d.ts

@@ -11,6 +11,7 @@ export declare const Place: import("styled-components").StyledComponent<"div", a
 } & {
     $gridAutoFlow: string;
 } & {
+    $color?: string;
     $zIndex?: number;
     $scrollable?: boolean;
 }, "$gridAutoFlow">;

package/DropdownMenu/components/DropdownMenu/styles.js

@@ -5,7 +5,9 @@ const scrollableCss = css(["max-height:248px;overflow-y:auto;"]);
 export const Place = styled(Vertical).withConfig({
   displayName: "Place",
   componentId: "sc-ij8wqc-0"
-})(["border:1px solid ", ";background-color:", ";min-width:140px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, Color.FROZEN, ({
+})(["border:1px solid ", ";background:", ";min-width:140px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, ({
+  $color
+}) => $color || Color.FROZEN, ({
   $scrollable
 }) => $scrollable && scrollableCss, ShapeRadius.CONTROL, Shadow.REGULAR, ({
   $zIndex

package/DropdownMenu/components/DropdownMenu/types.d.ts

@@ -1,5 +1,6 @@
-import { type ReferenceType, type Placement } from '@floating-ui/react-dom';
+import type { ReferenceType, Placement } from '@floating-ui/react-dom';
 import type { ReactNode } from 'react';
+import type { Color } from '@pushwoosh/kit-constants';
 export type HandlerProps = {
     onClick: () => void;
     ref: (el: ReferenceType | null) => void;
@@ -8,6 +9,7 @@ export type HandlerProps = {
 export type DropdownMenuProps = {
     renderHandler: (args: HandlerProps) => ReactNode;
     children: (() => ReactNode) | ReactNode;
+    color?: Color.CLEAR | Color.FROZEN;
     isScrollable?: boolean;
     menuZIndex?: number;
     menuPlacement?: Placement;

package/DropdownMenu/components/DropdownMenuItem/styles.js

@@ -3,7 +3,7 @@ import { Color, Spacing, UnitSize } from '@pushwoosh/kit-constants';
 export const DropdownMenuItemStyled = styled.button.withConfig({
   displayName: "DropdownMenuItemStyled",
   componentId: "sc-1wmyvxp-0"
-})(["appearance:none;display:flex;align-items:center;padding:0 ", ";height:", ";border:none;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], Spacing.S4, UnitSize.FIELD_HEIGHT, ({
+})(["appearance:none;display:flex;align-items:center;padding:0 ", ";min-height:", ";border:none;color:", ";background:none;cursor:pointer;&:hover{background:", ";color:", ";}&:disabled{color:", ";cursor:not-allowed;}"], Spacing.S4, UnitSize.FIELD_HEIGHT, ({
   $active,
   $danger
 }) => {

package/FieldBox/FieldBox.js

@@ -1,19 +1,50 @@
 import React from 'react';
-import { Color, Spacing } from '@pushwoosh/kit-constants';
-import { Vertical } from '@pushwoosh/kit-helpers';
+import { Color, Spacing, Tag } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { OpenIcon, InfoRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
+import { Tooltip } from '../Tooltip';
+import { TitleBox, Link } from './styles';
 export function FieldBox(props) {
   const {
     title,
     description,
+    isOptional,
+    link,
+    tooltip,
+    actions,
     error,
     children
   } = props;
   return React.createElement(Vertical, {
     "$gap": Spacing.S1
-  }, React.createElement(Text, {
+  }, React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$justifyContent": "space-between"
+  }, React.createElement(TitleBox, null, React.createElement(Text, {
     "$variant": "h5"
-  }, title), children, description && React.createElement(Text, {
+  }, title), isOptional && React.createElement(Text, {
+    "$color": Color.LOCKED,
+    "$variant": "footnote"
+  }, "(optional)"), tooltip && React.createElement(Tooltip, {
+    content: tooltip,
+    position: "right-middle"
+  }, React.createElement("div", null, React.createElement(InfoRoundIcon, {
+    color: Color.LOCKED,
+    size: "small",
+    view: "lined"
+  }))), link && React.createElement(Link, {
+    as: Tag.A,
+    href: link,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, React.createElement(OpenIcon, {
+    size: "small",
+    view: "lined"
+  }))), actions && React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": Spacing.S1
+  }, actions)), children, description && !error && React.createElement(Text, {
     "$variant": "h5",
     "$color": Color.LOCKED
   }, description), error && React.createElement(Text, {

package/FieldBox/styles.d.ts

@@ -0,0 +1,20 @@
+import { Spacing } from '@pushwoosh/kit-constants';
+import { Link as LinkBase } from '../Link';
+export declare const TitleBox: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $alignItems: string;
+    $justifyContent: string;
+    $gap: Spacing;
+}, "$gridAutoFlow" | "$alignItems" | "$gap" | "$justifyContent">;
+export declare const Link: import("styled-components").StyledComponent<typeof LinkBase, any, {}, never>;

package/FieldBox/styles.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Link as LinkBase } from '../Link';
+export const TitleBox = styled(Horizontal).attrs({
+  $alignItems: 'center',
+  $justifyContent: 'start',
+  $gap: Spacing.S1
+}).withConfig({
+  displayName: "TitleBox",
+  componentId: "sc-lzrphm-0"
+})(["text-transform:uppercase;"]);
+export const Link = styled(LinkBase).withConfig({
+  displayName: "Link",
+  componentId: "sc-lzrphm-1"
+})(["color:", ";&:hover{color:", ";}&:active{opacity:0.5;}"], Color.SOFT, Color.PRIMARY_HOVER);

package/FieldBox/types.d.ts

@@ -2,5 +2,9 @@ import { type PropsWithChildren, type ReactNode } from 'react';
 export type FieldBoxProps = PropsWithChildren<{
     title: ReactNode;
     description?: ReactNode;
+    isOptional?: boolean;
+    link?: string;
+    tooltip?: string;
+    actions?: ReactNode;
     error?: ReactNode;
 }>;

package/index.d.ts

@@ -1,4 +1,3 @@
-export { ActionsGroup, ActionsGroupItem } from './ActionsGroup';
 export { Badge, type BadgeColor } from './Badge';
 export { Banner, type BannerType } from './Banner';
 export { Button, GhostButton } from './Button';

package/index.js

@@ -1,4 +1,3 @@
-export { ActionsGroup, ActionsGroupItem } from './ActionsGroup';
 export { Badge } from './Badge';
 export { Banner } from './Banner';
 export { Button, GhostButton } from './Button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/ActionsGroup/ActionsGroup.d.ts

@@ -1,3 +0,0 @@
-import { type ReactElement } from 'react';
-import type { ActionsGroupProps } from './types';
-export declare function ActionsGroup(props: ActionsGroupProps): ReactElement;

package/ActionsGroup/ActionsGroup.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { ActionsGroupBox, ActionsGroupInner } from './styles';
-export function ActionsGroup(props) {
-  const {
-    boxRef,
-    align,
-    gap,
-    children,
-    ...rest
-  } = props;
-  return React.createElement(ActionsGroupBox, {
-    ...rest,
-    ref: boxRef
-  }, React.createElement(ActionsGroupInner, {
-    "$align": align,
-    "$gap": gap
-  }, children));
-}

package/ActionsGroup/ActionsGroupItem.d.ts

@@ -1,3 +0,0 @@
-import { type ReactElement } from 'react';
-import type { ActionsGroupItemProps } from './types';
-export declare function ActionsGroupItem(props: ActionsGroupItemProps): ReactElement;

package/ActionsGroup/ActionsGroupItem.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ActionsGroupItemBox } from './styles';
-export function ActionsGroupItem(props) {
-  const {
-    boxRef,
-    ...rest
-  } = props;
-  return React.createElement(ActionsGroupItemBox, {
-    ...rest,
-    ref: boxRef
-  });
-}

package/ActionsGroup/index.d.ts

@@ -1,3 +0,0 @@
-export { ActionsGroup } from './ActionsGroup';
-export { ActionsGroupItem } from './ActionsGroupItem';
-export type { ActionsGroupProps, ActionsGroupItemProps } from './types';

package/ActionsGroup/index.js

@@ -1,2 +0,0 @@
-export { ActionsGroup } from './ActionsGroup';
-export { ActionsGroupItem } from './ActionsGroupItem';

package/ActionsGroup/styles.d.ts

@@ -1,7 +0,0 @@
-import type { ActionsGroupProps } from './types';
-export declare const ActionsGroupBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionsGroupItemBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionsGroupInner: import("styled-components").StyledComponent<"div", any, {
-    $align: ActionsGroupProps["align"];
-    $gap: ActionsGroupProps["gap"];
-}, never>;

package/ActionsGroup/styles.js

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-export const ActionsGroupBox = styled.div.withConfig({
-  displayName: "ActionsGroupBox",
-  componentId: "sc-eb6b51-0"
-})([""]);
-export const ActionsGroupItemBox = styled.div.withConfig({
-  displayName: "ActionsGroupItemBox",
-  componentId: "sc-eb6b51-1"
-})([""]);
-export const ActionsGroupInner = styled.div.withConfig({
-  displayName: "ActionsGroupInner",
-  componentId: "sc-eb6b51-2"
-})(["display:flex;flex-wrap:nowrap;align-items:center;justify-content:", ";margin:0 ", ";", "{padding:0 ", ";}"], ({
-  $align
-}) => $align === 'end' ? 'flex-end' : 'flex-start', ({
-  $gap
-}) => `calc(-${$gap}/2)`, ActionsGroupItemBox, ({
-  $gap
-}) => `calc(${$gap}/2)`);
-ActionsGroupBox.displayName = 'ActionsGroupBox';
-ActionsGroupInner.displayName = 'ActionsGroupInner';
-ActionsGroupItemBox.displayName = 'ActionsGroupBox';

package/ActionsGroup/types.d.ts

@@ -1,12 +0,0 @@
-import type { Ref, ReactNode } from 'react';
-import type { Spacing } from '@pushwoosh/kit-constants';
-export type ActionsGroupProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
-    readonly boxRef?: Ref<HTMLDivElement>;
-    readonly align: 'start' | 'end';
-    readonly gap: Spacing;
-    readonly children: ReactNode;
-};
-export type ActionsGroupItemProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
-    readonly boxRef?: Ref<HTMLDivElement>;
-    readonly children: ReactNode;
-};

package/ActionsGroup/types.js

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