@pushwoosh/dumb-components 1.0.14 → 1.0.16

package/DropdownMenu/components/DropdownMenu/DropdownMenu.js

@@ -6,6 +6,7 @@ const defaultPlacements = ['top-start', 'top-end', 'bottom-start', 'bottom-end']
 export const DropdownMenu = ({
   renderHandler,
   children,
+  isScrollable,
   menuZIndex,
   menuPlacement
 }) => {
@@ -41,6 +42,7 @@ export const DropdownMenu = ({
   }), isOpen && React.createElement(Place, {
     ref: refs.setFloating,
     style: floatingStyles,
+    "$scrollable": isScrollable,
     "$zIndex": menuZIndex
   }, typeof children === 'function' ? children() : children));
 };

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

@@ -12,6 +12,7 @@ export declare const Place: import("styled-components").StyledComponent<"div", a
     $gridAutoFlow: string;
 } & {
     $zIndex?: number;
+    $scrollable?: boolean;
 }, "$gridAutoFlow">;
 export declare const DropdownMenuSection: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;

package/DropdownMenu/components/DropdownMenu/styles.js

@@ -1,10 +1,13 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Color, Shadow, ShapeRadius, Spacing } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
+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:200px;max-height:300px;overflow-y:auto;border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, Color.FROZEN, ShapeRadius.CONTROL, Shadow.REGULAR, ({
+})(["border:1px solid ", ";background-color:", ";min-width:140px;", " border-radius:", ";box-shadow:", ";z-index:", ";"], Color.FORM, Color.FROZEN, ({
+  $scrollable
+}) => $scrollable && scrollableCss, ShapeRadius.CONTROL, Shadow.REGULAR, ({
   $zIndex
 }) => $zIndex || 10);
 export const DropdownMenuSection = styled(Vertical).withConfig({

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

@@ -8,6 +8,7 @@ export type HandlerProps = {
 export type DropdownMenuProps = {
     renderHandler: (args: HandlerProps) => ReactNode;
     children: (() => ReactNode) | ReactNode;
+    isScrollable?: boolean;
     menuZIndex?: number;
     menuPlacement?: Placement;
 };

package/DropdownMenu/components/DropdownMenuButton/DropdownMenuButton.js

@@ -3,12 +3,14 @@ import { Button } from '../../../Button';
 import { DropdownMenu } from '../DropdownMenu';
 export const DropdownMenuButton = ({
   label,
+  isScrollable,
   menuZIndex,
   menuPlacement,
   children,
   ...buttonProps
 }) => {
   return React.createElement(DropdownMenu, {
+    isScrollable: isScrollable,
     menuZIndex: menuZIndex,
     menuPlacement: menuPlacement,
     renderHandler: ({

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

@@ -3,6 +3,7 @@ import { type ReactNode } from 'react';
 import { type RequiredButtonProps } from '../../../Button';
 export type DropdownMenuButtonProps = {
     label: ReactNode;
+    isScrollable?: boolean;
     menuZIndex?: number;
     menuPlacement?: Placement;
     color: RequiredButtonProps['color'];

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.S3, UnitSize.FIELD_HEIGHT, ({
+})(["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, ({
   $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;
+}, "$gap" | "$gridAutoFlow" | "$alignItems" | "$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/package.json

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