@pushwoosh/dumb-components 1.1.28 → 1.1.29

package/DateTimePicker/components/DatePickerField/DatePickerField.js

@@ -25,9 +25,11 @@ export function DatePickerField({
     if (!showPicker) {
       return;
     }
-    const handleClickListener = e => {
-      var _refs$floating$curren;
-      if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !refs.reference.current.contains(e.target)) {
+    const handleClickListener = event => {
+      const path = event.composedPath();
+      const isInsideFloating = refs.floating.current && path.includes(refs.floating.current);
+      const isInsideReference = refs.reference.current && path.includes(refs.reference.current);
+      if (!isInsideFloating && !isInsideReference) {
         setShowPicker(false);
       }
     };

package/DateTimePicker/components/DateTimePicker/DateTimePicker.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Spacing } from '@pushwoosh/kit-constants';
 import { Collapse, Horizontal } from '@pushwoosh/kit-helpers';
 import { format, createUTCDate } from '../../helpers';
 import { DatePicker } from '../DatePicker';
@@ -35,7 +34,7 @@ export function DateTimePicker(props) {
     slotAfterMonth: () => React.createElement(Collapse, {
       expanded: !!value
     }, React.createElement(Horizontal, {
-      "$padding": `0 ${Spacing.S5}`,
+      "$padding": "0 16px",
       "$gap": 8
     }, React.createElement(NumberPicker, {
       placeholder: "00",

package/DateTimePicker/components/DateTimePickerField/DateTimePickerField.js

@@ -1,6 +1,5 @@
 import { useFloating, offset, autoPlacement } from '@floating-ui/react-dom';
 import React, { useState, useEffect } from 'react';
-import { Spacing } from '@pushwoosh/kit-constants';
 import { CalendarIcon } from '@pushwoosh/kit-icons';
 import { useUTCDate } from './helpers';
 import { InputFrame } from '../../styles';
@@ -26,9 +25,11 @@ export function DateTimePickerField({
     if (!showPicker) {
       return;
     }
-    const handleClickListener = e => {
-      var _refs$floating$curren;
-      if (!((_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 && _refs$floating$curren.contains(e.target)) && !refs.reference.current.contains(e.target)) {
+    const handleClickListener = event => {
+      const path = event.composedPath();
+      const isInsideFloating = refs.floating.current && path.includes(refs.floating.current);
+      const isInsideReference = refs.reference.current && path.includes(refs.reference.current);
+      if (!isInsideFloating && !isInsideReference) {
         setShowPicker(false);
       }
     };
@@ -52,9 +53,9 @@ export function DateTimePickerField({
   } = useUTCDate(value);
   return React.createElement(React.Fragment, null, React.createElement(InputFrame, {
     ref: refs.setReference,
-    "$gap": Spacing.S3,
     "$empty": !value,
     "$error": error,
+    "$gap": 8,
     onClick: () => setShowPicker(!showPicker)
   }, React.createElement(CalendarIcon, {
     size: "medium",

package/DateTimePicker/components/DecadeView/DecadeView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Spacing } from '@pushwoosh/kit-constants';
 import { Columns } from '@pushwoosh/kit-helpers';
 import { format, parseStringToArray, addPeriod, setPeriod } from '../../helpers';
 import { CellBox } from '../../styles';
@@ -19,7 +18,7 @@ export function DecadeView(props) {
     onNext: () => onChange(format(addPeriod(value, 'year', 12), 'year'))
   }, React.createElement(Columns, {
     "$sizes": 4,
-    "$gap": Spacing.S1
+    "$gap": 4
   }, Array.from({
     length: 12
   }).map((_, i) => {

package/DateTimePicker/components/NumberPicker/styles.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { Color, Spacing } from '@pushwoosh/kit-constants';
+import { Color } from '@pushwoosh/kit-constants';
 export const Hint = styled.div.withConfig({
   displayName: "Hint",
   componentId: "sc-170ev2t-0"
-})(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:", ";color:", ";pointer-events:none;"], Spacing.S3, Color.PHANTOM);
+})(["display:flex;align-items:center;font-size:100%;line-height:initial;padding-right:8px;color:", ";pointer-events:none;"], Color.PHANTOM);

package/DateTimePicker/components/PickerPlate/PickerPlate.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Spacing } from '@pushwoosh/kit-constants';
 import { Vertical, Horizontal } from '@pushwoosh/kit-helpers';
 import { Arrow } from './styles';
 export function PickerPlate(props) {
@@ -10,11 +9,11 @@ export function PickerPlate(props) {
     onNext
   } = props;
   return React.createElement(Vertical, {
-    "$gap": Spacing.S5
+    "$gap": 16
   }, React.createElement(Horizontal, {
     "$justifyContent": "space-between"
   }, slot, React.createElement(Horizontal, {
-    "$gap": Spacing.S1
+    "$gap": 4
   }, React.createElement(Arrow, {
     direction: "left",
     onClick: onPrev

package/DateTimePicker/components/YearView/YearView.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Spacing } from '@pushwoosh/kit-constants';
 import { Columns } from '@pushwoosh/kit-helpers';
 import { format, addPeriod, setPeriod, monthName, isSamePeriod } from '../../helpers';
 import { CellBox, DateInfo } from '../../styles';
@@ -17,7 +16,7 @@ export function YearView(props) {
     slot: React.createElement(DateInfo, null, year)
   }, React.createElement(Columns, {
     "$sizes": 4,
-    "$gap": Spacing.S1,
+    "$gap": 4,
     "$justifyContent": "space-between"
   }, Array.from({
     length: 12

package/DateTimePicker/styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Color, Spacing, ShapeRadius, FontSize, FontWeight, LineHeight, Shadow } from '@pushwoosh/kit-constants';
+import { Color, ShapeRadius, FontSize, FontWeight, LineHeight, Shadow } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 const disabled = css(["border:1px solid ", ";background:linear-gradient( to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) calc(50% - 0.8px),", " 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100% );opacity:0.8;pointer-events:none;"], Color.FORM, Color.FORM);
 const CalendarCellBaseStyled = styled.div.withConfig({
@@ -32,7 +32,7 @@ export const DayHeader = styled(CalendarCellBaseStyled).withConfig({
 export const DateInfo = styled.div.withConfig({
   displayName: "DateInfo",
   componentId: "sc-t3ruuk-3"
-})(["display:flex;align-items:center;height:24px;color:", ";background:", ";padding:", " ", ";font-weight:", ";font-size:", ";line-height:", ";border-radius:", ";cursor:pointer;"], Color.MAIN, Color.SOFT_LIGHT, Spacing.S0, Spacing.S3, FontWeight.MEDIUM, FontSize.SMALL, LineHeight.SMALL, ShapeRadius.CONTROL);
+})(["display:flex;align-items:center;height:24px;color:", ";background:", ";padding:2px 8px;font-weight:", ";font-size:", ";line-height:", ";border-radius:", ";cursor:pointer;"], Color.MAIN, Color.SOFT_LIGHT, FontWeight.MEDIUM, FontSize.SMALL, LineHeight.SMALL, ShapeRadius.CONTROL);
 export const RoundedBlock = styled(Horizontal).attrs({
   $alignItems: 'center',
   $padding: '0 12px'
@@ -61,4 +61,4 @@ export const SingleInputFrame = styled(InputFrame).withConfig({
 export const CalendarBox = styled.div.withConfig({
   displayName: "CalendarBox",
   componentId: "sc-t3ruuk-7"
-})(["width:282px;background-color:", ";padding:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";box-sizing:border-box;z-index:1;"], Color.CLEAR, Spacing.S5, Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR);
+})(["width:282px;background-color:", ";padding:16px;border:1px solid ", ";border-radius:", ";box-shadow:", ";box-sizing:border-box;z-index:1;"], Color.CLEAR, Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR);

package/package.json

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