@plasmicpkgs/antd5 0.0.213 → 0.0.215

package/dist/antd.esm.js

@@ -1,6 +1,6 @@
 import { Result, Form, Checkbox, DatePicker, Radio, Select, Input, InputNumber, Avatar, Button, Collapse, ColorPicker, ConfigProvider, theme, message, notification, Drawer, Menu, Dropdown, Modal, Pagination, Popover, Progress, Rate, Segmented, Slider, Steps, Switch, Table, Tabs, Tooltip, Tree, Upload } from 'antd';
 import equal from 'fast-deep-equal';
-import React, { useState, isValidElement, cloneElement, useMemo, useEffect, useRef } from 'react';
+import React, { isValidElement, cloneElement, useMemo, useEffect, useState, useRef } from 'react';
 import registerComponent from '@plasmicapp/host/registerComponent';
 import registerGlobalContext from '@plasmicapp/host/registerGlobalContext';
 import { deriveFieldConfigs, normalizeData, usePlasmicDataOp } from '@plasmicapp/data-sources';
@@ -658,10 +658,70 @@ var __objRest$m = (source, exclude) => {
   return target;
 };
 function AntdDatePicker(props) {
-  const nativeInput = React.useRef(null);
-  const [open, setOpen] = useState(false);
-  const strValue = props.value && typeof props.value === "object" && "toISOString" in props.value ? props.value.toISOString() : props.value === null ? void 0 : props.value;
   const _a = props, { picker, popupScopeClassName } = _a, rest = __objRest$m(_a, ["picker", "popupScopeClassName"]);
+  const css = `
+
+  @media(max-width: 500px) {
+    .ant-picker-dropdown {
+      top: 20px !important;
+      left: 10px !important;
+      right: 10px !important;
+      max-height: 95vh;
+      position: fixed;
+      overflow-y: scroll;
+    }
+
+    .ant-picker-panel-layout {
+      flex-direction: column;
+    }
+
+    .ant-picker-presets {
+      min-height: 50px;
+      min-width: 100%;
+    }
+
+    .ant-picker-presets > ul {
+      overflow-y: hidden;
+      overflow-x: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      flex-direction: column;
+    }
+
+    .ant-picker-presets > ul > li {
+      margin: 0 !important;
+    }
+
+    .ant-picker-panel-container {
+      width: 300px;
+    }
+
+    .ant-picker-datetime-panel {
+      flex-direction: column;
+    }
+
+    .ant-picker-header-view {
+      line-height: unset !important;
+    }
+
+    .ant-picker-content {
+      height: unset !important;
+    }
+
+    .ant-picker-time-panel-column {
+      height: 100px;
+    }
+
+    .ant-picker-time-panel-column::after {
+      height: 0px !important;
+    }
+
+    .ant-picker-time-panel-column::after {
+      display: none;
+    }
+  }`;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     DatePicker,
     __spreadProps$m(__spreadValues$y({}, rest), {
@@ -672,29 +732,9 @@ function AntdDatePicker(props) {
       onChange: (value, _dateString) => {
         var _a2;
         (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value !== null ? value.toISOString() : null);
-      },
-      open,
-      onOpenChange: (_open) => {
-        if (_open && window.innerWidth < 500) {
-          nativeInput.current.showPicker();
-        } else {
-          setOpen(_open);
-        }
       }
     })
-  ), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      hidden: true,
-      ref: nativeInput,
-      type: props.showTime ? "datetime-local" : "date",
-      value: strValue || "",
-      onChange: (e) => {
-        var _a2;
-        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e.target.value);
-      }
-    }
-  ));
+  ), /* @__PURE__ */ React.createElement("style", { dangerouslySetInnerHTML: { __html: css } }));
 }
 const datePickerComponentName = "plasmic-antd5-date-picker";
 const datePickerHelpers = {
@@ -4682,30 +4722,45 @@ function AntdDateRangePicker(props) {
     "popupScopeClassName",
     "className"
   ]);
-  const popupScopeClassNameSelector = popupScopeClassName ? `.${popupScopeClassName}` : "";
   const css = `
-    @media(max-width: 900px) {
-      .ant-picker-panels{
-        flex-direction: column;
-      }
-    }
-
     @media(max-width: 500px) {
-      ${popupScopeClassNameSelector}.ant-picker-dropdown {
+      .ant-picker-dropdown {
         top: 20px !important;
         left: 10px !important;
         right: 10px !important;
         max-height: 95vh;
         position: fixed;
         overflow-y: scroll;
-        max-width: 100vw;
       }
 
-      ${popupScopeClassNameSelector} .ant-picker-panel-container {
-        min-width: 300px;
+      .ant-picker-panel-layout {
+        flex-direction: column;
+      }
+
+      .ant-picker-presets {
+        min-height: 50px;
+        min-width: 100% !important;
       }
 
-      ${popupScopeClassNameSelector} .ant-picker-datetime-panel {
+      .ant-picker-presets > ul {
+        overflow-y: hidden;
+        overflow-x: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        flex-direction: column;
+      }
+
+      .ant-picker-presets > ul > li {
+        margin: 0 !important;
+      }
+
+      .ant-picker-panel-container {
+        width: 300px;
+      }
+
+      .ant-picker-datetime-panel {
         flex-direction: column;
       }
 
@@ -4713,19 +4768,23 @@ function AntdDateRangePicker(props) {
         font-size: 16px !important;
       }
 
-      ${popupScopeClassNameSelector} .ant-picker-header-view {
+      .ant-picker-header-view {
         line-height: unset !important;
       }
 
-      ${popupScopeClassNameSelector} .ant-picker-content {
+      .ant-picker-content {
         height: unset !important;
       }
 
-      ${popupScopeClassNameSelector} .ant-picker-time-panel-column {
+      .ant-picker-time-panel-column {
         height: 100px;
       }
 
-      ${popupScopeClassNameSelector} .ant-picker-range-arrow {
+      .ant-picker-time-panel-column::after {
+        height: 0px !important;
+      }
+
+      .ant-picker-range-arrow {
         display: none;
       }
     }