@elementor/editor-controls 3.33.0-211 → 3.33.0-213

package/dist/index.d.mts

@@ -362,6 +362,10 @@ declare const transitionsItemsList: {
     items: string[];
 }[];
 
+declare const DateTimeControl: ControlComponent<({ inputDisabled }: {
+    inputDisabled?: boolean;
+}) => React$1.JSX.Element>;
+
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 type ClearIconButtonProps = {
@@ -569,4 +573,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, type ItemActionPayload, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, type ItemActionPayload, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.d.ts

@@ -362,6 +362,10 @@ declare const transitionsItemsList: {
     items: string[];
 }[];
 
+declare const DateTimeControl: ControlComponent<({ inputDisabled }: {
+    inputDisabled?: boolean;
+}) => React$1.JSX.Element>;
+
 declare const ControlFormLabel: (props: FormLabelProps) => React$1.JSX.Element;
 
 type ClearIconButtonProps = {
@@ -569,4 +573,4 @@ type UseInternalStateOptions<TValue> = {
 };
 declare const useSyncExternalState: <TValue>({ external, setExternal, persistWhen, fallback, }: UseInternalStateOptions<TValue>) => readonly [TValue, (setter: ((value: TValue) => TValue) | TValue, options?: CreateOptions, meta?: SetValueMeta) => void];
 
-export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, type ItemActionPayload, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };
+export { type AngleUnit, AspectRatioControl, BackgroundControl, BoxShadowRepeaterControl, ClearIconButton, ColorControl, type ControlActionsItems, ControlActionsProvider, ControlAdornments, ControlAdornmentsProvider, type ControlComponent, ControlFormLabel, ControlReplacementsProvider, ControlToggleButtonGroup, DateTimeControl, type EqualUnequalItems, EqualUnequalSizesControl, type ExtendedOption, FilterRepeaterControl, FloatingActionsBar, type FontCategory, FontFamilyControl, GapControl, HtmlTagControl, ImageControl, type ItemActionPayload, ItemSelector, KeyValueControl, type LengthUnit, LinkControl, LinkedDimensionsControl, NumberControl, PopoverContent, PositionControl, PropKeyProvider, PropProvider, type PropProviderProps, QueryControl, RepeatableControl, Repeater, type RepeaterItem, SelectControl, SelectControlWrapper, type SetRepeaterValuesMeta, type SetValue, type SetValueMeta, SizeControl, StrokeControl, SvgMediaControl, SwitchControl, TextAreaControl, TextControl, type TimeUnit, type ToggleButtonGroupItem, ToggleControl, type ToggleControlProps, TransformRepeaterControl, TransformSettingsControl, TransitionRepeaterControl, type Unit, UrlControl, createControl, createControlReplacementsRegistry, enqueueFont, injectIntoRepeaterItemActions, injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel, transitionProperties, transitionsItemsList, useBoundProp, useControlActions, useFloatingActionsBar, useSyncExternalState };

package/dist/index.js

@@ -41,6 +41,7 @@ __export(index_exports, {
   ControlFormLabel: () => ControlFormLabel,
   ControlReplacementsProvider: () => ControlReplacementsProvider,
   ControlToggleButtonGroup: () => ControlToggleButtonGroup,
+  DateTimeControl: () => DateTimeControl,
   EqualUnequalSizesControl: () => EqualUnequalSizesControl,
   FilterRepeaterControl: () => FilterRepeaterControl,
   FloatingActionsBar: () => FloatingActionsBar,
@@ -5694,21 +5695,97 @@ var TransitionRepeaterControl = createControl(
   }
 );
 
-// src/components/icon-buttons/clear-icon-button.tsx
+// src/controls/date-time-control.tsx
 var React96 = __toESM(require("react"));
-var import_icons33 = require("@elementor/icons");
+var dayjs = __toESM(require("dayjs"));
+var import_editor_props50 = require("@elementor/editor-props");
+var import_editor_props51 = require("@elementor/editor-props");
 var import_ui82 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui82.styled)(import_ui82.IconButton)(({ theme }) => ({
+var DATE_FORMAT = "YYYY-MM-DD";
+var TIME_FORMAT = "HH:mm";
+var DateTimeControl = createControl(({ inputDisabled }) => {
+  const { value, setValue, ...propContext } = useBoundProp(import_editor_props51.DateTimePropTypeUtil);
+  const handleChange = (newValue, meta) => {
+    const field = meta.bind;
+    const fieldValue = newValue[field];
+    if ((0, import_editor_props50.isTransformable)(fieldValue)) {
+      return setValue({ ...value, [field]: fieldValue });
+    }
+    let formattedValue = "";
+    if (fieldValue) {
+      const dayjsValue = fieldValue;
+      formattedValue = field === "date" ? dayjsValue.format(DATE_FORMAT) : dayjsValue.format(TIME_FORMAT);
+    }
+    setValue({
+      ...value,
+      [field]: {
+        $$type: "string",
+        value: formattedValue
+      }
+    });
+  };
+  const parseDateValue = (dateStr) => {
+    if (!dateStr) {
+      return null;
+    }
+    const d = dayjs.default(dateStr);
+    return d && typeof d.isValid === "function" && d.isValid() ? d : null;
+  };
+  const parseTimeValue = (timeStr) => {
+    if (!timeStr) {
+      return null;
+    }
+    const [hours, minutes] = timeStr.split(":");
+    const h = Number.parseInt(hours ?? "", 10);
+    const m = Number.parseInt(minutes ?? "", 10);
+    if (Number.isNaN(h) || Number.isNaN(m)) {
+      return null;
+    }
+    const base = dayjs.default();
+    return base.hour(h).minute(m).second(0).millisecond(0);
+  };
+  return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React96.createElement(ControlActions, null, /* @__PURE__ */ React96.createElement(import_ui82.LocalizationProvider, null, /* @__PURE__ */ React96.createElement(import_ui82.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React96.createElement(
+    import_ui82.DatePicker,
+    {
+      value: parseDateValue(import_editor_props50.stringPropTypeUtil.extract(value?.date)),
+      onChange: (v) => handleChange({ date: v }, { bind: "date" }),
+      disabled: inputDisabled,
+      slotProps: {
+        textField: { size: "tiny" },
+        openPickerButton: { size: "tiny" },
+        openPickerIcon: { fontSize: "tiny" }
+      }
+    }
+  )), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React96.createElement(
+    import_ui82.TimePicker,
+    {
+      value: parseTimeValue(import_editor_props50.stringPropTypeUtil.extract(value?.time)),
+      onChange: (v) => handleChange({ time: v }, { bind: "time" }),
+      disabled: inputDisabled,
+      slotProps: {
+        textField: { size: "tiny" },
+        openPickerButton: { size: "tiny" },
+        openPickerIcon: { fontSize: "tiny" }
+      }
+    }
+  ))))));
+});
+
+// src/components/icon-buttons/clear-icon-button.tsx
+var React97 = __toESM(require("react"));
+var import_icons33 = require("@elementor/icons");
+var import_ui83 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui83.styled)(import_ui83.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React96.createElement(import_ui82.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React96.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React96.createElement(import_icons33.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React97.createElement(import_ui83.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React97.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React97.createElement(import_icons33.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater.tsx
-var React97 = __toESM(require("react"));
+var React98 = __toESM(require("react"));
 var import_react50 = require("react");
 var import_icons34 = require("@elementor/icons");
-var import_ui83 = require("@elementor/ui");
+var import_ui84 = require("@elementor/ui");
 var import_i18n50 = require("@wordpress/i18n");
 var SIZE9 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
@@ -5804,8 +5881,8 @@ var Repeater3 = ({
       { action: { type: "reorder", payload: { ...meta } } }
     );
   };
-  return /* @__PURE__ */ React97.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React97.createElement(
-    import_ui83.Stack,
+  return /* @__PURE__ */ React98.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React98.createElement(
+    import_ui84.Stack,
     {
       direction: "row",
       justifyContent: "start",
@@ -5813,10 +5890,10 @@ var Repeater3 = ({
       gap: 1,
       sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React97.createElement(import_ui83.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
-    /* @__PURE__ */ React97.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React97.createElement(
-      import_ui83.IconButton,
+    /* @__PURE__ */ React98.createElement(import_ui84.Typography, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React98.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React98.createElement(
+      import_ui84.IconButton,
       {
         size: SIZE9,
         sx: { ml: "auto" },
@@ -5824,20 +5901,20 @@ var Repeater3 = ({
         onClick: addRepeaterItem,
         "aria-label": (0, import_i18n50.__)("Add item", "elementor")
       },
-      /* @__PURE__ */ React97.createElement(import_icons34.PlusIcon, { fontSize: SIZE9 })
+      /* @__PURE__ */ React98.createElement(import_icons34.PlusIcon, { fontSize: SIZE9 })
     )
-  ), 0 < uniqueKeys.length && /* @__PURE__ */ React97.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React98.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React97.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React97.createElement(
+    return /* @__PURE__ */ React98.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React98.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React97.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React97.createElement(itemSettings.Label, { value })),
-        startIcon: /* @__PURE__ */ React97.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React97.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React98.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React98.createElement(itemSettings.Label, { value })),
+        startIcon: /* @__PURE__ */ React98.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React98.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -5847,7 +5924,7 @@ var Repeater3 = ({
         showToggle,
         collectionPropUtil
       },
-      (props) => /* @__PURE__ */ React97.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React98.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -5871,8 +5948,8 @@ var RepeaterItem = ({
   const duplicateLabel = (0, import_i18n50.__)("Duplicate", "elementor");
   const toggleLabel = propDisabled ? (0, import_i18n50.__)("Show", "elementor") : (0, import_i18n50.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n50.__)("Remove", "elementor");
-  return /* @__PURE__ */ React97.createElement(React97.Fragment, null, /* @__PURE__ */ React97.createElement(
-    import_ui83.UnstableTag,
+  return /* @__PURE__ */ React98.createElement(React98.Fragment, null, /* @__PURE__ */ React98.createElement(
+    import_ui84.UnstableTag,
     {
       disabled,
       label,
@@ -5881,12 +5958,12 @@ var RepeaterItem = ({
       ref: setRef,
       variant: "outlined",
       "aria-label": (0, import_i18n50.__)("Open item", "elementor"),
-      ...(0, import_ui83.bindTrigger)(popoverState),
+      ...(0, import_ui84.bindTrigger)(popoverState),
       startIcon,
-      actions: /* @__PURE__ */ React97.createElement(React97.Fragment, null, showDuplicate && /* @__PURE__ */ React97.createElement(import_ui83.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React97.createElement(import_ui83.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React97.createElement(import_icons34.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React97.createElement(import_ui83.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React97.createElement(import_ui83.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React97.createElement(import_icons34.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React97.createElement(import_icons34.EyeIcon, { fontSize: SIZE9 }))), /* @__PURE__ */ React97.createElement(import_ui83.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React97.createElement(import_ui83.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React97.createElement(import_icons34.XIcon, { fontSize: SIZE9 }))))
+      actions: /* @__PURE__ */ React98.createElement(React98.Fragment, null, showDuplicate && /* @__PURE__ */ React98.createElement(import_ui84.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React98.createElement(import_ui84.IconButton, { size: SIZE9, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React98.createElement(import_icons34.CopyIcon, { fontSize: SIZE9 }))), showToggle && /* @__PURE__ */ React98.createElement(import_ui84.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React98.createElement(import_ui84.IconButton, { size: SIZE9, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React98.createElement(import_icons34.EyeOffIcon, { fontSize: SIZE9 }) : /* @__PURE__ */ React98.createElement(import_icons34.EyeIcon, { fontSize: SIZE9 }))), /* @__PURE__ */ React98.createElement(import_ui84.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React98.createElement(import_ui84.IconButton, { size: SIZE9, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React98.createElement(import_icons34.XIcon, { fontSize: SIZE9 }))))
     }
-  ), /* @__PURE__ */ React97.createElement(
-    import_ui83.Popover,
+  ), /* @__PURE__ */ React98.createElement(
+    import_ui84.Popover,
     {
       disablePortal: true,
       slotProps: {
@@ -5899,13 +5976,13 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React97.createElement(import_ui83.Box, null, children({ anchorEl, collectionPropUtil }))
+    /* @__PURE__ */ React98.createElement(import_ui84.Box, null, children({ anchorEl, collectionPropUtil }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
   const [ref, setRef] = (0, import_react50.useState)(null);
-  const popoverState = (0, import_ui83.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui83.bindPopover)(popoverState);
+  const popoverState = (0, import_ui84.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui84.bindPopover)(popoverState);
   (0, import_react50.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
@@ -5932,6 +6009,7 @@ var usePopover = (openOnMount, onOpen) => {
   ControlFormLabel,
   ControlReplacementsProvider,
   ControlToggleButtonGroup,
+  DateTimeControl,
   EqualUnequalSizesControl,
   FilterRepeaterControl,
   FloatingActionsBar,