fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,18 @@
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
*/
import { css } from '@emotion/react';
// This is a very low-level mixin which you shouldn't have to use directly.
// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
export const baseLabelTypography = process.env.NODE_ENV === "production" ? {
name: "9amh4a",
styles: "font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase"
} : {
name: "1awj7qe-baseLabelTypography",
styles: "font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase;label:baseLabelTypography;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvYmFzZS1sYWJlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPc0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9iYXNlLWxhYmVsLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vLyBUaGlzIGlzIGEgdmVyeSBsb3ctbGV2ZWwgbWl4aW4gd2hpY2ggeW91IHNob3VsZG4ndCBoYXZlIHRvIHVzZSBkaXJlY3RseS5cbi8vIFRyeSB0byB1c2UgQmFzZUNvbnRyb2wncyBTdHlsZWRMYWJlbCBvciBCYXNlQ29udHJvbC5WaXN1YWxMYWJlbCBpZiB5b3UgY2FuLlxuZXhwb3J0IGNvbnN0IGJhc2VMYWJlbFR5cG9ncmFwaHkgPSBjc3NgXG5cdGZvbnQtc2l6ZTogMTFweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0bGluZS1oZWlnaHQ6IDEuNDtcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcbmA7XG4iXX0= */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
//# sourceMappingURL=base-label.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["css","baseLabelTypography","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["@wordpress/components/src/utils/base-label.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n// This is a very low-level mixin which you shouldn't have to use directly.\n// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.\nexport const baseLabelTypography = css`\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tline-height: 1.4;\n\ttext-transform: uppercase;\n`;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAK/B"}

View File

@@ -0,0 +1,15 @@
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
/**
* External dependencies
*/
import { css } from '@emotion/react';
export const boxSizingReset = process.env.NODE_ENV === "production" ? {
name: "kv6lnz",
styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}"
} : {
name: "1pa5nhz-boxSizingReset",
styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;};label:boxSizingReset;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvYm94LXNpemluZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLaUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9ib3gtc2l6aW5nLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgYm94U2l6aW5nUmVzZXQgPSBjc3NgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cblx0Kixcblx0Kjo6YmVmb3JlLFxuXHQqOjphZnRlciB7XG5cdFx0Ym94LXNpemluZzogaW5oZXJpdDtcblx0fVxuYDtcbiJdfQ== */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
//# sourceMappingURL=box-sizing.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["css","boxSizingReset","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__"],"sources":["@wordpress/components/src/utils/box-sizing.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\nexport const boxSizingReset = css`\n\tbox-sizing: border-box;\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: inherit;\n\t}\n`;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,OAAO,MAAMC,cAAc,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,CAQ1B"}

View File

@@ -0,0 +1,13 @@
export default {
huge: '1440px',
wide: '1280px',
'x-large': '1080px',
large: '960px',
// admin sidebar auto folds
medium: '782px',
// Adminbar goes big.
small: '600px',
mobile: '480px',
'zoomed-in': '280px'
};
//# sourceMappingURL=breakpoint-values.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["huge","wide","large","medium","small","mobile"],"sources":["@wordpress/components/src/utils/breakpoint-values.js"],"sourcesContent":["export default {\n\thuge: '1440px',\n\twide: '1280px',\n\t'x-large': '1080px',\n\tlarge: '960px', // admin sidebar auto folds\n\tmedium: '782px', // Adminbar goes big.\n\tsmall: '600px',\n\tmobile: '480px',\n\t'zoomed-in': '280px',\n};\n"],"mappings":"AAAA,eAAe;EACdA,IAAI,EAAE,QAAQ;EACdC,IAAI,EAAE,QAAQ;EACd,SAAS,EAAE,QAAQ;EACnBC,KAAK,EAAE,OAAO;EAAE;EAChBC,MAAM,EAAE,OAAO;EAAE;EACjBC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,OAAO;EACf,WAAW,EAAE;AACd,CAAC"}

View File

@@ -0,0 +1,11 @@
/**
* Internal dependencies
*/
import breakpoints from './breakpoint-values';
/**
* @param {keyof breakpoints} point
* @return {string} Media query declaration.
*/
export const breakpoint = point => `@media (min-width: ${breakpoints[point]})`;
//# sourceMappingURL=breakpoint.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["breakpoints","breakpoint","point"],"sources":["@wordpress/components/src/utils/breakpoint.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport breakpoints from './breakpoint-values';\n\n/**\n * @param {keyof breakpoints} point\n * @return {string} Media query declaration.\n */\nexport const breakpoint = ( point ) =>\n\t`@media (min-width: ${ breakpoints[ point ] })`;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,WAAW,MAAM,qBAAqB;;AAE7C;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAKC,KAAK,IAC/B,sBAAsBF,WAAW,CAAEE,KAAK,CAAI,GAAE"}

View File

@@ -0,0 +1,64 @@
/**
* Internal dependencies
*/
import { rgba } from './colors';
const white = '#fff';
// Matches the grays in @wordpress/base-styles
const GRAY = {
900: '#1e1e1e',
800: '#2f2f2f',
/** Meets 4.6:1 text contrast against white. */
700: '#757575',
/** Meets 3:1 UI or large text contrast against white. */
600: '#949494',
400: '#ccc',
/** Used for most borders. */
300: '#ddd',
/** Used sparingly for light borders. */
200: '#e0e0e0',
/** Used for light gray backgrounds. */
100: '#f0f0f0'
};
// Matches @wordpress/base-styles
const ALERT = {
yellow: '#f0b849',
red: '#d94f4f',
green: '#4ab866'
};
// Matches the Modern admin scheme in @wordpress/base-styles
const ADMIN = {
theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
themeDark10: 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))'
};
const UI = {
background: white,
backgroundDisabled: GRAY[100],
border: GRAY[600],
borderHover: GRAY[700],
borderFocus: ADMIN.theme,
borderDisabled: GRAY[400],
textDisabled: GRAY[600],
textDark: white,
// Matches @wordpress/base-styles
darkGrayPlaceholder: rgba(GRAY[900], 0.62),
lightGrayPlaceholder: rgba(white, 0.65)
};
const THEME = {
accent: ADMIN.theme,
accentDarker10: ADMIN.themeDark10
};
export const COLORS = Object.freeze({
/**
* The main gray color object.
*/
gray: GRAY,
white,
alert: ALERT,
theme: THEME,
ui: UI
});
export default COLORS;
//# sourceMappingURL=colors-values.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["rgba","white","GRAY","ALERT","yellow","red","green","ADMIN","theme","themeDark10","UI","background","backgroundDisabled","border","borderHover","borderFocus","borderDisabled","textDisabled","textDark","darkGrayPlaceholder","lightGrayPlaceholder","THEME","accent","accentDarker10","COLORS","Object","freeze","gray","alert","ui"],"sources":["@wordpress/components/src/utils/colors-values.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { rgba } from './colors';\n\nconst white = '#fff';\n\n// Matches the grays in @wordpress/base-styles\nconst GRAY = {\n\t900: '#1e1e1e',\n\t800: '#2f2f2f',\n\t/** Meets 4.6:1 text contrast against white. */\n\t700: '#757575',\n\t/** Meets 3:1 UI or large text contrast against white. */\n\t600: '#949494',\n\t400: '#ccc',\n\t/** Used for most borders. */\n\t300: '#ddd',\n\t/** Used sparingly for light borders. */\n\t200: '#e0e0e0',\n\t/** Used for light gray backgrounds. */\n\t100: '#f0f0f0',\n};\n\n// Matches @wordpress/base-styles\nconst ALERT = {\n\tyellow: '#f0b849',\n\tred: '#d94f4f',\n\tgreen: '#4ab866',\n};\n\n// Matches the Modern admin scheme in @wordpress/base-styles\nconst ADMIN = {\n\ttheme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',\n\tthemeDark10:\n\t\t'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',\n};\n\nconst UI = {\n\tbackground: white,\n\tbackgroundDisabled: GRAY[ 100 ],\n\tborder: GRAY[ 600 ],\n\tborderHover: GRAY[ 700 ],\n\tborderFocus: ADMIN.theme,\n\tborderDisabled: GRAY[ 400 ],\n\ttextDisabled: GRAY[ 600 ],\n\ttextDark: white,\n\n\t// Matches @wordpress/base-styles\n\tdarkGrayPlaceholder: rgba( GRAY[ 900 ], 0.62 ),\n\tlightGrayPlaceholder: rgba( white, 0.65 ),\n};\n\nconst THEME = {\n\taccent: ADMIN.theme,\n\taccentDarker10: ADMIN.themeDark10,\n};\n\nexport const COLORS = Object.freeze( {\n\t/**\n\t * The main gray color object.\n\t */\n\tgray: GRAY,\n\twhite,\n\talert: ALERT,\n\ttheme: THEME,\n\tui: UI,\n} );\n\nexport default COLORS;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAI,QAAQ,UAAU;AAE/B,MAAMC,KAAK,GAAG,MAAM;;AAEpB;AACA,MAAMC,IAAI,GAAG;EACZ,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,SAAS;EACd;EACA,GAAG,EAAE,SAAS;EACd;EACA,GAAG,EAAE,SAAS;EACd,GAAG,EAAE,MAAM;EACX;EACA,GAAG,EAAE,MAAM;EACX;EACA,GAAG,EAAE,SAAS;EACd;EACA,GAAG,EAAE;AACN,CAAC;;AAED;AACA,MAAMC,KAAK,GAAG;EACbC,MAAM,EAAE,SAAS;EACjBC,GAAG,EAAE,SAAS;EACdC,KAAK,EAAE;AACR,CAAC;;AAED;AACA,MAAMC,KAAK,GAAG;EACbC,KAAK,EAAE,yEAAyE;EAChFC,WAAW,EACV;AACF,CAAC;AAED,MAAMC,EAAE,GAAG;EACVC,UAAU,EAAEV,KAAK;EACjBW,kBAAkB,EAAEV,IAAI,CAAE,GAAG,CAAE;EAC/BW,MAAM,EAAEX,IAAI,CAAE,GAAG,CAAE;EACnBY,WAAW,EAAEZ,IAAI,CAAE,GAAG,CAAE;EACxBa,WAAW,EAAER,KAAK,CAACC,KAAK;EACxBQ,cAAc,EAAEd,IAAI,CAAE,GAAG,CAAE;EAC3Be,YAAY,EAAEf,IAAI,CAAE,GAAG,CAAE;EACzBgB,QAAQ,EAAEjB,KAAK;EAEf;EACAkB,mBAAmB,EAAEnB,IAAI,CAAEE,IAAI,CAAE,GAAG,CAAE,EAAE,IAAK,CAAC;EAC9CkB,oBAAoB,EAAEpB,IAAI,CAAEC,KAAK,EAAE,IAAK;AACzC,CAAC;AAED,MAAMoB,KAAK,GAAG;EACbC,MAAM,EAAEf,KAAK,CAACC,KAAK;EACnBe,cAAc,EAAEhB,KAAK,CAACE;AACvB,CAAC;AAED,OAAO,MAAMe,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAE;EACpC;AACD;AACA;EACCC,IAAI,EAAEzB,IAAI;EACVD,KAAK;EACL2B,KAAK,EAAEzB,KAAK;EACZK,KAAK,EAAEa,KAAK;EACZQ,EAAE,EAAEnB;AACL,CAAE,CAAC;AAEH,eAAec,MAAM"}

View File

@@ -0,0 +1,103 @@
/**
* External dependencies
*/
import memoize from 'memize';
import { colord, extend } from 'colord';
import namesPlugin from 'colord/plugins/names';
/** @type {HTMLDivElement} */
let colorComputationNode;
extend([namesPlugin]);
/**
* Generating a CSS compliant rgba() color value.
*
* @param {string} hexValue The hex value to convert to rgba().
* @param {number} alpha The alpha value for opacity.
* @return {string} The converted rgba() color value.
*
* @example
* rgba( '#000000', 0.5 )
* // rgba(0, 0, 0, 0.5)
*/
export function rgba(hexValue = '', alpha = 1) {
return colord(hexValue).alpha(alpha).toRgbString();
}
/**
* @return {HTMLDivElement | undefined} The HTML element for color computation.
*/
function getColorComputationNode() {
if (typeof document === 'undefined') return;
if (!colorComputationNode) {
// Create a temporary element for style computation.
const el = document.createElement('div');
el.setAttribute('data-g2-color-computation-node', '');
// Inject for window computed style.
document.body.appendChild(el);
colorComputationNode = el;
}
return colorComputationNode;
}
/**
* @param {string | unknown} value
*
* @return {boolean} Whether the value is a valid color.
*/
function isColor(value) {
if (typeof value !== 'string') return false;
const test = colord(value);
return test.isValid();
}
/**
* Retrieves the computed background color. This is useful for getting the
* value of a CSS variable color.
*
* @param {string | unknown} backgroundColor The background color to compute.
*
* @return {string} The computed background color.
*/
function _getComputedBackgroundColor(backgroundColor) {
if (typeof backgroundColor !== 'string') return '';
if (isColor(backgroundColor)) return backgroundColor;
if (!backgroundColor.includes('var(')) return '';
if (typeof document === 'undefined') return '';
// Attempts to gracefully handle CSS variables color values.
const el = getColorComputationNode();
if (!el) return '';
el.style.background = backgroundColor;
// Grab the style.
const computedColor = window?.getComputedStyle(el).background;
// Reset.
el.style.background = '';
return computedColor || '';
}
const getComputedBackgroundColor = memoize(_getComputedBackgroundColor);
/**
* Get the text shade optimized for readability, based on a background color.
*
* @param {string | unknown} backgroundColor The background color.
*
* @return {string} The optimized text color (black or white).
*/
export function getOptimalTextColor(backgroundColor) {
const background = getComputedBackgroundColor(backgroundColor);
return colord(background).isLight() ? '#000000' : '#ffffff';
}
/**
* Get the text shade optimized for readability, based on a background color.
*
* @param {string | unknown} backgroundColor The background color.
*
* @return {string} The optimized text shade (dark or light).
*/
export function getOptimalTextShade(backgroundColor) {
const result = getOptimalTextColor(backgroundColor);
return result === '#000000' ? 'dark' : 'light';
}
//# sourceMappingURL=colors.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,82 @@
/**
* Internal dependencies
*/
import { space } from './space';
import { COLORS } from './colors-values';
const CONTROL_HEIGHT = '36px';
const CONTROL_PADDING_X = '12px';
const CONTROL_PROPS = {
controlSurfaceColor: COLORS.white,
controlTextActiveColor: COLORS.theme.accent,
controlPaddingX: CONTROL_PADDING_X,
controlPaddingXLarge: `calc(${CONTROL_PADDING_X} * 1.3334)`,
controlPaddingXSmall: `calc(${CONTROL_PADDING_X} / 1.3334)`,
controlBackgroundColor: COLORS.white,
controlBorderRadius: '2px',
controlBoxShadow: 'transparent',
controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`,
controlDestructiveBorderColor: COLORS.alert.red,
controlHeight: CONTROL_HEIGHT,
controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,
controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,
controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,
controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`
};
const TOGGLE_GROUP_CONTROL_PROPS = {
toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor,
toggleGroupControlBorderColor: COLORS.ui.border,
toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor,
toggleGroupControlBackdropBorderColor: COLORS.ui.border,
toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor
};
// Using Object.assign to avoid creating circular references when emitting
// TypeScript type declarations.
export default Object.assign({}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
colorDivider: 'rgba(0, 0, 0, 0.1)',
colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
elevationIntensity: 1,
radiusBlockUi: '2px',
borderWidth: '1px',
borderWidthFocus: '1.5px',
borderWidthTab: '4px',
spinnerSize: 16,
fontSize: '13px',
fontSizeH1: 'calc(2.44 * 13px)',
fontSizeH2: 'calc(1.95 * 13px)',
fontSizeH3: 'calc(1.56 * 13px)',
fontSizeH4: 'calc(1.25 * 13px)',
fontSizeH5: '13px',
fontSizeH6: 'calc(0.8 * 13px)',
fontSizeInputMobile: '16px',
fontSizeMobile: '15px',
fontSizeSmall: 'calc(0.92 * 13px)',
fontSizeXSmall: 'calc(0.75 * 13px)',
fontLineHeightBase: '1.2',
fontWeight: 'normal',
fontWeightHeading: '600',
gridBase: '4px',
cardBorderRadius: '2px',
cardPaddingXSmall: `${space(2)}`,
cardPaddingSmall: `${space(4)}`,
cardPaddingMedium: `${space(4)} ${space(6)}`,
cardPaddingLarge: `${space(6)} ${space(8)}`,
popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
surfaceBackgroundColor: COLORS.white,
surfaceBackgroundSubtleColor: '#F3F3F3',
surfaceBackgroundTintColor: '#F5F5F5',
surfaceBorderColor: 'rgba(0, 0, 0, 0.1)',
surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)',
surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)',
surfaceBackgroundTertiaryColor: COLORS.white,
surfaceColor: COLORS.white,
transitionDuration: '200ms',
transitionDurationFast: '160ms',
transitionDurationFaster: '120ms',
transitionDurationFastest: '100ms',
transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)',
transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)'
});
//# sourceMappingURL=config-values.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,38 @@
/**
* External dependencies
*/
/**
* Internal dependencies
*/
import CONFIG from './config-values';
export const BASE_FONT_SIZE = 13;
export const PRESET_FONT_SIZES = {
body: BASE_FONT_SIZE,
caption: 10,
footnote: 11,
largeTitle: 28,
subheadline: 12,
title: 20
};
export const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]);
export function getFontSize(size = BASE_FONT_SIZE) {
if (size in PRESET_FONT_SIZES) {
return getFontSize(PRESET_FONT_SIZES[size]);
}
if (typeof size !== 'number') {
const parsed = parseFloat(size);
if (Number.isNaN(parsed)) return size;
size = parsed;
}
const ratio = `(${size} / ${BASE_FONT_SIZE})`;
return `calc(${ratio} * ${CONFIG.fontSize})`;
}
export function getHeadingFontSize(size = 3) {
if (!HEADING_FONT_SIZES.includes(size)) {
return getFontSize(size);
}
const headingSize = `fontSizeH${size}`;
return CONFIG[headingSize];
}
//# sourceMappingURL=font-size.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"sources":["@wordpress/components/src/utils/font-size.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from './config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) return size;\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,iBAAiB;AAgBpC,OAAO,MAAMC,cAAc,GAAG,EAAE;AAEhC,OAAO,MAAMC,iBAAiB,GAAG;EAChCC,IAAI,EAAEF,cAAc;EACpBG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACC,OAAO,CAAIC,CAAC,IAAM,CACxEA,CAAC,EACDA,CAAC,CAACC,QAAQ,CAAC,CAAC,CACX,CAAC;AAEH,OAAO,SAASC,WAAWA,CAC1BC,IAEiC,GAAGb,cAAc,EACzC;EACT,IAAKa,IAAI,IAAIZ,iBAAiB,EAAG;IAChC,OAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAI,CACxB,CAAC;EACF;EAEA,IAAK,OAAOA,IAAI,KAAK,QAAQ,EAAG;IAC/B,MAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAK,CAAC;IACjC,IAAKG,MAAM,CAACC,KAAK,CAAEH,MAAO,CAAC,EAAG,OAAOD,IAAI;IACzCA,IAAI,GAAGC,MAAM;EACd;EAEA,MAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAAE;EACjD,OAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAAE;AACjD;AAEA,OAAO,SAASC,kBAAkBA,CAAEP,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACa,QAAQ,CAAER,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMS,WAAW,GAAI,YAAYT,IAAM,EAAgC;EACvE,OAAOd,MAAM,CAAEuB,WAAW,CAAE;AAC7B"}

View File

@@ -0,0 +1,7 @@
export default {
'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
'default.fontSize': '13px',
'helpText.fontSize': '12px',
mobileTextMinFontSize: '16px'
};
//# sourceMappingURL=font-values.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["mobileTextMinFontSize"],"sources":["@wordpress/components/src/utils/font-values.js"],"sourcesContent":["export default {\n\t'default.fontFamily':\n\t\t\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n\t'default.fontSize': '13px',\n\n\t'helpText.fontSize': '12px',\n\n\tmobileTextMinFontSize: '16px',\n};\n"],"mappings":"AAAA,eAAe;EACd,oBAAoB,EACnB,qHAAqH;EACtH,kBAAkB,EAAE,MAAM;EAE1B,mBAAmB,EAAE,MAAM;EAE3BA,qBAAqB,EAAE;AACxB,CAAC"}

View File

@@ -0,0 +1,15 @@
/**
* Internal dependencies
*/
import FONT from './font-values';
/**
*
* @param {keyof FONT} value Path of value from `FONT`
* @return {string} Font rule value
*/
export function font(value) {
var _FONT$value;
return (_FONT$value = FONT[value]) !== null && _FONT$value !== void 0 ? _FONT$value : '';
}
//# sourceMappingURL=font.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["FONT","font","value","_FONT$value"],"sources":["@wordpress/components/src/utils/font.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport FONT from './font-values';\n\n/**\n *\n * @param {keyof FONT} value Path of value from `FONT`\n * @return {string} Font rule value\n */\nexport function font( value ) {\n\treturn FONT[ value ] ?? '';\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,eAAe;;AAEhC;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAIA,CAAEC,KAAK,EAAG;EAAA,IAAAC,WAAA;EAC7B,QAAAA,WAAA,GAAOH,IAAI,CAAEE,KAAK,CAAE,cAAAC,WAAA,cAAAA,WAAA,GAAI,EAAE;AAC3B"}

View File

@@ -0,0 +1,21 @@
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
import { Children, isValidElement } from '@wordpress/element';
/**
* Gets a collection of available children elements from a React component's children prop.
*
* @param children
*
* @return An array of available children.
*/
export function getValidChildren(children) {
if (typeof children === 'string') return [children];
return Children.toArray(children).filter(child => isValidElement(child));
}
//# sourceMappingURL=get-valid-children.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Children","isValidElement","getValidChildren","children","toArray","filter","child"],"sources":["@wordpress/components/src/utils/get-valid-children.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) return [ children ];\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,QAAmB,EACiC;EACpD,IAAK,OAAOA,QAAQ,KAAK,QAAQ,EAAG,OAAO,CAAEA,QAAQ,CAAE;EAEvD,OAAOH,QAAQ,CAACI,OAAO,CAAED,QAAS,CAAC,CAACE,MAAM,CAAIC,KAAK,IAClDL,cAAc,CAAEK,KAAM,CACvB,CAAC;AACF"}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=emotion.d.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/utils/hooks/emotion.d.ts"],"sourcesContent":["import type { EmotionCache } from '@emotion/utils';\n\ndeclare module '@emotion/react' {\n\texport function __unsafe_useEmotionCache(): EmotionCache | null;\n}\n"],"mappings":""}

View File

@@ -0,0 +1,6 @@
export { default as useControlledState } from './use-controlled-state';
export { default as useUpdateEffect } from './use-update-effect';
export { useControlledValue } from './use-controlled-value';
export { useCx } from './use-cx';
export { useLatestRef } from './use-latest-ref';
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["default","useControlledState","useUpdateEffect","useControlledValue","useCx","useLatestRef"],"sources":["@wordpress/components/src/utils/hooks/index.js"],"sourcesContent":["export { default as useControlledState } from './use-controlled-state';\nexport { default as useUpdateEffect } from './use-update-effect';\nexport { useControlledValue } from './use-controlled-value';\nexport { useCx } from './use-cx';\nexport { useLatestRef } from './use-latest-ref';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAAkB,QAAQ,wBAAwB;AACtE,SAASD,OAAO,IAAIE,eAAe,QAAQ,qBAAqB;AAChE,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,QAAQ,kBAAkB"}

View File

@@ -0,0 +1,84 @@
/**
* WordPress dependencies
*/
import { useEffect, useState, useCallback } from '@wordpress/element';
/**
* Internal dependencies
*/
import { isValueDefined, getDefinedValue } from '../values';
/**
* @template T
* @typedef Options
* @property {T} [initial] Initial value
* @property {T | ""} fallback Fallback value
*/
/** @type {Readonly<{ initial: undefined, fallback: '' }>} */
const defaultOptions = {
initial: undefined,
/**
* Defaults to empty string, as that is preferred for usage with
* <input />, <textarea />, and <select /> form elements.
*/
fallback: ''
};
/**
* Custom hooks for "controlled" components to track and consolidate internal
* state and incoming values. This is useful for components that render
* `input`, `textarea`, or `select` HTML elements.
*
* https://reactjs.org/docs/forms.html#controlled-components
*
* At first, a component using useControlledState receives an initial prop
* value, which is used as initial internal state.
*
* This internal state can be maintained and updated without
* relying on new incoming prop values.
*
* Unlike the basic useState hook, useControlledState's state can
* be updated if a new incoming prop value is changed.
*
* @template T
*
* @param {T | undefined} currentState The current value.
* @param {Options<T>} [options=defaultOptions] Additional options for the hook.
*
* @return {[T | "", (nextState: T) => void]} The controlled value and the value setter.
*/
function useControlledState(currentState, options = defaultOptions) {
const {
initial,
fallback
} = {
...defaultOptions,
...options
};
const [internalState, setInternalState] = useState(currentState);
const hasCurrentState = isValueDefined(currentState);
/*
* Resets internal state if value every changes from uncontrolled <-> controlled.
*/
useEffect(() => {
if (hasCurrentState && internalState) {
setInternalState(undefined);
}
}, [hasCurrentState, internalState]);
const state = getDefinedValue([currentState, internalState, initial], fallback);
/* eslint-disable jsdoc/no-undefined-types */
/** @type {(nextState: T) => void} */
const setState = useCallback(nextState => {
if (!hasCurrentState) {
setInternalState(nextState);
}
}, [hasCurrentState]);
/* eslint-enable jsdoc/no-undefined-types */
return [state, setState];
}
export default useControlledState;
//# sourceMappingURL=use-controlled-state.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useEffect","useState","useCallback","isValueDefined","getDefinedValue","defaultOptions","initial","undefined","fallback","useControlledState","currentState","options","internalState","setInternalState","hasCurrentState","state","setState","nextState"],"sources":["@wordpress/components/src/utils/hooks/use-controlled-state.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { isValueDefined, getDefinedValue } from '../values';\n\n/**\n * @template T\n * @typedef Options\n * @property {T} [initial] Initial value\n * @property {T | \"\"} fallback Fallback value\n */\n\n/** @type {Readonly<{ initial: undefined, fallback: '' }>} */\nconst defaultOptions = {\n\tinitial: undefined,\n\t/**\n\t * Defaults to empty string, as that is preferred for usage with\n\t * <input />, <textarea />, and <select /> form elements.\n\t */\n\tfallback: '',\n};\n\n/**\n * Custom hooks for \"controlled\" components to track and consolidate internal\n * state and incoming values. This is useful for components that render\n * `input`, `textarea`, or `select` HTML elements.\n *\n * https://reactjs.org/docs/forms.html#controlled-components\n *\n * At first, a component using useControlledState receives an initial prop\n * value, which is used as initial internal state.\n *\n * This internal state can be maintained and updated without\n * relying on new incoming prop values.\n *\n * Unlike the basic useState hook, useControlledState's state can\n * be updated if a new incoming prop value is changed.\n *\n * @template T\n *\n * @param {T | undefined} currentState The current value.\n * @param {Options<T>} [options=defaultOptions] Additional options for the hook.\n *\n * @return {[T | \"\", (nextState: T) => void]} The controlled value and the value setter.\n */\nfunction useControlledState( currentState, options = defaultOptions ) {\n\tconst { initial, fallback } = { ...defaultOptions, ...options };\n\n\tconst [ internalState, setInternalState ] = useState( currentState );\n\tconst hasCurrentState = isValueDefined( currentState );\n\n\t/*\n\t * Resets internal state if value every changes from uncontrolled <-> controlled.\n\t */\n\tuseEffect( () => {\n\t\tif ( hasCurrentState && internalState ) {\n\t\t\tsetInternalState( undefined );\n\t\t}\n\t}, [ hasCurrentState, internalState ] );\n\n\tconst state = getDefinedValue(\n\t\t[ currentState, internalState, initial ],\n\t\tfallback\n\t);\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {(nextState: T) => void} */\n\tconst setState = useCallback(\n\t\t( nextState ) => {\n\t\t\tif ( ! hasCurrentState ) {\n\t\t\t\tsetInternalState( nextState );\n\t\t\t}\n\t\t},\n\t\t[ hasCurrentState ]\n\t);\n\t/* eslint-enable jsdoc/no-undefined-types */\n\n\treturn [ state, setState ];\n}\n\nexport default useControlledState;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,oBAAoB;;AAErE;AACA;AACA;AACA,SAASC,cAAc,EAAEC,eAAe,QAAQ,WAAW;;AAE3D;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,MAAMC,cAAc,GAAG;EACtBC,OAAO,EAAEC,SAAS;EAClB;AACD;AACA;AACA;EACCC,QAAQ,EAAE;AACX,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,kBAAkBA,CAAEC,YAAY,EAAEC,OAAO,GAAGN,cAAc,EAAG;EACrE,MAAM;IAAEC,OAAO;IAAEE;EAAS,CAAC,GAAG;IAAE,GAAGH,cAAc;IAAE,GAAGM;EAAQ,CAAC;EAE/D,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAGZ,QAAQ,CAAES,YAAa,CAAC;EACpE,MAAMI,eAAe,GAAGX,cAAc,CAAEO,YAAa,CAAC;;EAEtD;AACD;AACA;EACCV,SAAS,CAAE,MAAM;IAChB,IAAKc,eAAe,IAAIF,aAAa,EAAG;MACvCC,gBAAgB,CAAEN,SAAU,CAAC;IAC9B;EACD,CAAC,EAAE,CAAEO,eAAe,EAAEF,aAAa,CAAG,CAAC;EAEvC,MAAMG,KAAK,GAAGX,eAAe,CAC5B,CAAEM,YAAY,EAAEE,aAAa,EAAEN,OAAO,CAAE,EACxCE,QACD,CAAC;;EAED;EACA;EACA,MAAMQ,QAAQ,GAAGd,WAAW,CACzBe,SAAS,IAAM;IAChB,IAAK,CAAEH,eAAe,EAAG;MACxBD,gBAAgB,CAAEI,SAAU,CAAC;IAC9B;EACD,CAAC,EACD,CAAEH,eAAe,CAClB,CAAC;EACD;;EAEA,OAAO,CAAEC,KAAK,EAAEC,QAAQ,CAAE;AAC3B;AAEA,eAAeP,kBAAkB"}

View File

@@ -0,0 +1,36 @@
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
/**
* Simplified and improved implementation of useControlledState.
*
* @param props
* @param props.defaultValue
* @param props.value
* @param props.onChange
* @return The controlled value and the value setter.
*/
export function useControlledValue({
defaultValue,
onChange,
value: valueProp
}) {
const hasValue = typeof valueProp !== 'undefined';
const initialValue = hasValue ? valueProp : defaultValue;
const [state, setState] = useState(initialValue);
const value = hasValue ? valueProp : state;
let setValue;
if (hasValue && typeof onChange === 'function') {
setValue = onChange;
} else if (!hasValue && typeof onChange === 'function') {
setValue = nextValue => {
onChange(nextValue);
setState(nextValue);
};
} else {
setValue = setState;
}
return [value, setValue];
}
//# sourceMappingURL=use-controlled-value.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useState","useControlledValue","defaultValue","onChange","value","valueProp","hasValue","initialValue","state","setState","setValue","nextValue"],"sources":["@wordpress/components/src/utils/hooks/use-controlled-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T;\n\tonChange?: ( value: T ) => void;\n};\n\n/**\n * Simplified and improved implementation of useControlledState.\n *\n * @param props\n * @param props.defaultValue\n * @param props.value\n * @param props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = hasValue ? valueProp : state;\n\n\tlet setValue: ( nextValue: T ) => void;\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = ( nextValue ) => {\n\t\t\tonChange( nextValue );\n\t\t\tsetState( nextValue );\n\t\t};\n\t} else {\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue as typeof setState ] as const;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAQ7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAO;EACxCC,YAAY;EACZC,QAAQ;EACRC,KAAK,EAAEC;AACI,CAAC,EAAG;EACf,MAAMC,QAAQ,GAAG,OAAOD,SAAS,KAAK,WAAW;EACjD,MAAME,YAAY,GAAGD,QAAQ,GAAGD,SAAS,GAAGH,YAAY;EACxD,MAAM,CAAEM,KAAK,EAAEC,QAAQ,CAAE,GAAGT,QAAQ,CAAEO,YAAa,CAAC;EACpD,MAAMH,KAAK,GAAGE,QAAQ,GAAGD,SAAS,GAAGG,KAAK;EAE1C,IAAIE,QAAkC;EACtC,IAAKJ,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IACjDO,QAAQ,GAAGP,QAAQ;EACpB,CAAC,MAAM,IAAK,CAAEG,QAAQ,IAAI,OAAOH,QAAQ,KAAK,UAAU,EAAG;IAC1DO,QAAQ,GAAKC,SAAS,IAAM;MAC3BR,QAAQ,CAAEQ,SAAU,CAAC;MACrBF,QAAQ,CAAEE,SAAU,CAAC;IACtB,CAAC;EACF,CAAC,MAAM;IACND,QAAQ,GAAGD,QAAQ;EACpB;EAEA,OAAO,CAAEL,KAAK,EAAEM,QAAQ,CAAqB;AAC9C"}

View File

@@ -0,0 +1,55 @@
/**
* External dependencies
*/
import { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';
import { insertStyles } from '@emotion/utils';
// eslint-disable-next-line no-restricted-imports
// eslint-disable-next-line no-restricted-imports
import { cx as innerCx } from '@emotion/css';
/**
* WordPress dependencies
*/
import { useCallback } from '@wordpress/element';
const isSerializedStyles = o => typeof o !== 'undefined' && o !== null && ['name', 'styles'].every(p => typeof o[p] !== 'undefined');
/**
* Retrieve a `cx` function that knows how to handle `SerializedStyles`
* returned by the `@emotion/react` `css` function in addition to what
* `cx` normally knows how to handle. It also hooks into the Emotion
* Cache, allowing `css` calls to work inside iframes.
*
* ```jsx
* import { css } from '@emotion/react';
*
* const styles = css`
* color: red
* `;
*
* function RedText( { className, ...props } ) {
* const cx = useCx();
*
* const classes = cx(styles, className);
*
* return <span className={classes} {...props} />;
* }
* ```
*/
export const useCx = () => {
const cache = useEmotionCache();
const cx = useCallback((...classNames) => {
if (cache === null) {
throw new Error('The `useCx` hook should be only used within a valid Emotion Cache Context');
}
return innerCx(...classNames.map(arg => {
if (isSerializedStyles(arg)) {
insertStyles(cache, arg, false);
return `${cache.key}-${arg.name}`;
}
return arg;
}));
}, [cache]);
return cx;
};
//# sourceMappingURL=use-cx.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["__unsafe_useEmotionCache","useEmotionCache","insertStyles","cx","innerCx","useCallback","isSerializedStyles","o","every","p","useCx","cache","classNames","Error","map","arg","key","name"],"sources":["@wordpress/components/src/utils/hooks/use-cx.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { __unsafe_useEmotionCache as useEmotionCache } from '@emotion/react';\nimport type { SerializedStyles } from '@emotion/serialize';\nimport { insertStyles } from '@emotion/utils';\n// eslint-disable-next-line no-restricted-imports\nimport type { ClassNamesArg } from '@emotion/css';\n// eslint-disable-next-line no-restricted-imports\nimport { cx as innerCx } from '@emotion/css';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\nconst isSerializedStyles = ( o: any ): o is SerializedStyles =>\n\ttypeof o !== 'undefined' &&\n\to !== null &&\n\t[ 'name', 'styles' ].every( ( p ) => typeof o[ p ] !== 'undefined' );\n\n/**\n * Retrieve a `cx` function that knows how to handle `SerializedStyles`\n * returned by the `@emotion/react` `css` function in addition to what\n * `cx` normally knows how to handle. It also hooks into the Emotion\n * Cache, allowing `css` calls to work inside iframes.\n *\n * ```jsx\n * import { css } from '@emotion/react';\n *\n * const styles = css`\n * \tcolor: red\n * `;\n *\n * function RedText( { className, ...props } ) {\n * \tconst cx = useCx();\n *\n * \tconst classes = cx(styles, className);\n *\n * \treturn <span className={classes} {...props} />;\n * }\n * ```\n */\nexport const useCx = () => {\n\tconst cache = useEmotionCache();\n\n\tconst cx = useCallback(\n\t\t( ...classNames: ( ClassNamesArg | SerializedStyles )[] ) => {\n\t\t\tif ( cache === null ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'The `useCx` hook should be only used within a valid Emotion Cache Context'\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn innerCx(\n\t\t\t\t...classNames.map( ( arg ) => {\n\t\t\t\t\tif ( isSerializedStyles( arg ) ) {\n\t\t\t\t\t\tinsertStyles( cache, arg, false );\n\t\t\t\t\t\treturn `${ cache.key }-${ arg.name }`;\n\t\t\t\t\t}\n\t\t\t\t\treturn arg;\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ cache ]\n\t);\n\n\treturn cx;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,wBAAwB,IAAIC,eAAe,QAAQ,gBAAgB;AAE5E,SAASC,YAAY,QAAQ,gBAAgB;AAC7C;;AAEA;AACA,SAASC,EAAE,IAAIC,OAAO,QAAQ,cAAc;;AAE5C;AACA;AACA;AACA,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,MAAMC,kBAAkB,GAAKC,CAAM,IAClC,OAAOA,CAAC,KAAK,WAAW,IACxBA,CAAC,KAAK,IAAI,IACV,CAAE,MAAM,EAAE,QAAQ,CAAE,CAACC,KAAK,CAAIC,CAAC,IAAM,OAAOF,CAAC,CAAEE,CAAC,CAAE,KAAK,WAAY,CAAC;;AAErE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAGA,CAAA,KAAM;EAC1B,MAAMC,KAAK,GAAGV,eAAe,CAAC,CAAC;EAE/B,MAAME,EAAE,GAAGE,WAAW,CACrB,CAAE,GAAGO,UAAkD,KAAM;IAC5D,IAAKD,KAAK,KAAK,IAAI,EAAG;MACrB,MAAM,IAAIE,KAAK,CACd,2EACD,CAAC;IACF;IAEA,OAAOT,OAAO,CACb,GAAGQ,UAAU,CAACE,GAAG,CAAIC,GAAG,IAAM;MAC7B,IAAKT,kBAAkB,CAAES,GAAI,CAAC,EAAG;QAChCb,YAAY,CAAES,KAAK,EAAEI,GAAG,EAAE,KAAM,CAAC;QACjC,OAAQ,GAAGJ,KAAK,CAACK,GAAK,IAAID,GAAG,CAACE,IAAM,EAAC;MACtC;MACA,OAAOF,GAAG;IACX,CAAE,CACH,CAAC;EACF,CAAC,EACD,CAAEJ,KAAK,CACR,CAAC;EAED,OAAOR,EAAE;AACV,CAAC"}

View File

@@ -0,0 +1,27 @@
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
import { useRef } from '@wordpress/element';
import { useIsomorphicLayoutEffect } from '@wordpress/compose';
/**
* Creates a reference for a prop. This is useful for preserving dependency
* memoization for hooks like useCallback.
*
* @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
*
* @param value The value to reference
* @return The prop reference.
*/
export function useLatestRef(value) {
const ref = useRef(value);
useIsomorphicLayoutEffect(() => {
ref.current = value;
});
return ref;
}
//# sourceMappingURL=use-latest-ref.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useRef","useIsomorphicLayoutEffect","useLatestRef","value","ref","current"],"sources":["@wordpress/components/src/utils/hooks/use-latest-ref.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Creates a reference for a prop. This is useful for preserving dependency\n * memoization for hooks like useCallback.\n *\n * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx\n *\n * @param value The value to reference\n * @return The prop reference.\n */\nexport function useLatestRef< T >( value: T ): RefObject< T > {\n\tconst ref = useRef( value );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tref.current = value;\n\t} );\n\n\treturn ref;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,yBAAyB,QAAQ,oBAAoB;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAOC,KAAQ,EAAmB;EAC7D,MAAMC,GAAG,GAAGJ,MAAM,CAAEG,KAAM,CAAC;EAE3BF,yBAAyB,CAAE,MAAM;IAChCG,GAAG,CAACC,OAAO,GAAGF,KAAK;EACpB,CAAE,CAAC;EAEH,OAAOC,GAAG;AACX"}

View File

@@ -0,0 +1,30 @@
/**
* WordPress dependencies
*/
import { useRef, useEffect } from '@wordpress/element';
/**
* A `React.useEffect` that will not run on the first render.
* Source:
* https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts
*
* @param {import('react').EffectCallback} effect
* @param {import('react').DependencyList} deps
*/
function useUpdateEffect(effect, deps) {
const mounted = useRef(false);
useEffect(() => {
if (mounted.current) {
return effect();
}
mounted.current = true;
return undefined;
// Disable reasons:
// 1. This hook needs to pass a dep list that isn't an array literal
// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
// see https://github.com/WordPress/gutenberg/pull/41166
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
}
export default useUpdateEffect;
//# sourceMappingURL=use-update-effect.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useRef","useEffect","useUpdateEffect","effect","deps","mounted","current","undefined"],"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mounted.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmounted.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n}\n\nexport default useUpdateEffect;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,IAAI,EAAG;EACxC,MAAMC,OAAO,GAAGL,MAAM,CAAE,KAAM,CAAC;EAC/BC,SAAS,CAAE,MAAM;IAChB,IAAKI,OAAO,CAACC,OAAO,EAAG;MACtB,OAAOH,MAAM,CAAC,CAAC;IAChB;IACAE,OAAO,CAACC,OAAO,GAAG,IAAI;IACtB,OAAOC,SAAS;IAChB;IACA;IACA;IACA;IACA;EACD,CAAC,EAAEH,IAAK,CAAC;AACV;AAEA,eAAeF,eAAe"}

View File

@@ -0,0 +1,3 @@
export * from './hooks';
export * from './style-mixins';
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/utils/index.js"],"sourcesContent":["export * from './hooks';\nexport * from './style-mixins';\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,gBAAgB"}

View File

@@ -0,0 +1,14 @@
/**
* External dependencies
*/
import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { reduceMotion } from '../reduce-motion';
import { COLORS } from '../colors-values';
import { CONFIG } from '../';
export const inputStyleNeutral = /*#__PURE__*/css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", CONFIG.radiusBlockUi, ";border:", CONFIG.borderWidth, " solid ", COLORS.ui.border, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleNeutral;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZb0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9iYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi9yZWR1Y2UtbW90aW9uJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgQ09ORklHIH0gZnJvbSAnLi4vJztcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVOZXV0cmFsID0gY3NzYFxuXHRib3gtc2hhZG93OiAwIDAgMCB0cmFuc3BhcmVudDtcblx0dHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjFzIGxpbmVhcjtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c0Jsb2NrVWkgfTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH0gfTtcblx0JHsgcmVkdWNlTW90aW9uKCAndHJhbnNpdGlvbicgKSB9XG5gO1xuXG5leHBvcnQgY29uc3QgaW5wdXRTdHlsZUZvY3VzID0gY3NzYFxuXHRib3JkZXItY29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0Ym94LXNoYWRvdzogMCAwIDBcblx0XHRjYWxjKCAkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyB9IC0gJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gKVxuXHRcdCR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblxuXHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5gO1xuIl19 */");
export const inputStyleFocus = /*#__PURE__*/css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", CONFIG.borderWidthFocus, " - ", CONFIG.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleFocus;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vcmVkdWNlLW1vdGlvbic7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi9jb2xvcnMtdmFsdWVzJztcbmltcG9ydCB7IENPTkZJRyB9IGZyb20gJy4uLyc7XG5cbmV4cG9ydCBjb25zdCBpbnB1dFN0eWxlTmV1dHJhbCA9IGNzc2Bcblx0Ym94LXNoYWRvdzogMCAwIDAgdHJhbnNwYXJlbnQ7XG5cdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXI7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNCbG9ja1VpIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9IH07XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVGb2N1cyA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdGJveC1zaGFkb3c6IDAgMCAwXG5cdFx0Y2FsYyggJHsgQ09ORklHLmJvcmRlcldpZHRoRm9jdXMgfSAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IClcblx0XHQkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cblx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0b3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuYDtcbiJdfQ== */");
//# sourceMappingURL=base.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["css","reduceMotion","COLORS","CONFIG","inputStyleNeutral","radiusBlockUi","borderWidth","ui","border","process","env","NODE_ENV","inputStyleFocus","theme","accent","borderWidthFocus"],"sources":["@wordpress/components/src/utils/input/base.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { reduceMotion } from '../reduce-motion';\nimport { COLORS } from '../colors-values';\nimport { CONFIG } from '../';\n\nexport const inputStyleNeutral = css`\n\tbox-shadow: 0 0 0 transparent;\n\ttransition: box-shadow 0.1s linear;\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border } };\n\t${ reduceMotion( 'transition' ) }\n`;\n\nexport const inputStyleFocus = css`\n\tborder-color: ${ COLORS.theme.accent };\n\tbox-shadow: 0 0 0\n\t\tcalc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )\n\t\t${ COLORS.theme.accent };\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n`;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;AACA,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,MAAM,QAAQ,KAAK;AAE5B,OAAO,MAAMC,iBAAiB,gBAAGJ,GAAG,kFAGjBG,MAAM,CAACE,aAAa,cAC3BF,MAAM,CAACG,WAAW,aAAYJ,MAAM,CAACK,EAAE,CAACC,MAAM,SAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,uDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,+5CAEzD;AAED,OAAO,MAAMC,eAAe,gBAAGZ,GAAG,kBAChBE,MAAM,CAACW,KAAK,CAACC,MAAM,8BAE1BX,MAAM,CAACY,gBAAgB,SAAQZ,MAAM,CAACG,WAAW,SACvDJ,MAAM,CAACW,KAAK,CAACC,MAAM,uCAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,m6CAIvB"}

View File

@@ -0,0 +1,2 @@
export * from './input-control';
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/utils/input/index.js"],"sourcesContent":["export * from './input-control';\n"],"mappings":"AAAA,cAAc,iBAAiB"}

View File

@@ -0,0 +1,14 @@
/**
* External dependencies
*/
import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { inputStyleNeutral, inputStyleFocus } from './base';
import { font } from '../font';
import { COLORS } from '../colors-values';
import { breakpoint } from '../breakpoint';
export const inputControl = /*#__PURE__*/css("display:block;font-family:", font('default.fontFamily'), ";padding:6px 8px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";line-height:normal;", breakpoint('small'), "{font-size:", font('default.fontSize'), ";line-height:normal;}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:inputControl;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvaW5wdXQtY29udHJvbC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhK0IiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9pbnB1dC1jb250cm9sLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBpbnB1dFN0eWxlTmV1dHJhbCwgaW5wdXRTdHlsZUZvY3VzIH0gZnJvbSAnLi9iYXNlJztcbmltcG9ydCB7IGZvbnQgfSBmcm9tICcuLi9mb250JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgYnJlYWtwb2ludCB9IGZyb20gJy4uL2JyZWFrcG9pbnQnO1xuXG5leHBvcnQgY29uc3QgaW5wdXRDb250cm9sID0gY3NzYFxuXHRkaXNwbGF5OiBibG9jaztcblx0Zm9udC1mYW1pbHk6ICR7IGZvbnQoICdkZWZhdWx0LmZvbnRGYW1pbHknICkgfTtcblx0cGFkZGluZzogNnB4IDhweDtcblx0JHsgaW5wdXRTdHlsZU5ldXRyYWwgfTtcblxuXHQvKiBGb250cyBzbWFsbGVyIHRoYW4gMTZweCBjYXVzZXMgbW9iaWxlIHNhZmFyaSB0byB6b29tLiAqL1xuXHRmb250LXNpemU6ICR7IGZvbnQoICdtb2JpbGVUZXh0TWluRm9udFNpemUnICkgfTtcblx0LyogT3ZlcnJpZGUgY29yZSBsaW5lLWhlaWdodC4gVG8gYmUgcmV2aWV3ZWQuICovXG5cdGxpbmUtaGVpZ2h0OiBub3JtYWw7XG5cblx0JHsgYnJlYWtwb2ludCggJ3NtYWxsJyApIH0ge1xuXHRcdGZvbnQtc2l6ZTogJHsgZm9udCggJ2RlZmF1bHQuZm9udFNpemUnICkgfTtcblx0XHQvKiBPdmVycmlkZSBjb3JlIGxpbmUtaGVpZ2h0LiBUbyBiZSByZXZpZXdlZC4gKi9cblx0XHRsaW5lLWhlaWdodDogbm9ybWFsO1xuXHR9XG5cblx0Jjpmb2N1cyB7XG5cdFx0JHsgaW5wdXRTdHlsZUZvY3VzIH1cblx0fVxuXG5cdC8vIFVzZSBvcGFjaXR5IHRvIHdvcmsgaW4gdmFyaW91cyBlZGl0b3Igc3R5bGVzLlxuXHQmOjotd2Via2l0LWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdCY6Oi1tb3otcGxhY2Vob2xkZXIge1xuXHRcdG9wYWNpdHk6IDE7IC8vIE5lY2Vzc2FyeSBiZWNhdXNlIEZpcmVmb3ggcmVkdWNlcyB0aGlzIGZyb20gMS5cblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdCY6LW1zLWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRjb2xvcjogJHsgQ09MT1JTLnVpLmRhcmtHcmF5UGxhY2Vob2xkZXIgfTtcblx0fVxuXG5cdC5pcy1kYXJrLXRoZW1lICYge1xuXHRcdCY6Oi13ZWJraXQtaW5wdXQtcGxhY2Vob2xkZXIge1xuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblxuXHRcdCY6Oi1tb3otcGxhY2Vob2xkZXIge1xuXHRcdFx0b3BhY2l0eTogMTsgLy8gTmVjZXNzYXJ5IGJlY2F1c2UgRmlyZWZveCByZWR1Y2VzIHRoaXMgZnJvbSAxLlxuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5saWdodEdyYXlQbGFjZWhvbGRlciB9O1xuXHRcdH1cblxuXHRcdCY6LW1zLWlucHV0LXBsYWNlaG9sZGVyIHtcblx0XHRcdGNvbG9yOiAkeyBDT0xPUlMudWkubGlnaHRHcmF5UGxhY2Vob2xkZXIgfTtcblx0XHR9XG5cdH1cbmA7XG4iXX0= */");
//# sourceMappingURL=input-control.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["css","inputStyleNeutral","inputStyleFocus","font","COLORS","breakpoint","inputControl","ui","darkGrayPlaceholder","lightGrayPlaceholder","process","env","NODE_ENV"],"sources":["@wordpress/components/src/utils/input/input-control.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { inputStyleNeutral, inputStyleFocus } from './base';\nimport { font } from '../font';\nimport { COLORS } from '../colors-values';\nimport { breakpoint } from '../breakpoint';\n\nexport const inputControl = css`\n\tdisplay: block;\n\tfont-family: ${ font( 'default.fontFamily' ) };\n\tpadding: 6px 8px;\n\t${ inputStyleNeutral };\n\n\t/* Fonts smaller than 16px causes mobile safari to zoom. */\n\tfont-size: ${ font( 'mobileTextMinFontSize' ) };\n\t/* Override core line-height. To be reviewed. */\n\tline-height: normal;\n\n\t${ breakpoint( 'small' ) } {\n\t\tfont-size: ${ font( 'default.fontSize' ) };\n\t\t/* Override core line-height. To be reviewed. */\n\t\tline-height: normal;\n\t}\n\n\t&:focus {\n\t\t${ inputStyleFocus }\n\t}\n\n\t// Use opacity to work in various editor styles.\n\t&::-webkit-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&::-moz-placeholder {\n\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t&:-ms-input-placeholder {\n\t\tcolor: ${ COLORS.ui.darkGrayPlaceholder };\n\t}\n\n\t.is-dark-theme & {\n\t\t&::-webkit-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&::-moz-placeholder {\n\t\t\topacity: 1; // Necessary because Firefox reduces this from 1.\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\n\t\t&:-ms-input-placeholder {\n\t\t\tcolor: ${ COLORS.ui.lightGrayPlaceholder };\n\t\t}\n\t}\n`;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;AACA,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,QAAQ;AAC3D,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,UAAU,QAAQ,eAAe;AAE1C,OAAO,MAAMC,YAAY,gBAAGN,GAAG,+BAEdG,IAAI,CAAE,oBAAqB,CAAC,uBAEzCF,iBAAiB,iBAGNE,IAAI,CAAE,uBAAwB,CAAC,0BAI1CE,UAAU,CAAE,OAAQ,CAAC,iBACTF,IAAI,CAAE,kBAAmB,CAAC,mCAMrCD,eAAe,2CAKRE,MAAM,CAACG,EAAE,CAACC,mBAAmB,4CAK7BJ,MAAM,CAACG,EAAE,CAACC,mBAAmB,sCAI7BJ,MAAM,CAACG,EAAE,CAACC,mBAAmB,4DAK5BJ,MAAM,CAACG,EAAE,CAACE,oBAAoB,4CAK9BL,MAAM,CAACG,EAAE,CAACE,oBAAoB,sCAI9BL,MAAM,CAACG,EAAE,CAACE,oBAAoB,WAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,kDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,m8EAG1C"}

View File

@@ -0,0 +1,84 @@
/**
* Parses and retrieves a number value.
*
* @param {unknown} value The incoming value.
*
* @return {number} The parsed number value.
*/
export function getNumber(value) {
const number = Number(value);
return isNaN(number) ? 0 : number;
}
/**
* Safely adds 2 values.
*
* @param {Array<number|string>} args Values to add together.
*
* @return {number} The sum of values.
*/
export function add(...args) {
return args.reduce( /** @type {(sum:number, arg: number|string) => number} */
(sum, arg) => sum + getNumber(arg), 0);
}
/**
* Safely subtracts 2 values.
*
* @param {Array<number|string>} args Values to subtract together.
*
* @return {number} The difference of the values.
*/
export function subtract(...args) {
return args.reduce( /** @type {(diff:number, arg: number|string, index:number) => number} */
(diff, arg, index) => {
const value = getNumber(arg);
return index === 0 ? value : diff - value;
}, 0);
}
/**
* Determines the decimal position of a number value.
*
* @param {number} value The number to evaluate.
*
* @return {number} The number of decimal places.
*/
function getPrecision(value) {
const split = (value + '').split('.');
return split[1] !== undefined ? split[1].length : 0;
}
/**
* Clamps a value based on a min/max range.
*
* @param {number} value The value.
* @param {number} min The minimum range.
* @param {number} max The maximum range.
*
* @return {number} The clamped value.
*/
export function clamp(value, min, max) {
const baseValue = getNumber(value);
return Math.max(min, Math.min(baseValue, max));
}
/**
* Clamps a value based on a min/max range with rounding
*
* @param {number | string} value The value.
* @param {number} min The minimum range.
* @param {number} max The maximum range.
* @param {number} step A multiplier for the value.
*
* @return {number} The rounded and clamped value.
*/
export function roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) {
const baseValue = getNumber(value);
const stepValue = getNumber(step);
const precision = getPrecision(step);
const rounded = Math.round(baseValue / stepValue) * stepValue;
const clampedValue = clamp(rounded, min, max);
return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue;
}
//# sourceMappingURL=math.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["getNumber","value","number","Number","isNaN","add","args","reduce","sum","arg","subtract","diff","index","getPrecision","split","undefined","length","clamp","min","max","baseValue","Math","roundClamp","Infinity","step","stepValue","precision","rounded","round","clampedValue","toFixed"],"sources":["@wordpress/components/src/utils/math.js"],"sourcesContent":["/**\n * Parses and retrieves a number value.\n *\n * @param {unknown} value The incoming value.\n *\n * @return {number} The parsed number value.\n */\nexport function getNumber( value ) {\n\tconst number = Number( value );\n\n\treturn isNaN( number ) ? 0 : number;\n}\n\n/**\n * Safely adds 2 values.\n *\n * @param {Array<number|string>} args Values to add together.\n *\n * @return {number} The sum of values.\n */\nexport function add( ...args ) {\n\treturn args.reduce(\n\t\t/** @type {(sum:number, arg: number|string) => number} */\n\t\t( sum, arg ) => sum + getNumber( arg ),\n\t\t0\n\t);\n}\n\n/**\n * Safely subtracts 2 values.\n *\n * @param {Array<number|string>} args Values to subtract together.\n *\n * @return {number} The difference of the values.\n */\nexport function subtract( ...args ) {\n\treturn args.reduce(\n\t\t/** @type {(diff:number, arg: number|string, index:number) => number} */\n\t\t( diff, arg, index ) => {\n\t\t\tconst value = getNumber( arg );\n\t\t\treturn index === 0 ? value : diff - value;\n\t\t},\n\t\t0\n\t);\n}\n\n/**\n * Determines the decimal position of a number value.\n *\n * @param {number} value The number to evaluate.\n *\n * @return {number} The number of decimal places.\n */\nfunction getPrecision( value ) {\n\tconst split = ( value + '' ).split( '.' );\n\treturn split[ 1 ] !== undefined ? split[ 1 ].length : 0;\n}\n\n/**\n * Clamps a value based on a min/max range.\n *\n * @param {number} value The value.\n * @param {number} min The minimum range.\n * @param {number} max The maximum range.\n *\n * @return {number} The clamped value.\n */\nexport function clamp( value, min, max ) {\n\tconst baseValue = getNumber( value );\n\treturn Math.max( min, Math.min( baseValue, max ) );\n}\n\n/**\n * Clamps a value based on a min/max range with rounding\n *\n * @param {number | string} value The value.\n * @param {number} min The minimum range.\n * @param {number} max The maximum range.\n * @param {number} step A multiplier for the value.\n *\n * @return {number} The rounded and clamped value.\n */\nexport function roundClamp(\n\tvalue = 0,\n\tmin = Infinity,\n\tmax = Infinity,\n\tstep = 1\n) {\n\tconst baseValue = getNumber( value );\n\tconst stepValue = getNumber( step );\n\tconst precision = getPrecision( step );\n\tconst rounded = Math.round( baseValue / stepValue ) * stepValue;\n\tconst clampedValue = clamp( rounded, min, max );\n\n\treturn precision\n\t\t? getNumber( clampedValue.toFixed( precision ) )\n\t\t: clampedValue;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,SAASA,CAAEC,KAAK,EAAG;EAClC,MAAMC,MAAM,GAAGC,MAAM,CAAEF,KAAM,CAAC;EAE9B,OAAOG,KAAK,CAAEF,MAAO,CAAC,GAAG,CAAC,GAAGA,MAAM;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,GAAGA,CAAE,GAAGC,IAAI,EAAG;EAC9B,OAAOA,IAAI,CAACC,MAAM,EACjB;EACA,CAAEC,GAAG,EAAEC,GAAG,KAAMD,GAAG,GAAGR,SAAS,CAAES,GAAI,CAAC,EACtC,CACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAE,GAAGJ,IAAI,EAAG;EACnC,OAAOA,IAAI,CAACC,MAAM,EACjB;EACA,CAAEI,IAAI,EAAEF,GAAG,EAAEG,KAAK,KAAM;IACvB,MAAMX,KAAK,GAAGD,SAAS,CAAES,GAAI,CAAC;IAC9B,OAAOG,KAAK,KAAK,CAAC,GAAGX,KAAK,GAAGU,IAAI,GAAGV,KAAK;EAC1C,CAAC,EACD,CACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASY,YAAYA,CAAEZ,KAAK,EAAG;EAC9B,MAAMa,KAAK,GAAG,CAAEb,KAAK,GAAG,EAAE,EAAGa,KAAK,CAAE,GAAI,CAAC;EACzC,OAAOA,KAAK,CAAE,CAAC,CAAE,KAAKC,SAAS,GAAGD,KAAK,CAAE,CAAC,CAAE,CAACE,MAAM,GAAG,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAEhB,KAAK,EAAEiB,GAAG,EAAEC,GAAG,EAAG;EACxC,MAAMC,SAAS,GAAGpB,SAAS,CAAEC,KAAM,CAAC;EACpC,OAAOoB,IAAI,CAACF,GAAG,CAAED,GAAG,EAAEG,IAAI,CAACH,GAAG,CAAEE,SAAS,EAAED,GAAI,CAAE,CAAC;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,UAAUA,CACzBrB,KAAK,GAAG,CAAC,EACTiB,GAAG,GAAGK,QAAQ,EACdJ,GAAG,GAAGI,QAAQ,EACdC,IAAI,GAAG,CAAC,EACP;EACD,MAAMJ,SAAS,GAAGpB,SAAS,CAAEC,KAAM,CAAC;EACpC,MAAMwB,SAAS,GAAGzB,SAAS,CAAEwB,IAAK,CAAC;EACnC,MAAME,SAAS,GAAGb,YAAY,CAAEW,IAAK,CAAC;EACtC,MAAMG,OAAO,GAAGN,IAAI,CAACO,KAAK,CAAER,SAAS,GAAGK,SAAU,CAAC,GAAGA,SAAS;EAC/D,MAAMI,YAAY,GAAGZ,KAAK,CAAEU,OAAO,EAAET,GAAG,EAAEC,GAAI,CAAC;EAE/C,OAAOO,SAAS,GACb1B,SAAS,CAAE6B,YAAY,CAACC,OAAO,CAAEJ,SAAU,CAAE,CAAC,GAC9CG,YAAY;AAChB"}

View File

@@ -0,0 +1,28 @@
/**
* Allows users to opt-out of animations via OS-level preferences.
*
* @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
* @return {string} Generated CSS code for the reduced style
*/
export function reduceMotion(prop = 'transition') {
let style;
switch (prop) {
case 'transition':
style = 'transition-duration: 0ms;';
break;
case 'animation':
style = 'animation-duration: 1ms;';
break;
default:
style = `
animation-duration: 1ms;
transition-duration: 0ms;
`;
}
return `
@media ( prefers-reduced-motion: reduce ) {
${style};
}
`;
}
//# sourceMappingURL=reduce-motion.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["reduceMotion","prop","style"],"sources":["@wordpress/components/src/utils/reduce-motion.js"],"sourcesContent":["/**\n * Allows users to opt-out of animations via OS-level preferences.\n *\n * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name\n * @return {string} Generated CSS code for the reduced style\n */\nexport function reduceMotion( prop = 'transition' ) {\n\tlet style;\n\n\tswitch ( prop ) {\n\t\tcase 'transition':\n\t\t\tstyle = 'transition-duration: 0ms;';\n\t\t\tbreak;\n\n\t\tcase 'animation':\n\t\t\tstyle = 'animation-duration: 1ms;';\n\t\t\tbreak;\n\n\t\tdefault:\n\t\t\tstyle = `\n\t\t\t\tanimation-duration: 1ms;\n\t\t\t\ttransition-duration: 0ms;\n\t\t\t`;\n\t}\n\n\treturn `\n\t\t@media ( prefers-reduced-motion: reduce ) {\n\t\t\t${ style };\n\t\t}\n\t`;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAAEC,IAAI,GAAG,YAAY,EAAG;EACnD,IAAIC,KAAK;EAET,QAASD,IAAI;IACZ,KAAK,YAAY;MAChBC,KAAK,GAAG,2BAA2B;MACnC;IAED,KAAK,WAAW;MACfA,KAAK,GAAG,0BAA0B;MAClC;IAED;MACCA,KAAK,GAAI;AACZ;AACA;AACA,IAAI;EACH;EAEA,OAAQ;AACT;AACA,KAAMA,KAAO;AACb;AACA,EAAE;AACF"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,41 @@
/**
* The argument value for the `space()` utility function.
*
* When this is a number or a numeric string, it will be interpreted as a
* multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.
*
* Otherwise, it will be interpreted as a literal CSS length value. For example,
* `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.
*/
const GRID_BASE = '4px';
/**
* A function that handles numbers, numeric strings, and unit values.
*
* When given a number or a numeric string, it will return the grid-based
* value as a factor of GRID_BASE, defined above.
*
* When given a unit value or one of the named CSS values like `auto`,
* it will simply return the value back.
*
* @param value A number, numeric string, or a unit value.
*/
export function space(value) {
if (typeof value === 'undefined') {
return undefined;
}
// Handle empty strings, if it's the number 0 this still works.
if (!value) {
return '0';
}
const asInt = typeof value === 'number' ? value : Number(value);
// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.
if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) {
return value.toString();
}
return `calc(${GRID_BASE} * ${value})`;
}
//# sourceMappingURL=space.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["GRID_BASE","space","value","undefined","asInt","Number","window","CSS","supports","toString","isNaN"],"sources":["@wordpress/components/src/utils/space.ts"],"sourcesContent":["/**\n * The argument value for the `space()` utility function.\n *\n * When this is a number or a numeric string, it will be interpreted as a\n * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px.\n *\n * Otherwise, it will be interpreted as a literal CSS length value. For example,\n * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px.\n */\nexport type SpaceInput = number | string;\n\nconst GRID_BASE = '4px';\n\n/**\n * A function that handles numbers, numeric strings, and unit values.\n *\n * When given a number or a numeric string, it will return the grid-based\n * value as a factor of GRID_BASE, defined above.\n *\n * When given a unit value or one of the named CSS values like `auto`,\n * it will simply return the value back.\n *\n * @param value A number, numeric string, or a unit value.\n */\nexport function space( value?: SpaceInput ): string | undefined {\n\tif ( typeof value === 'undefined' ) {\n\t\treturn undefined;\n\t}\n\n\t// Handle empty strings, if it's the number 0 this still works.\n\tif ( ! value ) {\n\t\treturn '0';\n\t}\n\n\tconst asInt = typeof value === 'number' ? value : Number( value );\n\n\t// Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value.\n\tif (\n\t\t( typeof window !== 'undefined' &&\n\t\t\twindow.CSS?.supports?.( 'margin', value.toString() ) ) ||\n\t\tNumber.isNaN( asInt )\n\t) {\n\t\treturn value.toString();\n\t}\n\n\treturn `calc(${ GRID_BASE } * ${ value })`;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,MAAMA,SAAS,GAAG,KAAK;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,KAAKA,CAAEC,KAAkB,EAAuB;EAC/D,IAAK,OAAOA,KAAK,KAAK,WAAW,EAAG;IACnC,OAAOC,SAAS;EACjB;;EAEA;EACA,IAAK,CAAED,KAAK,EAAG;IACd,OAAO,GAAG;EACX;EAEA,MAAME,KAAK,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,GAAGG,MAAM,CAAEH,KAAM,CAAC;;EAEjE;EACA,IACG,OAAOI,MAAM,KAAK,WAAW,IAC9BA,MAAM,CAACC,GAAG,EAAEC,QAAQ,GAAI,QAAQ,EAAEN,KAAK,CAACO,QAAQ,CAAC,CAAE,CAAC,IACrDJ,MAAM,CAACK,KAAK,CAAEN,KAAM,CAAC,EACpB;IACD,OAAOF,KAAK,CAACO,QAAQ,CAAC,CAAC;EACxB;EAEA,OAAQ,QAAQT,SAAW,MAAME,KAAO,GAAE;AAC3C"}

View File

@@ -0,0 +1,106 @@
/**
* External dependencies
*/
import removeAccents from 'remove-accents';
import { paramCase } from 'change-case';
const ALL_UNICODE_DASH_CHARACTERS = new RegExp(`[${[
// - (hyphen-minus)
'\u002d',
// ~ (tilde)
'\u007e',
// ­ (soft hyphen)
'\u00ad',
// ֊ (armenian hyphen)
'\u058a',
// ־ (hebrew punctuation maqaf)
'\u05be',
// (canadian syllabics hyphen)
'\u1400',
// ᠆ (mongolian todo soft hyphen)
'\u1806',
// (hyphen)
'\u2010',
// non-breaking hyphen)
'\u2011',
// (figure dash)
'\u2012',
// (en dash)
'\u2013',
// — (em dash)
'\u2014',
// ― (horizontal bar)
'\u2015',
// (swung dash)
'\u2053',
// superscript minus)
'\u207b',
// subscript minus)
'\u208b',
// (minus sign)
'\u2212',
// ⸗ (double oblique hyphen)
'\u2e17',
// ⸺ (two-em dash)
'\u2e3a',
// ⸻ (three-em dash)
'\u2e3b',
// 〜 (wave dash)
'\u301c',
// 〰 (wavy dash)
'\u3030',
// (katakana-hiragana double hyphen)
'\u30a0',
// ︱ (presentation form for vertical em dash)
'\ufe31',
// ︲ (presentation form for vertical en dash)
'\ufe32',
// (small em dash)
'\ufe58',
// ﹣ (small hyphen-minus)
'\ufe63',
// (fullwidth hyphen-minus)
'\uff0d'].join('')}]`, 'g');
export const normalizeTextString = value => {
return removeAccents(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');
};
/**
* Converts any string to kebab case.
* Backwards compatible with Lodash's `_.kebabCase()`.
* Backwards compatible with `_wp_to_kebab_case()`.
*
* @see https://lodash.com/docs/4.17.15#kebabCase
* @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/
*
* @param str String to convert.
* @return Kebab-cased string
*/
export function kebabCase(str) {
var _str$toString;
let input = (_str$toString = str?.toString?.()) !== null && _str$toString !== void 0 ? _str$toString : '';
// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970
input = input.replace(/['\u2019]/, '');
return paramCase(input, {
splitRegexp: [/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g,
// fooBar => foo-bar, 3Bar => 3-bar
/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g,
// 3bar => 3-bar
/([A-Za-z])([0-9])/g,
// Foo3 => foo-3, foo3 => foo-3
/([A-Z])([A-Z][a-z])/g // FOOBar => foo-bar
]
});
}
/**
* Escapes the RegExp special characters.
*
* @param string Input string.
*
* @return Regex-escaped string.
*/
export function escapeRegExp(string) {
return string.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&');
}
//# sourceMappingURL=strings.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["removeAccents","paramCase","ALL_UNICODE_DASH_CHARACTERS","RegExp","join","normalizeTextString","value","toLocaleLowerCase","replace","kebabCase","str","_str$toString","input","toString","splitRegexp","escapeRegExp","string"],"sources":["@wordpress/components/src/utils/strings.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\nimport { paramCase } from 'change-case';\n\nconst ALL_UNICODE_DASH_CHARACTERS = new RegExp(\n\t`[${ [\n\t\t// - (hyphen-minus)\n\t\t'\\u002d',\n\t\t// ~ (tilde)\n\t\t'\\u007e',\n\t\t// ­ (soft hyphen)\n\t\t'\\u00ad',\n\t\t// ֊ (armenian hyphen)\n\t\t'\\u058a',\n\t\t// ־ (hebrew punctuation maqaf)\n\t\t'\\u05be',\n\t\t// (canadian syllabics hyphen)\n\t\t'\\u1400',\n\t\t// ᠆ (mongolian todo soft hyphen)\n\t\t'\\u1806',\n\t\t// (hyphen)\n\t\t'\\u2010',\n\t\t// non-breaking hyphen)\n\t\t'\\u2011',\n\t\t// (figure dash)\n\t\t'\\u2012',\n\t\t// (en dash)\n\t\t'\\u2013',\n\t\t// — (em dash)\n\t\t'\\u2014',\n\t\t// ― (horizontal bar)\n\t\t'\\u2015',\n\t\t// (swung dash)\n\t\t'\\u2053',\n\t\t// superscript minus)\n\t\t'\\u207b',\n\t\t// subscript minus)\n\t\t'\\u208b',\n\t\t// (minus sign)\n\t\t'\\u2212',\n\t\t// ⸗ (double oblique hyphen)\n\t\t'\\u2e17',\n\t\t// ⸺ (two-em dash)\n\t\t'\\u2e3a',\n\t\t// ⸻ (three-em dash)\n\t\t'\\u2e3b',\n\t\t// 〜 (wave dash)\n\t\t'\\u301c',\n\t\t// 〰 (wavy dash)\n\t\t'\\u3030',\n\t\t// (katakana-hiragana double hyphen)\n\t\t'\\u30a0',\n\t\t// ︱ (presentation form for vertical em dash)\n\t\t'\\ufe31',\n\t\t// ︲ (presentation form for vertical en dash)\n\t\t'\\ufe32',\n\t\t// (small em dash)\n\t\t'\\ufe58',\n\t\t// ﹣ (small hyphen-minus)\n\t\t'\\ufe63',\n\t\t// (fullwidth hyphen-minus)\n\t\t'\\uff0d',\n\t].join( '' ) }]`,\n\t'g'\n);\n\nexport const normalizeTextString = ( value: string ): string => {\n\treturn removeAccents( value )\n\t\t.toLocaleLowerCase()\n\t\t.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );\n};\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param str String to convert.\n * @return Kebab-cased string\n */\nexport function kebabCase( str: unknown ) {\n\tlet input = str?.toString?.() ?? '';\n\n\t// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n\tinput = input.replace( /['\\u2019]/, '' );\n\n\treturn paramCase( input, {\n\t\tsplitRegexp: [\n\t\t\t/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t],\n\t} );\n}\n\n/**\n * Escapes the RegExp special characters.\n *\n * @param string Input string.\n *\n * @return Regex-escaped string.\n */\nexport function escapeRegExp( string: string ): string {\n\treturn string.replace( /[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&' );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAa,MAAM,gBAAgB;AAC1C,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,2BAA2B,GAAG,IAAIC,MAAM,CAC5C,IAAI;AACJ;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ,CACR,CAACC,IAAI,CAAE,EAAG,CAAG,GAAE,EAChB,GACD,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAKC,KAAa,IAAc;EAC/D,OAAON,aAAa,CAAEM,KAAM,CAAC,CAC3BC,iBAAiB,CAAC,CAAC,CACnBC,OAAO,CAAEN,2BAA2B,EAAE,GAAI,CAAC;AAC9C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASO,SAASA,CAAEC,GAAY,EAAG;EAAA,IAAAC,aAAA;EACzC,IAAIC,KAAK,IAAAD,aAAA,GAAGD,GAAG,EAAEG,QAAQ,GAAG,CAAC,cAAAF,aAAA,cAAAA,aAAA,GAAI,EAAE;;EAEnC;EACAC,KAAK,GAAGA,KAAK,CAACJ,OAAO,CAAE,WAAW,EAAE,EAAG,CAAC;EAExC,OAAOP,SAAS,CAAEW,KAAK,EAAE;IACxBE,WAAW,EAAE,CACZ,wDAAwD;IAAE;IAC1D,qDAAqD;IAAE;IACvD,oBAAoB;IAAE;IACtB,sBAAsB,CAAE;IAAA;EAE1B,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAEC,MAAc,EAAW;EACtD,OAAOA,MAAM,CAACR,OAAO,CAAE,qBAAqB,EAAE,MAAO,CAAC;AACvD"}

View File

@@ -0,0 +1,10 @@
export { boxSizingReset } from './box-sizing';
export { rgba } from './colors';
export { reduceMotion } from './reduce-motion';
export { rtl } from './rtl';
export { font } from './font';
export { breakpoint } from './breakpoint';
export { default as CONFIG } from './config-values';
export { COLORS } from './colors-values';
export { baseLabelTypography } from './base-label';
//# sourceMappingURL=style-mixins.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["boxSizingReset","rgba","reduceMotion","rtl","font","breakpoint","default","CONFIG","COLORS","baseLabelTypography"],"sources":["@wordpress/components/src/utils/style-mixins.js"],"sourcesContent":["export { boxSizingReset } from './box-sizing';\nexport { rgba } from './colors';\nexport { reduceMotion } from './reduce-motion';\nexport { rtl } from './rtl';\nexport { font } from './font';\nexport { breakpoint } from './breakpoint';\nexport { default as CONFIG } from './config-values';\nexport { COLORS } from './colors-values';\nexport { baseLabelTypography } from './base-label';\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,cAAc;AAC7C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,OAAO,IAAIC,MAAM,QAAQ,iBAAiB;AACnD,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,mBAAmB,QAAQ,cAAc"}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/utils/types.ts"],"sourcesContent":["export type ResponsiveCSSValue< T > = Array< T | undefined > | T;\n"],"mappings":""}

View File

@@ -0,0 +1,33 @@
const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;
/**
* Parses a number and unit from a value.
*
* @param toParse Value to parse
*
* @return The extracted number and unit.
*/
export function parseCSSUnitValue(toParse) {
const value = toParse.trim();
const matched = value.match(UNITED_VALUE_REGEX);
if (!matched) {
return [undefined, undefined];
}
const [, num, unit] = matched;
let numParsed = parseFloat(num);
numParsed = Number.isNaN(numParsed) ? undefined : numParsed;
return [numParsed, unit];
}
/**
* Combines a value and a unit into a unit value.
*
* @param value
* @param unit
*
* @return The unit value.
*/
export function createCSSUnitValue(value, unit) {
return `${value}${unit}`;
}
//# sourceMappingURL=unit-values.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["UNITED_VALUE_REGEX","parseCSSUnitValue","toParse","value","trim","matched","match","undefined","num","unit","numParsed","parseFloat","Number","isNaN","createCSSUnitValue"],"sources":["@wordpress/components/src/utils/unit-values.ts"],"sourcesContent":["const UNITED_VALUE_REGEX =\n\t/^([\\d.\\-+]*)\\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;\n\n/**\n * Parses a number and unit from a value.\n *\n * @param toParse Value to parse\n *\n * @return The extracted number and unit.\n */\nexport function parseCSSUnitValue(\n\ttoParse: string\n): [ number | undefined, string | undefined ] {\n\tconst value = toParse.trim();\n\n\tconst matched = value.match( UNITED_VALUE_REGEX );\n\tif ( ! matched ) {\n\t\treturn [ undefined, undefined ];\n\t}\n\tconst [ , num, unit ] = matched;\n\tlet numParsed: number | undefined = parseFloat( num );\n\tnumParsed = Number.isNaN( numParsed ) ? undefined : numParsed;\n\n\treturn [ numParsed, unit ];\n}\n\n/**\n * Combines a value and a unit into a unit value.\n *\n * @param value\n * @param unit\n *\n * @return The unit value.\n */\nexport function createCSSUnitValue(\n\tvalue: string | number,\n\tunit: string\n): string {\n\treturn `${ value }${ unit }`;\n}\n"],"mappings":"AAAA,MAAMA,kBAAkB,GACvB,8NAA8N;;AAE/N;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAChCC,OAAe,EAC8B;EAC7C,MAAMC,KAAK,GAAGD,OAAO,CAACE,IAAI,CAAC,CAAC;EAE5B,MAAMC,OAAO,GAAGF,KAAK,CAACG,KAAK,CAAEN,kBAAmB,CAAC;EACjD,IAAK,CAAEK,OAAO,EAAG;IAChB,OAAO,CAAEE,SAAS,EAAEA,SAAS,CAAE;EAChC;EACA,MAAM,GAAIC,GAAG,EAAEC,IAAI,CAAE,GAAGJ,OAAO;EAC/B,IAAIK,SAA6B,GAAGC,UAAU,CAAEH,GAAI,CAAC;EACrDE,SAAS,GAAGE,MAAM,CAACC,KAAK,CAAEH,SAAU,CAAC,GAAGH,SAAS,GAAGG,SAAS;EAE7D,OAAO,CAAEA,SAAS,EAAED,IAAI,CAAE;AAC3B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASK,kBAAkBA,CACjCX,KAAsB,EACtBM,IAAY,EACH;EACT,OAAQ,GAAGN,KAAO,GAAGM,IAAM,EAAC;AAC7B"}

View File

@@ -0,0 +1,24 @@
/**
* WordPress dependencies
*/
import deprecated from '@wordpress/deprecated';
export function useDeprecated36pxDefaultSizeProp(props, /** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
componentIdentifier, /** Version in which the prop was deprecated. */
since = '6.3') {
const {
__next36pxDefaultSize,
__next40pxDefaultSize,
...otherProps
} = props;
if (typeof __next36pxDefaultSize !== 'undefined') {
deprecated('`__next36pxDefaultSize` prop in ' + componentIdentifier, {
alternative: '`__next40pxDefaultSize`',
since
});
}
return {
...otherProps,
__next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize
};
}
//# sourceMappingURL=use-deprecated-props.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["deprecated","useDeprecated36pxDefaultSizeProp","props","componentIdentifier","since","__next36pxDefaultSize","__next40pxDefaultSize","otherProps","alternative"],"sources":["@wordpress/components/src/utils/use-deprecated-props.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\n\nexport function useDeprecated36pxDefaultSizeProp<\n\tP extends Record< string, any > & {\n\t\t__next36pxDefaultSize?: boolean;\n\t\t__next40pxDefaultSize?: boolean;\n\t},\n>(\n\tprops: P,\n\t/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */\n\tcomponentIdentifier: string,\n\t/** Version in which the prop was deprecated. */\n\tsince: string = '6.3'\n) {\n\tconst { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =\n\t\tprops;\n\tif ( typeof __next36pxDefaultSize !== 'undefined' ) {\n\t\tdeprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {\n\t\t\talternative: '`__next40pxDefaultSize`',\n\t\t\tsince,\n\t\t} );\n\t}\n\n\treturn {\n\t\t...otherProps,\n\t\t__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,uBAAuB;AAE9C,OAAO,SAASC,gCAAgCA,CAM/CC,KAAQ,EACR;AACAC,mBAA2B,EAC3B;AACAC,KAAa,GAAG,KAAK,EACpB;EACD,MAAM;IAAEC,qBAAqB;IAAEC,qBAAqB;IAAE,GAAGC;EAAW,CAAC,GACpEL,KAAK;EACN,IAAK,OAAOG,qBAAqB,KAAK,WAAW,EAAG;IACnDL,UAAU,CAAE,kCAAkC,GAAGG,mBAAmB,EAAE;MACrEK,WAAW,EAAE,yBAAyB;MACtCJ;IACD,CAAE,CAAC;EACJ;EAEA,OAAO;IACN,GAAGG,UAAU;IACbD,qBAAqB,EAAEA,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAID;EACjD,CAAC;AACF"}

View File

@@ -0,0 +1,50 @@
/**
* WordPress dependencies
*/
import { useEffect, useState } from '@wordpress/element';
const breakpoints = ['40em', '52em', '64em'];
export const useBreakpointIndex = (options = {}) => {
const {
defaultIndex = 0
} = options;
if (typeof defaultIndex !== 'number') {
throw new TypeError(`Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`);
} else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) {
throw new RangeError(`Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`);
}
const [value, setValue] = useState(defaultIndex);
useEffect(() => {
const getIndex = () => breakpoints.filter(bp => {
return typeof window !== 'undefined' ? window.matchMedia(`screen and (min-width: ${bp})`).matches : false;
}).length;
const onResize = () => {
const newValue = getIndex();
if (value !== newValue) {
setValue(newValue);
}
};
onResize();
if (typeof window !== 'undefined') {
window.addEventListener('resize', onResize);
}
return () => {
if (typeof window !== 'undefined') {
window.removeEventListener('resize', onResize);
}
};
}, [value]);
return value;
};
export function useResponsiveValue(values, options = {}) {
const index = useBreakpointIndex(options);
// Allow calling the function with a "normal" value without having to check on the outside.
if (!Array.isArray(values) && typeof values !== 'function') return values;
const array = values || [];
/* eslint-disable jsdoc/no-undefined-types */
return (/** @type {T[]} */array[/* eslint-enable jsdoc/no-undefined-types */
index >= array.length ? array.length - 1 : index]
);
}
//# sourceMappingURL=use-responsive-value.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"sources":["@wordpress/components/src/utils/use-responsive-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' )\n\t\treturn values;\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAExD,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CACjCC,OAAkC,GAAG,CAAC,CAAC,KACnC;EACJ,MAAM;IAAEC,YAAY,GAAG;EAAE,CAAC,GAAGD,OAAO;EAEpC,IAAK,OAAOC,YAAY,KAAK,QAAQ,EAAG;IACvC,MAAM,IAAIC,SAAS,CACjB,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EAC/F,CAAC;EACF,CAAC,MAAM,IAAKA,YAAY,GAAG,CAAC,IAAIA,YAAY,GAAGH,WAAW,CAACK,MAAM,GAAG,CAAC,EAAG;IACvE,MAAM,IAAIC,UAAU,CAClB,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EACnH,CAAC;EACF;EAEA,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGT,QAAQ,CAAEI,YAAa,CAAC;EAEpDL,SAAS,CAAE,MAAM;IAChB,MAAMW,QAAQ,GAAGA,CAAA,KAChBT,WAAW,CAACU,MAAM,CAAIC,EAAE,IAAM;MAC7B,OAAO,OAAOC,MAAM,KAAK,WAAW,GACjCA,MAAM,CAACC,UAAU,CAAG,0BAA0BF,EAAI,GAAG,CAAC,CACrDG,OAAO,GACR,KAAK;IACT,CAAE,CAAC,CAACT,MAAM;IAEX,MAAMU,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKF,KAAK,KAAKS,QAAQ,EAAG;QACzBR,QAAQ,CAAEQ,QAAS,CAAC;MACrB;IACD,CAAC;IAEDD,QAAQ,CAAC,CAAC;IAEV,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;MACpCA,MAAM,CAACK,gBAAgB,CAAE,QAAQ,EAAEF,QAAS,CAAC;IAC9C;IACA,OAAO,MAAM;MACZ,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;QACpCA,MAAM,CAACM,mBAAmB,CAAE,QAAQ,EAAEH,QAAS,CAAC;MACjD;IACD,CAAC;EACF,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAED,OAAO,SAASY,kBAAkBA,CACjCC,MAA2B,EAC3BlB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEoB,KAAK,CAACC,OAAO,CAAEH,MAAO,CAAC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAC7D,OAAOA,MAAM;EAEd,MAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAE;;EAE1B;EACA,OAAO,mBAAmBI,KAAK,CAC9B;IACAH,KAAK,IAAIG,KAAK,CAACnB,MAAM,GAAGmB,KAAK,CAACnB,MAAM,GAAG,CAAC,GAAGgB,KAAK;EAChD;AACF"}

View File

@@ -0,0 +1,63 @@
/* eslint-disable jsdoc/valid-types */
/**
* Determines if a value is null or undefined.
*
* @template T
*
* @param {T} value The value to check.
* @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined.
*/
export function isValueDefined(value) {
return value !== undefined && value !== null;
}
/* eslint-enable jsdoc/valid-types */
/* eslint-disable jsdoc/valid-types */
/**
* Determines if a value is empty, null, or undefined.
*
* @param {string | number | null | undefined} value The value to check.
* @return {value is ("" | null | undefined)} Whether value is empty.
*/
export function isValueEmpty(value) {
const isEmptyString = value === '';
return !isValueDefined(value) || isEmptyString;
}
/* eslint-enable jsdoc/valid-types */
/**
* Get the first defined/non-null value from an array.
*
* @template T
*
* @param {Array<T | null | undefined>} values Values to derive from.
* @param {T} fallbackValue Fallback value if there are no defined values.
* @return {T} A defined value or the fallback value.
*/
export function getDefinedValue(values = [], fallbackValue) {
var _values$find;
return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue;
}
/**
* Converts a string to a number.
*
* @param {string} value
* @return {number} String as a number.
*/
export const stringToNumber = value => {
return parseFloat(value);
};
/**
* Regardless of the input being a string or a number, returns a number.
*
* Returns `undefined` in case the string is `undefined` or not a valid numeric value.
*
* @param {string | number} value
* @return {number} The parsed number.
*/
export const ensureNumber = value => {
return typeof value === 'string' ? stringToNumber(value) : value;
};
//# sourceMappingURL=values.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["isValueDefined","value","undefined","isValueEmpty","isEmptyString","getDefinedValue","values","fallbackValue","_values$find","find","stringToNumber","parseFloat","ensureNumber"],"sources":["@wordpress/components/src/utils/values.js"],"sourcesContent":["/* eslint-disable jsdoc/valid-types */\n/**\n * Determines if a value is null or undefined.\n *\n * @template T\n *\n * @param {T} value The value to check.\n * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined.\n */\nexport function isValueDefined( value ) {\n\treturn value !== undefined && value !== null;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Determines if a value is empty, null, or undefined.\n *\n * @param {string | number | null | undefined} value The value to check.\n * @return {value is (\"\" | null | undefined)} Whether value is empty.\n */\nexport function isValueEmpty( value ) {\n\tconst isEmptyString = value === '';\n\n\treturn ! isValueDefined( value ) || isEmptyString;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * Get the first defined/non-null value from an array.\n *\n * @template T\n *\n * @param {Array<T | null | undefined>} values Values to derive from.\n * @param {T} fallbackValue Fallback value if there are no defined values.\n * @return {T} A defined value or the fallback value.\n */\nexport function getDefinedValue( values = [], fallbackValue ) {\n\treturn values.find( isValueDefined ) ?? fallbackValue;\n}\n\n/**\n * Converts a string to a number.\n *\n * @param {string} value\n * @return {number} String as a number.\n */\nexport const stringToNumber = ( value ) => {\n\treturn parseFloat( value );\n};\n\n/**\n * Regardless of the input being a string or a number, returns a number.\n *\n * Returns `undefined` in case the string is `undefined` or not a valid numeric value.\n *\n * @param {string | number} value\n * @return {number} The parsed number.\n */\nexport const ensureNumber = ( value ) => {\n\treturn typeof value === 'string' ? stringToNumber( value ) : value;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,cAAcA,CAAEC,KAAK,EAAG;EACvC,OAAOA,KAAK,KAAKC,SAAS,IAAID,KAAK,KAAK,IAAI;AAC7C;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,YAAYA,CAAEF,KAAK,EAAG;EACrC,MAAMG,aAAa,GAAGH,KAAK,KAAK,EAAE;EAElC,OAAO,CAAED,cAAc,CAAEC,KAAM,CAAC,IAAIG,aAAa;AAClD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAEC,MAAM,GAAG,EAAE,EAAEC,aAAa,EAAG;EAAA,IAAAC,YAAA;EAC7D,QAAAA,YAAA,GAAOF,MAAM,CAACG,IAAI,CAAET,cAAe,CAAC,cAAAQ,YAAA,cAAAA,YAAA,GAAID,aAAa;AACtD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,cAAc,GAAKT,KAAK,IAAM;EAC1C,OAAOU,UAAU,CAAEV,KAAM,CAAC;AAC3B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMW,YAAY,GAAKX,KAAK,IAAM;EACxC,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAGS,cAAc,CAAET,KAAM,CAAC,GAAGA,KAAK;AACnE,CAAC"}