From 60191f619766b47de4a80872c7ef16a937da583d Mon Sep 17 00:00:00 2001 From: DDEV User Date: Thu, 4 Apr 2024 13:53:14 +0000 Subject: [PATCH] [WIP] adjust JS for names of properties and relations --- .../components/ReactFlow/CustomModelNode.jsx | 6 +- Resources/Public/Css/main.css | 504 +-- Resources/Public/Css/styles.css | 263 +- Resources/Public/JavaScript/main.js | 3496 +---------------- .../Public/JavaScript/main.js.LICENSE.txt | 2 - Resources/Public/JavaScript/styles.js | 131 +- package-lock.json | 55 +- package.json | 4 +- yarn.lock | 30 +- 9 files changed, 50 insertions(+), 4441 deletions(-) diff --git a/Build/Sources/components/ReactFlow/CustomModelNode.jsx b/Build/Sources/components/ReactFlow/CustomModelNode.jsx index f3223f703..e21d7f8d6 100644 --- a/Build/Sources/components/ReactFlow/CustomModelNode.jsx +++ b/Build/Sources/components/ReactFlow/CustomModelNode.jsx @@ -471,7 +471,8 @@ export const CustomModelNode = (props) => { identifier="propertyName" initialValue={property.name} onChange={(value) => { - updateProperty(index, "name", value.toLowerCase()); + value = value.replace(/(^|_)./g, s => s.slice(-1).toUpperCase()); + updateProperty(index, "name", value.charAt(0).toLowerCase() + value.slice(1)); }} /> { initialValue={relation.relationName} identifier="relationName" onChange={(value) => { - updateRelation(index, "relationName", value); + value = value.replace(/(^|_)./g, s => s.slice(-1).toUpperCase()); + updateProperty(index, "name", value.charAt(0).toLowerCase() + value.slice(1)); }} /> = 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n}\n\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\n// Get CSS class list from a props object\nfunction classList(props) {\n var _classes;\n\n var beat = props.beat,\n fade = props.fade,\n beatFade = props.beatFade,\n bounce = props.bounce,\n shake = props.shake,\n flash = props.flash,\n spin = props.spin,\n spinPulse = props.spinPulse,\n spinReverse = props.spinReverse,\n pulse = props.pulse,\n fixedWidth = props.fixedWidth,\n inverse = props.inverse,\n border = props.border,\n listItem = props.listItem,\n flip = props.flip,\n size = props.size,\n rotation = props.rotation,\n pull = props.pull; // map of CSS class names to properties\n\n var classes = (_classes = {\n 'fa-beat': beat,\n 'fa-fade': fade,\n 'fa-beat-fade': beatFade,\n 'fa-bounce': bounce,\n 'fa-shake': shake,\n 'fa-flash': flash,\n 'fa-spin': spin,\n 'fa-spin-reverse': spinReverse,\n 'fa-spin-pulse': spinPulse,\n 'fa-pulse': pulse,\n 'fa-fw': fixedWidth,\n 'fa-inverse': inverse,\n 'fa-border': border,\n 'fa-li': listItem,\n 'fa-flip': flip === true,\n 'fa-flip-horizontal': flip === 'horizontal' || flip === 'both',\n 'fa-flip-vertical': flip === 'vertical' || flip === 'both'\n }, _defineProperty(_classes, \"fa-\".concat(size), typeof size !== 'undefined' && size !== null), _defineProperty(_classes, \"fa-rotate-\".concat(rotation), typeof rotation !== 'undefined' && rotation !== null && rotation !== 0), _defineProperty(_classes, \"fa-pull-\".concat(pull), typeof pull !== 'undefined' && pull !== null), _defineProperty(_classes, 'fa-swap-opacity', props.swapOpacity), _classes); // map over all the keys in the classes object\n // return an array of the keys where the value for the key is not null\n\n return Object.keys(classes).map(function (key) {\n return classes[key] ? key : null;\n }).filter(function (key) {\n return key;\n });\n}\n\n// Camelize taken from humps\n// humps is copyright © 2012+ Dom Christie\n// Released under the MIT license.\n// Performant way to determine if object coerces to a number\nfunction _isNumerical(obj) {\n obj = obj - 0; // eslint-disable-next-line no-self-compare\n\n return obj === obj;\n}\n\nfunction camelize(string) {\n if (_isNumerical(string)) {\n return string;\n } // eslint-disable-next-line no-useless-escape\n\n\n string = string.replace(/[\\-_\\s]+(.)?/g, function (match, chr) {\n return chr ? chr.toUpperCase() : '';\n }); // Ensure 1st char is always lowercase\n\n return string.substr(0, 1).toLowerCase() + string.substr(1);\n}\n\nvar _excluded = [\"style\"];\n\nfunction capitalize(val) {\n return val.charAt(0).toUpperCase() + val.slice(1);\n}\n\nfunction styleToObject(style) {\n return style.split(';').map(function (s) {\n return s.trim();\n }).filter(function (s) {\n return s;\n }).reduce(function (acc, pair) {\n var i = pair.indexOf(':');\n var prop = camelize(pair.slice(0, i));\n var value = pair.slice(i + 1).trim();\n prop.startsWith('webkit') ? acc[capitalize(prop)] = value : acc[prop] = value;\n return acc;\n }, {});\n}\n\nfunction convert(createElement, element) {\n var extraProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n if (typeof element === 'string') {\n return element;\n }\n\n var children = (element.children || []).map(function (child) {\n return convert(createElement, child);\n });\n /* eslint-disable dot-notation */\n\n var mixins = Object.keys(element.attributes || {}).reduce(function (acc, key) {\n var val = element.attributes[key];\n\n switch (key) {\n case 'class':\n acc.attrs['className'] = val;\n delete element.attributes['class'];\n break;\n\n case 'style':\n acc.attrs['style'] = styleToObject(val);\n break;\n\n default:\n if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {\n acc.attrs[key.toLowerCase()] = val;\n } else {\n acc.attrs[camelize(key)] = val;\n }\n\n }\n\n return acc;\n }, {\n attrs: {}\n });\n\n var _extraProps$style = extraProps.style,\n existingStyle = _extraProps$style === void 0 ? {} : _extraProps$style,\n remaining = _objectWithoutProperties(extraProps, _excluded);\n\n mixins.attrs['style'] = _objectSpread2(_objectSpread2({}, mixins.attrs['style']), existingStyle);\n /* eslint-enable */\n\n return createElement.apply(void 0, [element.tag, _objectSpread2(_objectSpread2({}, mixins.attrs), remaining)].concat(_toConsumableArray(children)));\n}\n\nvar PRODUCTION = false;\n\ntry {\n PRODUCTION = \"development\" === 'production';\n} catch (e) {}\n\nfunction log () {\n if (!PRODUCTION && console && typeof console.error === 'function') {\n var _console;\n\n (_console = console).error.apply(_console, arguments);\n }\n}\n\nfunction normalizeIconArgs(icon) {\n // this has everything that it needs to be rendered which means it was probably imported\n // directly from an icon svg package\n if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName && icon.icon) {\n return icon;\n }\n\n if (_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.parse.icon) {\n return _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.parse.icon(icon);\n } // if the icon is null, there's nothing to do\n\n\n if (icon === null) {\n return null;\n } // if the icon is an object and has a prefix and an icon name, return it\n\n\n if (icon && _typeof(icon) === 'object' && icon.prefix && icon.iconName) {\n return icon;\n } // if it's an array with length of two\n\n\n if (Array.isArray(icon) && icon.length === 2) {\n // use the first item as prefix, second as icon name\n return {\n prefix: icon[0],\n iconName: icon[1]\n };\n } // if it's a string, use it as the icon name\n\n\n if (typeof icon === 'string') {\n return {\n prefix: 'fas',\n iconName: icon\n };\n }\n}\n\n// creates an object with a key of key\n// and a value of value\n// if certain conditions are met\nfunction objectWithKey(key, value) {\n // if the value is a non-empty array\n // or it's not an array but it is truthy\n // then create the object with the key and the value\n // if not, return an empty array\n return Array.isArray(value) && value.length > 0 || !Array.isArray(value) && value ? _defineProperty({}, key, value) : {};\n}\n\nvar FontAwesomeIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default().forwardRef(function (props, ref) {\n var iconArgs = props.icon,\n maskArgs = props.mask,\n symbol = props.symbol,\n className = props.className,\n title = props.title,\n titleId = props.titleId,\n maskId = props.maskId;\n var iconLookup = normalizeIconArgs(iconArgs);\n var classes = objectWithKey('classes', [].concat(_toConsumableArray(classList(props)), _toConsumableArray(className.split(' '))));\n var transform = objectWithKey('transform', typeof props.transform === 'string' ? _fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.parse.transform(props.transform) : props.transform);\n var mask = objectWithKey('mask', normalizeIconArgs(maskArgs));\n var renderedIcon = (0,_fortawesome_fontawesome_svg_core__WEBPACK_IMPORTED_MODULE_0__.icon)(iconLookup, _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, classes), transform), mask), {}, {\n symbol: symbol,\n title: title,\n titleId: titleId,\n maskId: maskId\n }));\n\n if (!renderedIcon) {\n log('Could not find icon', iconLookup);\n return null;\n }\n\n var abstract = renderedIcon.abstract;\n var extraProps = {\n ref: ref\n };\n Object.keys(props).forEach(function (key) {\n // eslint-disable-next-line no-prototype-builtins\n if (!FontAwesomeIcon.defaultProps.hasOwnProperty(key)) {\n extraProps[key] = props[key];\n }\n });\n return convertCurry(abstract[0], extraProps);\n});\nFontAwesomeIcon.displayName = 'FontAwesomeIcon';\nFontAwesomeIcon.propTypes = {\n beat: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n border: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n beatFade: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n bounce: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n className: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n fade: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n flash: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n mask: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().array), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)]),\n maskId: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n fixedWidth: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n inverse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n flip: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf([true, false, 'horizontal', 'vertical', 'both']),\n icon: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().object), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().array), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)]),\n listItem: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n pull: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['right', 'left']),\n pulse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n rotation: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf([0, 90, 180, 270]),\n shake: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n size: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOf(['2xs', 'xs', 'sm', 'lg', 'xl', '2xl', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x']),\n spin: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n spinPulse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n spinReverse: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool),\n symbol: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string)]),\n title: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n titleId: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().string),\n transform: prop_types__WEBPACK_IMPORTED_MODULE_2___default().oneOfType([(prop_types__WEBPACK_IMPORTED_MODULE_2___default().string), (prop_types__WEBPACK_IMPORTED_MODULE_2___default().object)]),\n swapOpacity: (prop_types__WEBPACK_IMPORTED_MODULE_2___default().bool)\n};\nFontAwesomeIcon.defaultProps = {\n border: false,\n className: '',\n mask: null,\n maskId: null,\n fixedWidth: false,\n inverse: false,\n flip: false,\n icon: null,\n listItem: false,\n pull: null,\n pulse: false,\n rotation: null,\n size: null,\n spin: false,\n spinPulse: false,\n spinReverse: false,\n beat: false,\n fade: false,\n beatFade: false,\n bounce: false,\n shake: false,\n symbol: false,\n title: '',\n titleId: null,\n transform: null,\n swapOpacity: false\n};\nvar convertCurry = convert.bind(null, (react__WEBPACK_IMPORTED_MODULE_1___default().createElement));\n\n\n\n\n//# sourceURL=webpack://extension_builder_12_react/./node_modules/@fortawesome/react-fontawesome/index.es.js?"); - -/***/ }), - -/***/ "./node_modules/@restart/hooks/esm/useCallbackRef.js": -/*!***********************************************************!*\ - !*** ./node_modules/@restart/hooks/esm/useCallbackRef.js ***! - \***********************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ useCallbackRef; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\n/**\n * A convenience hook around `useState` designed to be paired with\n * the component [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) api.\n * Callback refs are useful over `useRef()` when you need to respond to the ref being set\n * instead of lazily accessing it in an effect.\n *\n * ```ts\n * const [element, attachRef] = useCallbackRef()\n *\n * useEffect(() => {\n * if (!element) return\n *\n * const calendar = new FullCalendar.Calendar(element)\n *\n * return () => {\n * calendar.destroy()\n * }\n * }, [element])\n *\n * return
\n * ```\n *\n * @category refs\n */\nfunction useCallbackRef() {\n return (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n}\n\n//# sourceURL=webpack://extension_builder_12_react/./node_modules/@restart/hooks/esm/useCallbackRef.js?"); - -/***/ }), - -/***/ "./node_modules/@restart/hooks/esm/useCommittedRef.js": -/*!************************************************************!*\ - !*** ./node_modules/@restart/hooks/esm/useCommittedRef.js ***! - \************************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\n\n/**\n * Creates a `Ref` whose value is updated in an effect, ensuring the most recent\n * value is the one rendered with. Generally only required for Concurrent mode usage\n * where previous work in `render()` may be discarded before being used.\n *\n * This is safe to access in an event handler.\n *\n * @param value The `Ref` value\n */\nfunction useCommittedRef(value) {\n const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(value);\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n ref.current = value;\n }, [value]);\n return ref;\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = (useCommittedRef);\n\n//# sourceURL=webpack://extension_builder_12_react/./node_modules/@restart/hooks/esm/useCommittedRef.js?"); - -/***/ }), - -/***/ "./node_modules/@restart/hooks/esm/useEventCallback.js": -/*!*************************************************************!*\ - !*** ./node_modules/@restart/hooks/esm/useEventCallback.js ***! - \*************************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": function() { return /* binding */ useEventCallback; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _useCommittedRef__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./useCommittedRef */ \"./node_modules/@restart/hooks/esm/useCommittedRef.js\");\n\n\nfunction useEventCallback(fn) {\n const ref = (0,_useCommittedRef__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(fn);\n return (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (...args) {\n return ref.current && ref.current(...args);\n }, [ref]);\n}\n\n//# sourceURL=webpack://extension_builder_12_react/./node_modules/@restart/hooks/esm/useEventCallback.js?"); - -/***/ }), - -/***/ "./node_modules/@restart/hooks/esm/useIsomorphicEffect.js": -/*!****************************************************************!*\ - !*** ./node_modules/@restart/hooks/esm/useIsomorphicEffect.js ***! - \****************************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst isReactNative = typeof __webpack_require__.g !== 'undefined' &&\n// @ts-ignore\n__webpack_require__.g.navigator &&\n// @ts-ignore\n__webpack_require__.g.navigator.product === 'ReactNative';\nconst isDOM = typeof document !== 'undefined';\n\n/**\n * Is `useLayoutEffect` in a DOM or React Native environment, otherwise resolves to useEffect\n * Only useful to avoid the console warning.\n *\n * PREFER `useEffect` UNLESS YOU KNOW WHAT YOU ARE DOING.\n *\n * @category effects\n */\n/* harmony default export */ __webpack_exports__[\"default\"] = (isDOM || isReactNative ? react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect : react__WEBPACK_IMPORTED_MODULE_0__.useEffect);\n\n//# sourceURL=webpack://extension_builder_12_react/./node_modules/@restart/hooks/esm/useIsomorphicEffect.js?"); - -/***/ }), - -/***/ "./node_modules/@restart/hooks/esm/useMergedRefs.js": -/*!**********************************************************!*\ - !*** ./node_modules/@restart/hooks/esm/useMergedRefs.js ***! - \**********************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ mergeRefs: function() { return /* binding */ mergeRefs; }\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n\nconst toFnRef = ref => !ref || typeof ref === 'function' ? ref : value => {\n ref.current = value;\n};\nfunction mergeRefs(refA, refB) {\n const a = toFnRef(refA);\n const b = toFnRef(refB);\n return value => {\n if (a) a(value);\n if (b) b(value);\n };\n}\n\n/**\n * Create and returns a single callback ref composed from two other Refs.\n *\n * ```tsx\n * const Button = React.forwardRef((props, ref) => {\n * const [element, attachRef] = useCallbackRef();\n * const mergedRef = useMergedRefs(ref, attachRef);\n *\n * return