@pushwoosh/dumb-components 1.1.80 → 1.1.82

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -3,7 +3,7 @@ import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal, useClickAway, Vertical } from '@pushwoosh/kit-helpers';
 import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { stringifyValue } from './helpers';
-import { PopoverContent } from './styles';
+import { PopoverContent, PresetsContainer } from './styles';
 import { Button } from '../../Button';
 import { Chip } from '../../Chip';
 import { Popover } from '../../Popover';
@@ -15,7 +15,8 @@ export const CalendarDropdown = props => {
     buttonColor = 'secondary',
     buttonSize = 'field',
     buttonTextCustom,
-    allowEmpty
+    allowEmpty,
+    buttonView
   } = props;
   const isRangePicker = mode === 'range-date' || mode === 'range-datetime';
   const withTime = mode === 'single-datetime' || mode === 'range-datetime';
@@ -59,6 +60,7 @@ export const CalendarDropdown = props => {
   }, React.createElement(Button, {
     boxRef: buttonRef,
     type: "button",
+    view: buttonView,
     size: buttonSize,
     color: buttonColor,
     icon: React.createElement(CalendarIcon, {
@@ -77,17 +79,7 @@ export const CalendarDropdown = props => {
   }, React.createElement(PopoverContent, {
     "$isShaking": isShaking,
     onAnimationEnd: () => setIsShaking(false)
-  }, React.createElement(Vertical, null, presets && presets.length > 0 && React.createElement(Horizontal, {
-    "$padding": {
-      horizontal: 16,
-      vertical: 12
-    },
-    "$border": {
-      bottom: `1px solid ${Color.DIVIDER}`
-    },
-    "$justifyContent": "start",
-    "$gap": 4
-  }, presets.map((preset, i) => React.createElement(Chip, {
+  }, React.createElement(Vertical, null, presets && presets.length > 0 && React.createElement(PresetsContainer, null, presets.map((preset, i) => React.createElement(Chip, {
     key: i,
     onClick: () => onChangeHandler(preset.value)
   }, preset.label))), React.createElement(Horizontal, {

package/Calendar/CalendarDropdown/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {
     $isShaking?: boolean;
 }, never>;
+export declare const PresetsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Calendar/CalendarDropdown/styles.js

@@ -6,4 +6,8 @@ export const PopoverContent = styled.div.withConfig({
   componentId: "sc-h6jz87-0"
 })(["overflow:hidden;box-shadow:", ";background:", ";", ""], Shadow.REGULAR, Color.CLEAR, ({
   $isShaking
-}) => $isShaking && css(["animation:", " 0.4s ease-in-out;"], shakeAnimation));
+}) => $isShaking && css(["animation:", " 0.4s ease-in-out;"], shakeAnimation));
+export const PresetsContainer = styled.div.withConfig({
+  displayName: "PresetsContainer",
+  componentId: "sc-h6jz87-1"
+})(["display flex;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid ", ";justify-content:start;gap:4px;"], Color.DIVIDER);

package/Calendar/CalendarDropdown/types.d.ts

@@ -5,6 +5,7 @@ import type { DateStruct, DateTimeStruct, RangeValue, TzValue } from '../types';
 interface BaseProps {
     buttonSize?: RequiredButtonProps['size'];
     buttonColor?: RequiredButtonProps['color'];
+    buttonView?: RequiredButtonProps['view'];
     buttonTextCustom?: string;
     allowEmpty?: boolean;
 }

package/Chip/styles.js

@@ -4,9 +4,11 @@ import { variants } from './Chip.constants';
 export const ChipStyled = styled.div.withConfig({
   displayName: "ChipStyled",
   componentId: "sc-e2g39l-0"
-})(["display:inline-flex;min-height:24px;padding:0 ", " 0 8px;align-items:center;gap:4px;cursor:default;border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;& > .closeIcon{cursor:pointer;transition:transform 0.2s;&:hover{transform:scale(1.3);}}"], ({
+})(["display:inline-flex;min-height:24px;padding:0 ", " 0 8px;align-items:center;gap:4px;cursor:", ";border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;& > .closeIcon{transition:transform 0.2s;&:hover{transform:scale(1.3);}}"], ({
   $closeable
 }) => $closeable ? '4px' : '8px', ({
+  $readOnly
+}) => $readOnly ? 'default' : 'pointer', ({
   $variant,
   $selected,
   $readOnly

package/DateTimePicker/components/DatePickerField/DatePickerField.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DatePickerFieldProps } from './types';
-export declare function DatePickerField({ value, error, allowedPlacements, zIndex, closeOnSelect, onChange, }: DatePickerFieldProps): ReactElement;
+export declare function DatePickerField(props: DatePickerFieldProps): ReactElement;

package/DateTimePicker/components/DatePickerField/DatePickerField.js

@@ -4,14 +4,17 @@ import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { format, monthName, get } from '../../helpers';
 import { InputFrame } from '../../styles';
 import { DatePicker } from '../DatePicker';
-export function DatePickerField({
-  value,
-  error,
-  allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-  zIndex = 1000,
-  closeOnSelect = false,
-  onChange
-}) {
+export function DatePickerField(props) {
+  const {
+    value,
+    minDate,
+    maxDate,
+    error,
+    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+    zIndex = 1000,
+    closeOnSelect = false,
+    onChange
+  } = props;
   const [showPicker, setShowPicker] = useState(false);
   const {
     refs,
@@ -61,6 +64,8 @@ export function DatePickerField({
     }
   }, React.createElement(DatePicker, {
     value: value,
+    minDate: minDate,
+    maxDate: maxDate,
     onChange: onSelect
   })));
 }

package/DateTimePicker/components/DatePickerField/types.d.ts

@@ -1,6 +1,8 @@
 import type { Placement } from '@floating-ui/react-dom';
 export interface DatePickerFieldProps {
     value: string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
     error?: boolean;
     allowedPlacements?: Placement[];
     zIndex?: number;

package/DateTimePicker/components/DateTimePicker/DateTimePicker.js

@@ -6,6 +6,8 @@ import { NumberPicker } from '../NumberPicker';
 export function DateTimePicker(props) {
   const {
     value,
+    minDate,
+    maxDate,
     userInputDay,
     onChange
   } = props;
@@ -30,6 +32,8 @@ export function DateTimePicker(props) {
   return React.createElement(DatePicker, {
     value: format(date, 'year-month-dayThour:minute:second'),
     userInputDay: userInputDay,
+    minDate: minDate,
+    maxDate: maxDate,
     onChange: handleChange,
     slotAfterMonth: () => React.createElement(Collapse, {
       expanded: !!value

package/DateTimePicker/components/DateTimePicker/types.d.ts

@@ -1,5 +1,7 @@
 export interface DateTimePickerProps {
     value: string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
     userInputDay?: string;
     onChange: (day: string) => void;
 }

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { DateTimePickerFieldProps } from './types';
-export declare function DateTimePickerField({ value, error, allowedPlacements, zIndex, closeOnSelect, onChange, }: DateTimePickerFieldProps): ReactElement;
+export declare function DateTimePickerField(props: DateTimePickerFieldProps): ReactElement;

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -4,14 +4,17 @@ import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { useUTCDate } from './helpers';
 import { InputFrame } from '../../styles';
 import { DateTimePicker } from '../DateTimePicker';
-export function DateTimePickerField({
-  value,
-  error,
-  allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-  zIndex = 1000,
-  closeOnSelect = false,
-  onChange
-}) {
+export function DateTimePickerField(props) {
+  const {
+    value,
+    minDate,
+    maxDate,
+    error,
+    allowedPlacements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+    zIndex = 1000,
+    closeOnSelect = false,
+    onChange
+  } = props;
   const [showPicker, setShowPicker] = useState(false);
   const {
     refs,
@@ -68,6 +71,8 @@ export function DateTimePickerField({
     }
   }, React.createElement(DateTimePicker, {
     value: value,
+    minDate: minDate,
+    maxDate: maxDate,
     onChange: onSelect
   })));
 }

package/DateTimePicker/components/DateTimePickerField/types.d.ts

@@ -1,6 +1,8 @@
 import type { Placement } from '@floating-ui/react-dom';
 export interface DateTimePickerFieldProps {
     value: string;
+    minDate?: Date | string;
+    maxDate?: Date | string;
     error?: boolean;
     allowedPlacements?: Placement[];
     zIndex?: number;

package/package.json

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