Edit File by line

function AllInputControl({

[42000] Fix | Delete

__next40pxDefaultSize,

[42001] Fix | Delete

onChange = all_input_control_noop,

[42002] Fix | Delete

onFocus = all_input_control_noop,

[42003] Fix | Delete

values,

[42004] Fix | Delete

sides,

[42005] Fix | Delete

selectedUnits,

[42006] Fix | Delete

setSelectedUnits,

[42007] Fix | Delete

...props

[42008] Fix | Delete

}) {

[42009] Fix | Delete

var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;

[42010] Fix | Delete

const inputId = (0,external_wp_compose_namespaceObject.useInstanceId)(AllInputControl, 'box-control-input-all');

[42011] Fix | Delete

const allValue = getAllValue(values, selectedUnits, sides);

[42012] Fix | Delete

const hasValues = isValuesDefined(values);

[42013] Fix | Delete

const isMixed = hasValues && isValuesMixed(values, selectedUnits, sides);

[42014] Fix | Delete

const allPlaceholder = isMixed ? LABELS.mixed : undefined;

[42015] Fix | Delete

const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(allValue);

[42016] Fix | Delete

const handleOnFocus = event => {

[42017] Fix | Delete

onFocus(event, {

[42018] Fix | Delete

side: 'all'

[42019] Fix | Delete

});

[42020] Fix | Delete

};

[42021] Fix | Delete

const onValueChange = next => {

[42022] Fix | Delete

const isNumeric = next !== undefined && !isNaN(parseFloat(next));

[42023] Fix | Delete

const nextValue = isNumeric ? next : undefined;

[42024] Fix | Delete

const nextValues = applyValueToSides(values, nextValue, sides);

[42025] Fix | Delete

onChange(nextValues);

[42026] Fix | Delete

};

[42027] Fix | Delete

const sliderOnChange = next => {

[42028] Fix | Delete

onValueChange(next !== undefined ? [next, parsedUnit].join('') : undefined);

[42029] Fix | Delete

};

[42030] Fix | Delete

[42031] Fix | Delete

// Set selected unit so it can be used as fallback by unlinked controls

[42032] Fix | Delete

// when individual sides do not have a value containing a unit.

[42033] Fix | Delete

const handleOnUnitChange = unit => {

[42034] Fix | Delete

const newUnits = applyValueToSides(selectedUnits, unit, sides);

[42035] Fix | Delete

setSelectedUnits(newUnits);

[42036] Fix | Delete

};

[42037] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {

[42038] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, {

[42039] Fix | Delete

...props,

[42040] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[42041] Fix | Delete

className: "component-box-control__unit-control",

[42042] Fix | Delete

disableUnits: isMixed,

[42043] Fix | Delete

id: inputId,

[42044] Fix | Delete

isPressEnterToChange: true,

[42045] Fix | Delete

value: allValue,

[42046] Fix | Delete

onChange: onValueChange,

[42047] Fix | Delete

onUnitChange: handleOnUnitChange,

[42048] Fix | Delete

onFocus: handleOnFocus,

[42049] Fix | Delete

placeholder: allPlaceholder,

[42050] Fix | Delete

label: LABELS.all,

[42051] Fix | Delete

hideLabelFromVision: true

[42052] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {

[42053] Fix | Delete

__nextHasNoMarginBottom: true,

[42054] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[42055] Fix | Delete

"aria-controls": inputId,

[42056] Fix | Delete

label: LABELS.all,

[42057] Fix | Delete

hideLabelFromVision: true,

[42058] Fix | Delete

onChange: sliderOnChange,

[42059] Fix | Delete

min: 0,

[42060] Fix | Delete

max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,

[42061] Fix | Delete

step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,

[42062] Fix | Delete

value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,

[42063] Fix | Delete

withInputField: false

[42064] Fix | Delete

})]

[42065] Fix | Delete

});

[42066] Fix | Delete

}

[42067] Fix | Delete

[42068] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/input-controls.js

[42069] Fix | Delete

/**

[42070] Fix | Delete

* WordPress dependencies

[42071] Fix | Delete

[42072] Fix | Delete

[42073] Fix | Delete

/**

[42074] Fix | Delete

* Internal dependencies

[42075] Fix | Delete

[42076] Fix | Delete

[42077] Fix | Delete

[42078] Fix | Delete

[42079] Fix | Delete

[42080] Fix | Delete

[42081] Fix | Delete

[42082] Fix | Delete

[42083] Fix | Delete

const input_controls_noop = () => {};

[42084] Fix | Delete

function BoxInputControls({

[42085] Fix | Delete

__next40pxDefaultSize,

[42086] Fix | Delete

onChange = input_controls_noop,

[42087] Fix | Delete

onFocus = input_controls_noop,

[42088] Fix | Delete

values,

[42089] Fix | Delete

selectedUnits,

[42090] Fix | Delete

setSelectedUnits,

[42091] Fix | Delete

sides,

[42092] Fix | Delete

...props

[42093] Fix | Delete

}) {

[42094] Fix | Delete

const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxInputControls, 'box-control-input');

[42095] Fix | Delete

const createHandleOnFocus = side => event => {

[42096] Fix | Delete

onFocus(event, {

[42097] Fix | Delete

side

[42098] Fix | Delete

});

[42099] Fix | Delete

};

[42100] Fix | Delete

const handleOnChange = nextValues => {

[42101] Fix | Delete

onChange(nextValues);

[42102] Fix | Delete

};

[42103] Fix | Delete

const handleOnValueChange = (side, next, extra) => {

[42104] Fix | Delete

const nextValues = {

[42105] Fix | Delete

...values

[42106] Fix | Delete

};

[42107] Fix | Delete

const isNumeric = next !== undefined && !isNaN(parseFloat(next));

[42108] Fix | Delete

const nextValue = isNumeric ? next : undefined;

[42109] Fix | Delete

nextValues[side] = nextValue;

[42110] Fix | Delete

[42111] Fix | Delete

/**

[42112] Fix | Delete

* Supports changing pair sides. For example, holding the ALT key

[42113] Fix | Delete

* when changing the TOP will also update BOTTOM.

[42114] Fix | Delete

[42115] Fix | Delete

// @ts-expect-error - TODO: event.altKey is only present when the change event was

[42116] Fix | Delete

// triggered by a keyboard event. Should this feature be implemented differently so

[42117] Fix | Delete

// it also works with drag events?

[42118] Fix | Delete

if (extra?.event.altKey) {

[42119] Fix | Delete

switch (side) {

[42120] Fix | Delete

case 'top':

[42121] Fix | Delete

nextValues.bottom = nextValue;

[42122] Fix | Delete

break;

[42123] Fix | Delete

case 'bottom':

[42124] Fix | Delete

nextValues.top = nextValue;

[42125] Fix | Delete

break;

[42126] Fix | Delete

case 'left':

[42127] Fix | Delete

nextValues.right = nextValue;

[42128] Fix | Delete

break;

[42129] Fix | Delete

case 'right':

[42130] Fix | Delete

nextValues.left = nextValue;

[42131] Fix | Delete

break;

[42132] Fix | Delete

}

[42133] Fix | Delete

}

[42134] Fix | Delete

handleOnChange(nextValues);

[42135] Fix | Delete

};

[42136] Fix | Delete

const createHandleOnUnitChange = side => next => {

[42137] Fix | Delete

const newUnits = {

[42138] Fix | Delete

...selectedUnits

[42139] Fix | Delete

};

[42140] Fix | Delete

newUnits[side] = next;

[42141] Fix | Delete

setSelectedUnits(newUnits);

[42142] Fix | Delete

};

[42143] Fix | Delete

[42144] Fix | Delete

// Filter sides if custom configuration provided, maintaining default order.

[42145] Fix | Delete

const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;

[42146] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[42147] Fix | Delete

children: filteredSides.map(side => {

[42148] Fix | Delete

var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;

[42149] Fix | Delete

const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);

[42150] Fix | Delete

const computedUnit = values[side] ? parsedUnit : selectedUnits[side];

[42151] Fix | Delete

const inputId = [generatedId, side].join('-');

[42152] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {

[42153] Fix | Delete

expanded: true,

[42154] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {

[42155] Fix | Delete

side: side,

[42156] Fix | Delete

sides: sides

[42157] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {

[42158] Fix | Delete

placement: "top-end",

[42159] Fix | Delete

text: LABELS[side],

[42160] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(StyledUnitControl, {

[42161] Fix | Delete

...props,

[42162] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[42163] Fix | Delete

className: "component-box-control__unit-control",

[42164] Fix | Delete

id: inputId,

[42165] Fix | Delete

isPressEnterToChange: true,

[42166] Fix | Delete

value: [parsedQuantity, computedUnit].join(''),

[42167] Fix | Delete

onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra),

[42168] Fix | Delete

onUnitChange: createHandleOnUnitChange(side),

[42169] Fix | Delete

onFocus: createHandleOnFocus(side),

[42170] Fix | Delete

label: LABELS[side],

[42171] Fix | Delete

hideLabelFromVision: true

[42172] Fix | Delete

})

[42173] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {

[42174] Fix | Delete

__nextHasNoMarginBottom: true,

[42175] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[42176] Fix | Delete

"aria-controls": inputId,

[42177] Fix | Delete

label: LABELS[side],

[42178] Fix | Delete

hideLabelFromVision: true,

[42179] Fix | Delete

onChange: newValue => {

[42180] Fix | Delete

handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined);

[42181] Fix | Delete

[42182] Fix | Delete

min: 0,

[42183] Fix | Delete

max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,

[42184] Fix | Delete

step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,

[42185] Fix | Delete

value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,

[42186] Fix | Delete

withInputField: false

[42187] Fix | Delete

})]

[42188] Fix | Delete

}, `box-control-${side}`);

[42189] Fix | Delete

})

[42190] Fix | Delete

});

[42191] Fix | Delete

}

[42192] Fix | Delete

[42193] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/axial-input-controls.js

[42194] Fix | Delete

/**

[42195] Fix | Delete

* WordPress dependencies

[42196] Fix | Delete

[42197] Fix | Delete

[42198] Fix | Delete

/**

[42199] Fix | Delete

* Internal dependencies

[42200] Fix | Delete

[42201] Fix | Delete

[42202] Fix | Delete

[42203] Fix | Delete

[42204] Fix | Delete

[42205] Fix | Delete

[42206] Fix | Delete

[42207] Fix | Delete

[42208] Fix | Delete

[42209] Fix | Delete

const groupedSides = ['vertical', 'horizontal'];

[42210] Fix | Delete

function AxialInputControls({

[42211] Fix | Delete

__next40pxDefaultSize,

[42212] Fix | Delete

onChange,

[42213] Fix | Delete

onFocus,

[42214] Fix | Delete

values,

[42215] Fix | Delete

selectedUnits,

[42216] Fix | Delete

setSelectedUnits,

[42217] Fix | Delete

sides,

[42218] Fix | Delete

...props

[42219] Fix | Delete

}) {

[42220] Fix | Delete

const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(AxialInputControls, `box-control-input`);

[42221] Fix | Delete

const createHandleOnFocus = side => event => {

[42222] Fix | Delete

if (!onFocus) {

[42223] Fix | Delete

return;

[42224] Fix | Delete

}

[42225] Fix | Delete

onFocus(event, {

[42226] Fix | Delete

side

[42227] Fix | Delete

});

[42228] Fix | Delete

};

[42229] Fix | Delete

const handleOnValueChange = (side, next) => {

[42230] Fix | Delete

if (!onChange) {

[42231] Fix | Delete

return;

[42232] Fix | Delete

}

[42233] Fix | Delete

const nextValues = {

[42234] Fix | Delete

...values

[42235] Fix | Delete

};

[42236] Fix | Delete

const isNumeric = next !== undefined && !isNaN(parseFloat(next));

[42237] Fix | Delete

const nextValue = isNumeric ? next : undefined;

[42238] Fix | Delete

if (side === 'vertical') {

[42239] Fix | Delete

nextValues.top = nextValue;

[42240] Fix | Delete

nextValues.bottom = nextValue;

[42241] Fix | Delete

}

[42242] Fix | Delete

if (side === 'horizontal') {

[42243] Fix | Delete

nextValues.left = nextValue;

[42244] Fix | Delete

nextValues.right = nextValue;

[42245] Fix | Delete

}

[42246] Fix | Delete

onChange(nextValues);

[42247] Fix | Delete

};

[42248] Fix | Delete

const createHandleOnUnitChange = side => next => {

[42249] Fix | Delete

const newUnits = {

[42250] Fix | Delete

...selectedUnits

[42251] Fix | Delete

};

[42252] Fix | Delete

if (side === 'vertical') {

[42253] Fix | Delete

newUnits.top = next;

[42254] Fix | Delete

newUnits.bottom = next;

[42255] Fix | Delete

}

[42256] Fix | Delete

if (side === 'horizontal') {

[42257] Fix | Delete

newUnits.left = next;

[42258] Fix | Delete

newUnits.right = next;

[42259] Fix | Delete

}

[42260] Fix | Delete

setSelectedUnits(newUnits);

[42261] Fix | Delete

};

[42262] Fix | Delete

[42263] Fix | Delete

// Filter sides if custom configuration provided, maintaining default order.

[42264] Fix | Delete

const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;

[42265] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[42266] Fix | Delete

children: filteredSides.map(side => {

[42267] Fix | Delete

var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;

[42268] Fix | Delete

const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left);

[42269] Fix | Delete

const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;

[42270] Fix | Delete

const inputId = [generatedId, side].join('-');

[42271] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {

[42272] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {

[42273] Fix | Delete

side: side,

[42274] Fix | Delete

sides: sides

[42275] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {

[42276] Fix | Delete

placement: "top-end",

[42277] Fix | Delete

text: LABELS[side],

[42278] Fix | Delete

children: /*#__PURE__*/(0,external_React_.createElement)(StyledUnitControl, {

[42279] Fix | Delete

...props,

[42280] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[42281] Fix | Delete

className: "component-box-control__unit-control",

[42282] Fix | Delete

id: inputId,

[42283] Fix | Delete

isPressEnterToChange: true,

[42284] Fix | Delete

value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),

[42285] Fix | Delete

onChange: newValue => handleOnValueChange(side, newValue),

[42286] Fix | Delete

onUnitChange: createHandleOnUnitChange(side),

[42287] Fix | Delete

onFocus: createHandleOnFocus(side),

[42288] Fix | Delete

label: LABELS[side],

[42289] Fix | Delete

hideLabelFromVision: true,

[42290] Fix | Delete

key: side

[42291] Fix | Delete

})

[42292] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedRangeControl, {

[42293] Fix | Delete

__nextHasNoMarginBottom: true,

[42294] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[42295] Fix | Delete

"aria-controls": inputId,

[42296] Fix | Delete

label: LABELS[side],

[42297] Fix | Delete

hideLabelFromVision: true,

[42298] Fix | Delete

onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined),

[42299] Fix | Delete

min: 0,

[42300] Fix | Delete

max: (_CUSTOM_VALUE_SETTING = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,

[42301] Fix | Delete

step: (_CUSTOM_VALUE_SETTING2 = CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,

[42302] Fix | Delete

value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,

[42303] Fix | Delete

withInputField: false

[42304] Fix | Delete

})]

[42305] Fix | Delete

}, side);

[42306] Fix | Delete

})

[42307] Fix | Delete

});

[42308] Fix | Delete

}

[42309] Fix | Delete

[42310] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/linked-button.js

[42311] Fix | Delete

/**

[42312] Fix | Delete

* WordPress dependencies

[42313] Fix | Delete

[42314] Fix | Delete

[42315] Fix | Delete

[42316] Fix | Delete

[42317] Fix | Delete

/**

[42318] Fix | Delete

* Internal dependencies

[42319] Fix | Delete

[42320] Fix | Delete

[42321] Fix | Delete

[42322] Fix | Delete

[42323] Fix | Delete

function LinkedButton({

[42324] Fix | Delete

isLinked,

[42325] Fix | Delete

...props

[42326] Fix | Delete

}) {

[42327] Fix | Delete

const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides');

[42328] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {

[42329] Fix | Delete

text: label,

[42330] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[42331] Fix | Delete

...props,

[42332] Fix | Delete

className: "component-box-control__linked-button",

[42333] Fix | Delete

size: "small",

[42334] Fix | Delete

icon: isLinked ? library_link : link_off,

[42335] Fix | Delete

iconSize: 24,

[42336] Fix | Delete

"aria-label": label

[42337] Fix | Delete

})

[42338] Fix | Delete

});

[42339] Fix | Delete

}

[42340] Fix | Delete

[42341] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/index.js

[42342] Fix | Delete

/**

[42343] Fix | Delete

* WordPress dependencies

[42344] Fix | Delete

[42345] Fix | Delete

[42346] Fix | Delete

[42347] Fix | Delete

[42348] Fix | Delete

[42349] Fix | Delete

/**

[42350] Fix | Delete

* Internal dependencies

[42351] Fix | Delete

[42352] Fix | Delete

[42353] Fix | Delete

[42354] Fix | Delete

[42355] Fix | Delete

[42356] Fix | Delete

[42357] Fix | Delete

[42358] Fix | Delete

[42359] Fix | Delete

[42360] Fix | Delete

[42361] Fix | Delete

[42362] Fix | Delete

[42363] Fix | Delete

[42364] Fix | Delete

const defaultInputProps = {

[42365] Fix | Delete

min: 0

[42366] Fix | Delete

};

[42367] Fix | Delete

const box_control_noop = () => {};

[42368] Fix | Delete

function box_control_useUniqueId(idProp) {

[42369] Fix | Delete

const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxControl, 'inspector-box-control');

[42370] Fix | Delete

return idProp || instanceId;

[42371] Fix | Delete

}

[42372] Fix | Delete

[42373] Fix | Delete

/**

[42374] Fix | Delete

* BoxControl components let users set values for Top, Right, Bottom, and Left.

[42375] Fix | Delete

* This can be used as an input control for values like `padding` or `margin`.

[42376] Fix | Delete

[42377] Fix | Delete

* ```jsx

[42378] Fix | Delete

* import { __experimentalBoxControl as BoxControl } from '@wordpress/components';

[42379] Fix | Delete

* import { useState } from '@wordpress/element';

[42380] Fix | Delete

[42381] Fix | Delete

* const Example = () => {

[42382] Fix | Delete

* const [ values, setValues ] = useState( {

[42383] Fix | Delete

* top: '50px',

[42384] Fix | Delete

* left: '10%',

[42385] Fix | Delete

* right: '10%',

[42386] Fix | Delete

* bottom: '50px',

[42387] Fix | Delete

* } );

[42388] Fix | Delete

[42389] Fix | Delete

* return (

[42390] Fix | Delete

* <BoxControl

[42391] Fix | Delete

* values={ values }

[42392] Fix | Delete

* onChange={ ( nextValues ) => setValues( nextValues ) }

[42393] Fix | Delete

* />

[42394] Fix | Delete

* );

[42395] Fix | Delete

* };

[42396] Fix | Delete

* ```

[42397] Fix | Delete

[42398] Fix | Delete

function BoxControl({

[42399] Fix | Delete

__next40pxDefaultSize = false,

[42400] Fix | Delete

id: idProp,

[42401] Fix | Delete

inputProps = defaultInputProps,

[42402] Fix | Delete

onChange = box_control_noop,

[42403] Fix | Delete

label = (0,external_wp_i18n_namespaceObject.__)('Box Control'),

[42404] Fix | Delete

values: valuesProp,

[42405] Fix | Delete

units,

[42406] Fix | Delete

sides,

[42407] Fix | Delete

splitOnAxis = false,

[42408] Fix | Delete

allowReset = true,

[42409] Fix | Delete

resetValues = DEFAULT_VALUES,

[42410] Fix | Delete

onMouseOver,

[42411] Fix | Delete

onMouseOut

[42412] Fix | Delete

}) {

[42413] Fix | Delete

const [values, setValues] = use_controlled_state(valuesProp, {

[42414] Fix | Delete

fallback: DEFAULT_VALUES

[42415] Fix | Delete

});

[42416] Fix | Delete

const inputValues = values || DEFAULT_VALUES;

[42417] Fix | Delete

const hasInitialValue = isValuesDefined(valuesProp);

[42418] Fix | Delete

const hasOneSide = sides?.length === 1;

[42419] Fix | Delete

const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue);

[42420] Fix | Delete

const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);

[42421] Fix | Delete

const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis));

[42422] Fix | Delete

[42423] Fix | Delete

// Tracking selected units via internal state allows filtering of CSS unit

[42424] Fix | Delete

// only values from being saved while maintaining preexisting unit selection

[42425] Fix | Delete

// behaviour. Filtering CSS only values prevents invalid style values.

[42426] Fix | Delete

const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({

[42427] Fix | Delete

top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],

[42428] Fix | Delete

right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],

[42429] Fix | Delete

bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],

[42430] Fix | Delete

left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]

[42431] Fix | Delete

});

[42432] Fix | Delete

const id = box_control_useUniqueId(idProp);

[42433] Fix | Delete

const headingId = `${id}-heading`;

[42434] Fix | Delete

const toggleLinked = () => {

[42435] Fix | Delete

setIsLinked(!isLinked);

[42436] Fix | Delete

setSide(getInitialSide(!isLinked, splitOnAxis));

[42437] Fix | Delete

};

[42438] Fix | Delete

const handleOnFocus = (_event, {

[42439] Fix | Delete

side: nextSide

[42440] Fix | Delete

}) => {

[42441] Fix | Delete

setSide(nextSide);

[42442] Fix | Delete

};

[42443] Fix | Delete

const handleOnChange = nextValues => {

[42444] Fix | Delete

onChange(nextValues);

[42445] Fix | Delete

setValues(nextValues);

[42446] Fix | Delete

setIsDirty(true);

[42447] Fix | Delete

};

[42448] Fix | Delete

const handleOnReset = () => {

[42449] Fix | Delete

onChange(resetValues);

[42450] Fix | Delete

setValues(resetValues);

[42451] Fix | Delete

setSelectedUnits(resetValues);

[42452] Fix | Delete

setIsDirty(false);

[42453] Fix | Delete

};

[42454] Fix | Delete

const inputControlProps = {

[42455] Fix | Delete

...inputProps,

[42456] Fix | Delete

onChange: handleOnChange,

[42457] Fix | Delete

onFocus: handleOnFocus,

[42458] Fix | Delete

isLinked,

[42459] Fix | Delete

units,

[42460] Fix | Delete

selectedUnits,

[42461] Fix | Delete

setSelectedUnits,

[42462] Fix | Delete

sides,

[42463] Fix | Delete

values: inputValues,

[42464] Fix | Delete

onMouseOver,

[42465] Fix | Delete

onMouseOut,

[42466] Fix | Delete

__next40pxDefaultSize

[42467] Fix | Delete

};

[42468] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(grid_component, {

[42469] Fix | Delete

id: id,

[42470] Fix | Delete

columns: 3,

[42471] Fix | Delete

templateColumns: "1fr min-content min-content",

[42472] Fix | Delete

role: "group",

[42473] Fix | Delete

"aria-labelledby": headingId,

[42474] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BaseControl.VisualLabel, {

[42475] Fix | Delete

id: headingId,

[42476] Fix | Delete

children: label

[42477] Fix | Delete

}), isLinked && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(InputWrapper, {

[42478] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(FlexedBoxControlIcon, {

[42479] Fix | Delete

side: side,

[42480] Fix | Delete

sides: sides

[42481] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AllInputControl, {

[42482] Fix | Delete

...inputControlProps

[42483] Fix | Delete

})]

[42484] Fix | Delete

}), !hasOneSide && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButtonWrapper, {

[42485] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LinkedButton, {

[42486] Fix | Delete

onClick: toggleLinked,

[42487] Fix | Delete

isLinked: isLinked

[42488] Fix | Delete

})

[42489] Fix | Delete

}), !isLinked && splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AxialInputControls, {

[42490] Fix | Delete

...inputControlProps

[42491] Fix | Delete

}), !isLinked && !splitOnAxis && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BoxInputControls, {

[42492] Fix | Delete

...inputControlProps

[42493] Fix | Delete

}), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ResetButton, {

[42494] Fix | Delete

className: "component-box-control__reset-button",

[42495] Fix | Delete

variant: "secondary",

[42496] Fix | Delete

size: "small",

[42497] Fix | Delete

onClick: handleOnReset,

[42498] Fix | Delete

disabled: !isDirty,

[42499] Fix | Delete

1 ...83 848586 87 ...149