@wordpress/components/build/border-control/border-control/hook.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../../src/border-control/border-control/hook.ts"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';\nimport { useContextSystem } from '../../context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';\n\n// If either width or color are defined, the border is considered valid\n// and a border style can be set as well.\nconst isValidBorder = border => {\n  const hasWidth = border?.width !== undefined && border.width !== '';\n  const hasColor = border?.color !== undefined;\n  return hasWidth || hasColor;\n};\nexport function useBorderControl(props) {\n  const {\n    className,\n    colors = [],\n    isCompact,\n    onChange,\n    enableAlpha = true,\n    enableStyle = true,\n    shouldSanitizeBorder = true,\n    size = 'default',\n    value: border,\n    width,\n    __experimentalIsRenderedInSidebar = false,\n    __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize,\n    ...otherProps\n  } = useContextSystem(props, 'BorderControl');\n  maybeWarnDeprecated36pxSize({\n    componentName: 'BorderControl',\n    __next40pxDefaultSize,\n    size,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;\n  const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);\n  const widthUnit = originalWidthUnit || 'px';\n  const hadPreviousZeroWidth = widthValue === 0;\n  const [colorSelection, setColorSelection] = useState();\n  const [styleSelection, setStyleSelection] = useState();\n  const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;\n  const onBorderChange = useCallback(newBorder => {\n    if (shouldSanitizeBorder && !isValidBorder(newBorder)) {\n      onChange(undefined);\n      return;\n    }\n    onChange(newBorder);\n  }, [onChange, shouldSanitizeBorder]);\n  const onWidthChange = useCallback(newWidth => {\n    const newWidthValue = newWidth === '' ? undefined : newWidth;\n    const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);\n    const hasZeroWidth = parsedValue === 0;\n    const updatedBorder = {\n      ...border,\n      width: newWidthValue\n    };\n\n    // Setting the border width explicitly to zero will also set the\n    // border style to `none` and clear the border color.\n    if (hasZeroWidth && !hadPreviousZeroWidth) {\n      // Before clearing the color and style selections, keep track of\n      // the current selections so they can be restored when the width\n      // changes to a non-zero value.\n      setColorSelection(border?.color);\n      setStyleSelection(border?.style);\n\n      // Clear the color and style border properties.\n      updatedBorder.color = undefined;\n      updatedBorder.style = 'none';\n    }\n\n    // Selection has changed from zero border width to non-zero width.\n    if (!hasZeroWidth && hadPreviousZeroWidth) {\n      // Restore previous border color and style selections if width\n      // is now not zero.\n      if (updatedBorder.color === undefined) {\n        updatedBorder.color = colorSelection;\n      }\n      if (updatedBorder.style === 'none') {\n        updatedBorder.style = styleSelection;\n      }\n    }\n    onBorderChange(updatedBorder);\n  }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]);\n  const onSliderChange = useCallback(value => {\n    onWidthChange(`${value}${widthUnit}`);\n  }, [onWidthChange, widthUnit]);\n\n  // Generate class names.\n  const cx = useCx();\n  const classes = useMemo(() => {\n    return cx(styles.borderControl, className);\n  }, [className, cx]);\n  let wrapperWidth = width;\n  if (isCompact) {\n    // Widths below represent the minimum usable width for compact controls.\n    // Taller controls contain greater internal padding, thus greater width.\n    wrapperWidth = size === '__unstable-large' ? '116px' : '90px';\n  }\n  const innerWrapperClassName = useMemo(() => {\n    const widthStyle = !!wrapperWidth && styles.wrapperWidth;\n    const heightStyle = styles.wrapperHeight(computedSize);\n    return cx(styles.innerWrapper(), widthStyle, heightStyle);\n  }, [wrapperWidth, cx, computedSize]);\n  const sliderClassName = useMemo(() => {\n    return cx(styles.borderSlider());\n  }, [cx]);\n  return {\n    ...otherProps,\n    className: classes,\n    colors,\n    enableAlpha,\n    enableStyle,\n    innerWrapperClassName,\n    inputWidth: wrapperWidth,\n    isStyleSettable,\n    onBorderChange,\n    onSliderChange,\n    onWidthChange,\n    previousStyleSelection: styleSelection,\n    sliderClassName,\n    value: border,\n    widthUnit,\n    widthValue,\n    size: computedSize,\n    __experimentalIsRenderedInSidebar,\n    __next40pxDefaultSize\n  };\n}"],
  "mappings": "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",
  "names": ["wrapperWidth"]
}