"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/global-styles/dimensions-panel.js
var dimensions_panel_exports = {};
__export(dimensions_panel_exports, {
  default: () => DimensionsPanel,
  useHasDimensionsPanel: () => useHasDimensionsPanel
});
module.exports = __toCommonJS(dimensions_panel_exports);
var import_clsx = __toESM(require("clsx"));
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_icons = require("@wordpress/icons");
var import_element = require("@wordpress/element");
var import_global_styles_engine = require("@wordpress/global-styles-engine");
var import_utils = require("./utils");
var import_spacing_sizes_control = __toESM(require("../spacing-sizes-control"));
var import_height_control = __toESM(require("../height-control"));
var import_child_layout_control = __toESM(require("../child-layout-control"));
var import_aspect_ratio_tool = __toESM(require("../dimensions-tool/aspect-ratio-tool"));
var import_utils2 = require("../../hooks/utils");
var import_object = require("../../utils/object");
var import_jsx_runtime = require("react/jsx-runtime");
var AXIAL_SIDES = ["horizontal", "vertical"];
function useHasDimensionsPanel(settings) {
  const hasContentSize = useHasContentSize(settings);
  const hasWideSize = useHasWideSize(settings);
  const hasPadding = useHasPadding(settings);
  const hasMargin = useHasMargin(settings);
  const hasGap = useHasGap(settings);
  const hasMinHeight = useHasMinHeight(settings);
  const hasWidth = useHasWidth(settings);
  const hasAspectRatio = useHasAspectRatio(settings);
  const hasChildLayout = useHasChildLayout(settings);
  return import_element.Platform.OS === "web" && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasWidth || hasAspectRatio || hasChildLayout);
}
function useHasContentSize(settings) {
  return settings?.layout?.contentSize;
}
function useHasWideSize(settings) {
  return settings?.layout?.wideSize;
}
function useHasPadding(settings) {
  return settings?.spacing?.padding;
}
function useHasMargin(settings) {
  return settings?.spacing?.margin;
}
function useHasGap(settings) {
  return settings?.spacing?.blockGap;
}
function useHasMinHeight(settings) {
  return settings?.dimensions?.minHeight;
}
function useHasWidth(settings) {
  return settings?.dimensions?.width;
}
function useHasAspectRatio(settings) {
  return settings?.dimensions?.aspectRatio;
}
function useHasChildLayout(settings) {
  const {
    type: parentLayoutType = "default",
    default: { type: defaultParentLayoutType = "default" } = {},
    allowSizingOnChildren = false
  } = settings?.parentLayout ?? {};
  const support = (defaultParentLayoutType === "flex" || parentLayoutType === "flex" || defaultParentLayoutType === "grid" || parentLayoutType === "grid") && allowSizingOnChildren;
  return !!settings?.layout && support;
}
function useHasSpacingPresets(settings) {
  const { defaultSpacingSizes, spacingSizes } = settings?.spacing || {};
  return defaultSpacingSizes !== false && spacingSizes?.default?.length > 0 || spacingSizes?.theme?.length > 0 || spacingSizes?.custom?.length > 0;
}
function filterValuesBySides(values, sides) {
  if (!sides || !values) {
    return values;
  }
  const filteredValues = {};
  sides.forEach((side) => {
    if (side === "vertical") {
      filteredValues.top = values.top;
      filteredValues.bottom = values.bottom;
    }
    if (side === "horizontal") {
      filteredValues.left = values.left;
      filteredValues.right = values.right;
    }
    filteredValues[side] = values?.[side];
  });
  return filteredValues;
}
function splitStyleValue(value) {
  if (value && typeof value === "string") {
    return {
      top: value,
      right: value,
      bottom: value,
      left: value
    };
  }
  return value;
}
function splitGapValue(value, isAxialGap) {
  if (!value) {
    return value;
  }
  if (typeof value === "string") {
    return isAxialGap ? { top: value, right: value, bottom: value, left: value } : { top: value };
  }
  return {
    ...value,
    right: value?.left,
    bottom: value?.top
  };
}
function DimensionsToolsPanel({
  resetAllFilter,
  onChange,
  value,
  panelId,
  children
}) {
  const dropdownMenuProps = (0, import_utils.useToolsPanelDropdownMenuProps)();
  const resetAll = () => {
    const updatedValue = resetAllFilter(value);
    onChange(updatedValue);
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components.__experimentalToolsPanel,
    {
      label: (0, import_i18n.__)("Dimensions"),
      resetAll,
      panelId,
      dropdownMenuProps,
      children
    }
  );
}
var DEFAULT_CONTROLS = {
  contentSize: true,
  wideSize: true,
  padding: true,
  margin: true,
  blockGap: true,
  minHeight: true,
  width: true,
  aspectRatio: true,
  childLayout: true
};
function DimensionsPanel({
  as: Wrapper = DimensionsToolsPanel,
  value,
  onChange,
  inheritedValue = value,
  settings,
  panelId,
  defaultControls = DEFAULT_CONTROLS,
  onVisualize = () => {
  },
  // Special case because the layout controls are not part of the dimensions panel
  // in global styles but not in block inspector.
  includeLayoutControls = false
}) {
  const { dimensions, spacing } = settings;
  const decodeValue = (rawValue) => {
    if (rawValue && typeof rawValue === "object") {
      return Object.keys(rawValue).reduce((acc, key) => {
        acc[key] = (0, import_global_styles_engine.getValueFromVariable)(
          { settings: { dimensions, spacing } },
          "",
          rawValue[key]
        );
        return acc;
      }, {});
    }
    return (0, import_global_styles_engine.getValueFromVariable)(
      { settings: { dimensions, spacing } },
      "",
      rawValue
    );
  };
  const showSpacingPresetsControl = useHasSpacingPresets(settings);
  const units = (0, import_components.__experimentalUseCustomUnits)({
    availableUnits: settings?.spacing?.units || [
      "%",
      "px",
      "em",
      "rem",
      "vw"
    ]
  });
  const minimumMargin = -Infinity;
  const [minMarginValue, setMinMarginValue] = (0, import_element.useState)(minimumMargin);
  const showContentSizeControl = useHasContentSize(settings) && includeLayoutControls;
  const contentSizeValue = decodeValue(inheritedValue?.layout?.contentSize);
  const setContentSizeValue = (newValue) => {
    onChange(
      (0, import_object.setImmutably)(
        value,
        ["layout", "contentSize"],
        newValue || void 0
      )
    );
  };
  const hasUserSetContentSizeValue = () => !!value?.layout?.contentSize;
  const resetContentSizeValue = () => setContentSizeValue(void 0);
  const showWideSizeControl = useHasWideSize(settings) && includeLayoutControls;
  const wideSizeValue = decodeValue(inheritedValue?.layout?.wideSize);
  const setWideSizeValue = (newValue) => {
    onChange(
      (0, import_object.setImmutably)(
        value,
        ["layout", "wideSize"],
        newValue || void 0
      )
    );
  };
  const hasUserSetWideSizeValue = () => !!value?.layout?.wideSize;
  const resetWideSizeValue = () => setWideSizeValue(void 0);
  const showPaddingControl = useHasPadding(settings);
  const rawPadding = decodeValue(inheritedValue?.spacing?.padding);
  const paddingValues = splitStyleValue(rawPadding);
  const paddingSides = Array.isArray(settings?.spacing?.padding) ? settings?.spacing?.padding : settings?.spacing?.padding?.sides;
  const isAxialPadding = paddingSides && paddingSides.some((side) => AXIAL_SIDES.includes(side));
  const setPaddingValues = (newPaddingValues) => {
    const padding = filterValuesBySides(newPaddingValues, paddingSides);
    onChange((0, import_object.setImmutably)(value, ["spacing", "padding"], padding));
  };
  const hasPaddingValue = () => !!value?.spacing?.padding && Object.keys(value?.spacing?.padding).length;
  const resetPaddingValue = () => setPaddingValues(void 0);
  const onMouseOverPadding = () => onVisualize("padding");
  const showMarginControl = useHasMargin(settings);
  const rawMargin = decodeValue(inheritedValue?.spacing?.margin);
  const marginValues = splitStyleValue(rawMargin);
  const marginSides = Array.isArray(settings?.spacing?.margin) ? settings?.spacing?.margin : settings?.spacing?.margin?.sides;
  const isAxialMargin = marginSides && marginSides.some((side) => AXIAL_SIDES.includes(side));
  const setMarginValues = (newMarginValues) => {
    const margin = filterValuesBySides(newMarginValues, marginSides);
    onChange((0, import_object.setImmutably)(value, ["spacing", "margin"], margin));
  };
  const hasMarginValue = () => !!value?.spacing?.margin && Object.keys(value?.spacing?.margin).length;
  const resetMarginValue = () => setMarginValues(void 0);
  const onMouseOverMargin = () => onVisualize("margin");
  const showGapControl = useHasGap(settings);
  const gapSides = Array.isArray(settings?.spacing?.blockGap) ? settings?.spacing?.blockGap : settings?.spacing?.blockGap?.sides;
  const isAxialGap = gapSides && gapSides.some((side) => AXIAL_SIDES.includes(side));
  const gapValue = decodeValue(inheritedValue?.spacing?.blockGap);
  const gapValues = splitGapValue(gapValue, isAxialGap);
  const setGapValue = (newGapValue) => {
    onChange(
      (0, import_object.setImmutably)(value, ["spacing", "blockGap"], newGapValue)
    );
  };
  const setGapValues = (nextBoxGapValue) => {
    if (!nextBoxGapValue) {
      setGapValue(null);
    }
    if (!isAxialGap && nextBoxGapValue?.hasOwnProperty("top")) {
      setGapValue(nextBoxGapValue.top);
    } else {
      setGapValue({
        top: nextBoxGapValue?.top,
        left: nextBoxGapValue?.left
      });
    }
  };
  const resetGapValue = () => setGapValue(void 0);
  const hasGapValue = () => !!value?.spacing?.blockGap;
  const showMinHeightControl = useHasMinHeight(settings);
  const minHeightValue = decodeValue(inheritedValue?.dimensions?.minHeight);
  const setMinHeightValue = (newValue) => {
    const tempValue = (0, import_object.setImmutably)(
      value,
      ["dimensions", "minHeight"],
      newValue
    );
    onChange(
      (0, import_object.setImmutably)(
        tempValue,
        ["dimensions", "aspectRatio"],
        void 0
      )
    );
  };
  const resetMinHeightValue = () => {
    setMinHeightValue(void 0);
  };
  const hasMinHeightValue = () => !!value?.dimensions?.minHeight;
  const showWidthControl = useHasWidth(settings);
  const widthValue = decodeValue(inheritedValue?.dimensions?.width);
  const setWidthValue = (newValue) => {
    onChange((0, import_object.setImmutably)(value, ["dimensions", "width"], newValue));
  };
  const resetWidthValue = () => {
    setWidthValue(void 0);
  };
  const hasWidthValue = () => !!value?.dimensions?.width;
  const showAspectRatioControl = useHasAspectRatio(settings);
  const aspectRatioValue = decodeValue(
    inheritedValue?.dimensions?.aspectRatio
  );
  const setAspectRatioValue = (newValue) => {
    const tempValue = (0, import_object.setImmutably)(
      value,
      ["dimensions", "aspectRatio"],
      newValue
    );
    onChange(
      (0, import_object.setImmutably)(tempValue, ["dimensions", "minHeight"], void 0)
    );
  };
  const hasAspectRatioValue = () => !!value?.dimensions?.aspectRatio;
  const showChildLayoutControl = useHasChildLayout(settings);
  const childLayout = inheritedValue?.layout;
  const setChildLayout = (newChildLayout) => {
    onChange({
      ...value,
      layout: {
        ...newChildLayout
      }
    });
  };
  const resetAllFilter = (0, import_element.useCallback)((previousValue) => {
    return {
      ...previousValue,
      layout: (0, import_utils2.cleanEmptyObject)({
        ...previousValue?.layout,
        contentSize: void 0,
        wideSize: void 0,
        selfStretch: void 0,
        flexSize: void 0,
        columnStart: void 0,
        rowStart: void 0,
        columnSpan: void 0,
        rowSpan: void 0
      }),
      spacing: {
        ...previousValue?.spacing,
        padding: void 0,
        margin: void 0,
        blockGap: void 0
      },
      dimensions: {
        ...previousValue?.dimensions,
        minHeight: void 0,
        aspectRatio: void 0,
        width: void 0
      }
    };
  }, []);
  const onMouseLeaveControls = () => onVisualize(false);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    Wrapper,
    {
      resetAllFilter,
      value,
      onChange,
      panelId,
      children: [
        (showContentSizeControl || showWideSizeControl) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "span-columns", children: (0, import_i18n.__)("Set the width of the main content area.") }),
        showContentSizeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalToolsPanelItem,
          {
            label: (0, import_i18n.__)("Content width"),
            hasValue: hasUserSetContentSizeValue,
            onDeselect: resetContentSizeValue,
            isShownByDefault: defaultControls.contentSize ?? DEFAULT_CONTROLS.contentSize,
            panelId,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_components.__experimentalUnitControl,
              {
                __next40pxDefaultSize: true,
                label: (0, import_i18n.__)("Content width"),
                labelPosition: "top",
                value: contentSizeValue || "",
                onChange: (nextContentSize) => {
                  setContentSizeValue(nextContentSize);
                },
                units,
                prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.alignNone }) })
              }
            )
          }
        ),
        showWideSizeControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalToolsPanelItem,
          {
            label: (0, import_i18n.__)("Wide width"),
            hasValue: hasUserSetWideSizeValue,
            onDeselect: resetWideSizeValue,
            isShownByDefault: defaultControls.wideSize ?? DEFAULT_CONTROLS.wideSize,
            panelId,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_components.__experimentalUnitControl,
              {
                __next40pxDefaultSize: true,
                label: (0, import_i18n.__)("Wide width"),
                labelPosition: "top",
                value: wideSizeValue || "",
                onChange: (nextWideSize) => {
                  setWideSizeValue(nextWideSize);
                },
                units,
                prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.stretchWide }) })
              }
            )
          }
        ),
        showPaddingControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          import_components.__experimentalToolsPanelItem,
          {
            hasValue: hasPaddingValue,
            label: (0, import_i18n.__)("Padding"),
            onDeselect: resetPaddingValue,
            isShownByDefault: defaultControls.padding ?? DEFAULT_CONTROLS.padding,
            className: (0, import_clsx.default)({
              "tools-panel-item-spacing": showSpacingPresetsControl
            }),
            panelId,
            children: [
              !showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.BoxControl,
                {
                  __next40pxDefaultSize: true,
                  values: paddingValues,
                  onChange: setPaddingValues,
                  label: (0, import_i18n.__)("Padding"),
                  sides: paddingSides,
                  units,
                  allowReset: false,
                  splitOnAxis: isAxialPadding,
                  inputProps: {
                    onMouseOver: onMouseOverPadding,
                    onMouseOut: onMouseLeaveControls
                  }
                }
              ),
              showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_spacing_sizes_control.default,
                {
                  values: paddingValues,
                  onChange: setPaddingValues,
                  label: (0, import_i18n.__)("Padding"),
                  sides: paddingSides,
                  units,
                  allowReset: false,
                  onMouseOver: onMouseOverPadding,
                  onMouseOut: onMouseLeaveControls
                }
              )
            ]
          }
        ),
        showMarginControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          import_components.__experimentalToolsPanelItem,
          {
            hasValue: hasMarginValue,
            label: (0, import_i18n.__)("Margin"),
            onDeselect: resetMarginValue,
            isShownByDefault: defaultControls.margin ?? DEFAULT_CONTROLS.margin,
            className: (0, import_clsx.default)({
              "tools-panel-item-spacing": showSpacingPresetsControl
            }),
            panelId,
            children: [
              !showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.BoxControl,
                {
                  __next40pxDefaultSize: true,
                  values: marginValues,
                  onChange: setMarginValues,
                  inputProps: {
                    min: minMarginValue,
                    onDragStart: () => {
                      setMinMarginValue(0);
                    },
                    onDragEnd: () => {
                      setMinMarginValue(minimumMargin);
                    },
                    onMouseOver: onMouseOverMargin,
                    onMouseOut: onMouseLeaveControls
                  },
                  label: (0, import_i18n.__)("Margin"),
                  sides: marginSides,
                  units,
                  allowReset: false,
                  splitOnAxis: isAxialMargin
                }
              ),
              showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_spacing_sizes_control.default,
                {
                  values: marginValues,
                  onChange: setMarginValues,
                  minimumCustomValue: -Infinity,
                  label: (0, import_i18n.__)("Margin"),
                  sides: marginSides,
                  units,
                  allowReset: false,
                  onMouseOver: onMouseOverMargin,
                  onMouseOut: onMouseLeaveControls
                }
              )
            ]
          }
        ),
        showGapControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          import_components.__experimentalToolsPanelItem,
          {
            hasValue: hasGapValue,
            label: (0, import_i18n.__)("Block spacing"),
            onDeselect: resetGapValue,
            isShownByDefault: defaultControls.blockGap ?? DEFAULT_CONTROLS.blockGap,
            className: (0, import_clsx.default)({
              "tools-panel-item-spacing": showSpacingPresetsControl,
              "single-column": (
                // If UnitControl is used, should be single-column.
                !showSpacingPresetsControl && !isAxialGap
              )
            }),
            panelId,
            children: [
              !showSpacingPresetsControl && (isAxialGap ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.BoxControl,
                {
                  __next40pxDefaultSize: true,
                  label: (0, import_i18n.__)("Block spacing"),
                  min: 0,
                  onChange: setGapValues,
                  units,
                  sides: gapSides,
                  values: gapValues,
                  allowReset: false,
                  splitOnAxis: isAxialGap
                }
              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.__experimentalUnitControl,
                {
                  __next40pxDefaultSize: true,
                  label: (0, import_i18n.__)("Block spacing"),
                  min: 0,
                  onChange: setGapValue,
                  units,
                  value: gapValue
                }
              )),
              showSpacingPresetsControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_spacing_sizes_control.default,
                {
                  label: (0, import_i18n.__)("Block spacing"),
                  min: 0,
                  onChange: setGapValues,
                  showSideInLabel: false,
                  sides: isAxialGap ? gapSides : ["top"],
                  values: gapValues,
                  allowReset: false
                }
              )
            ]
          }
        ),
        showChildLayoutControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_child_layout_control.default,
          {
            value: childLayout,
            onChange: setChildLayout,
            parentLayout: settings?.parentLayout,
            panelId,
            isShownByDefault: defaultControls.childLayout ?? DEFAULT_CONTROLS.childLayout
          }
        ),
        showMinHeightControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalToolsPanelItem,
          {
            hasValue: hasMinHeightValue,
            label: (0, import_i18n.__)("Minimum height"),
            onDeselect: resetMinHeightValue,
            isShownByDefault: defaultControls.minHeight ?? DEFAULT_CONTROLS.minHeight,
            panelId,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_height_control.default,
              {
                label: (0, import_i18n.__)("Minimum height"),
                value: minHeightValue,
                onChange: setMinHeightValue
              }
            )
          }
        ),
        showWidthControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalToolsPanelItem,
          {
            hasValue: hasWidthValue,
            label: (0, import_i18n.__)("Width"),
            onDeselect: resetWidthValue,
            isShownByDefault: defaultControls.width ?? DEFAULT_CONTROLS.width,
            panelId,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_height_control.default,
              {
                label: (0, import_i18n.__)("Width"),
                value: widthValue,
                onChange: setWidthValue
              }
            )
          }
        ),
        showAspectRatioControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_aspect_ratio_tool.default,
          {
            hasValue: hasAspectRatioValue,
            value: aspectRatioValue,
            onChange: setAspectRatioValue,
            panelId,
            isShownByDefault: defaultControls.aspectRatio ?? DEFAULT_CONTROLS.aspectRatio
          }
        )
      ]
    }
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useHasDimensionsPanel
});
//# sourceMappingURL=dimensions-panel.js.map
