UNPKG

primereact

Version:

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

2 lines (1 loc) 2.46 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),l=require("primereact/componentbase"),a=require("primereact/hooks"),n=require("primereact/utils");function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(l){if("default"!==l){var a=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,a.get?a:{enumerable:!0,get:function(){return e[l]}})}})),t.default=e,Object.freeze(t)}var o=r(e),p=l.ComponentBase.extend({defaultProps:{__TYPE:"FloatLabel",children:void 0},css:{classes:{root:"p-float-label"},styles:"\n@layer primereact {\n .p-float-label {\n display: block;\n position: relative;\n }\n \n .p-float-label label {\n position: absolute;\n pointer-events: none;\n top: 50%;\n margin-top: -.5rem;\n transition-property: all;\n transition-timing-function: ease;\n line-height: 1;\n }\n \n .p-float-label:has(textarea) label {\n top: 1rem;\n }\n \n .p-float-label:has(input:focus) label,\n .p-float-label:has(input.p-filled) label,\n .p-float-label:has(input:-webkit-autofill) label,\n .p-float-label:has(textarea:focus) label,\n .p-float-label:has(textarea.p-filled) label,\n .p-float-label:has(.p-inputwrapper-focus) label,\n .p-float-label:has(.p-inputwrapper-filled) label {\n top: -.75rem;\n font-size: 12px;\n }\n \n .p-float-label .p-placeholder,\n .p-float-label input::placeholder,\n .p-float-label .p-inputtext::placeholder {\n opacity: 0;\n transition-property: all;\n transition-timing-function: ease;\n }\n \n .p-float-label .p-focus .p-placeholder,\n .p-float-label input:focus::placeholder,\n .p-float-label .p-inputtext:focus::placeholder {\n opacity: 1;\n transition-property: all;\n transition-timing-function: ease;\n }\n}"}}),i=o.memo(o.forwardRef((function(e,r){var i=a.useMergeProps(),s=o.useContext(t.PrimeReactContext),c=p.getProps(e,s),f=o.useRef(r),u=p.setMetaData({props:c}),b=u.ptm,d=u.cx;l.useHandleStyle(p.css.styles,u.isUnstyled,{name:"floatlabel"}),o.useEffect((function(){n.ObjectUtils.combinedRefs(f,r)}),[f,r]);var m=i({ref:f,className:n.classNames(d("root"))},p.getOtherProps(c),b("root"));return o.createElement("span",m,c.children)})));i.displayName="FloatLabel",exports.FloatLabel=i;