@progress/kendo-react-labels
Version:
React Labels package provides components for labelling form editors. KendoReact Labels package
16 lines (15 loc) • 4.55 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactLabels={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl)}(this,(function(e,t,o,a,l){"use strict";function s(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:function(){return e[o]}})}})),t.default=e,Object.freeze(t)}var r=s(t);const n="labels.optional",i={[n]:"(Optional)"},d=e=>{const{id:t,editorId:o,editorRef:s,editorDisabled:d,children:c,editorValid:u,style:p,className:m,optional:b}=e,f=l.useLocalization(),y=b?f.toLanguageString(n,i[n]):"",g=y&&r.createElement("span",{className:"k-label-optional"},y),N=a.useUnstyled(),E=N&&N.uLabel,h=r.useCallback((e=>{if(s&&s.current&&!d){s.current.focus&&(e.preventDefault(),s.current.focus());const t=s.current.actionElement;t&&(e.preventDefault(),t.click())}}),[s]),L=r.useMemo((()=>a.classNames(a.uLabel.label({c:E,empty:!c,invalid:!1===u,disabled:!0===d}),m)),[E,c,u,d,m]);return r.createElement("label",{id:t,htmlFor:o,onClick:h,style:p,className:L},c,g)};d.propTypes={id:o.string,editorId:o.string,editorRef:o.oneOfType([o.func,o.shape({current:o.any})]),editorValid:o.bool,editorDisabled:o.bool,style:o.object,className:o.string,optional:o.bool},d.displayName="KendoReactLabel";const c=e=>{const t={direction:"start",...e},o=a.useUnstyled(),l=o&&o.uError,s=r.useMemo((()=>a.classNames(a.uError.wrapper({c:l,direction:t.direction}),t.className)),[l,t.direction,t.className]);return r.createElement("div",{id:t.id,role:"alert",style:t.style,className:s},t.children)};c.propTypes={id:o.string,direction:o.oneOf(["start","end"]),children:o.oneOfType([o.element,o.node]),style:o.object,className:o.string},c.displayName="KendoReactError";const u=e=>{const t={direction:"start",...e},o=a.useUnstyled(),l=o&&o.uHint,s=r.useMemo((()=>a.classNames(a.uHint.wrapper({c:l,direction:t.direction,disabled:!0===t.editorDisabled}),t.className)),[l,t.direction,t.editorDisabled,t.className]);return r.createElement("div",{id:t.id,style:t.style,className:s},t.children)};u.propTypes={id:o.string,direction:o.oneOf(["start","end"]),children:o.oneOfType([o.element,o.node]),style:o.object,className:o.string,editorDisabled:o.bool},u.displayName="KendoReactHint";const p=e=>{const[t,o]=r.useState({focused:!1}),{label:s,editorId:d,className:c,labelClassName:u,editorValue:p,editorPlaceholder:m,editorValid:b,editorDisabled:f,style:y,id:g,optional:N,unstyled:E,...h}=e,L=l.useLocalization(),O=N?L.toLanguageString(n,i[n]):"",T=O&&r.createElement("span",{className:"k-label-optional"},O),j=E&&E.uFloatingLabel,k=!m&&!p&&0!==p,D=a.classNames(a.uFloatingLabel.wrapper({c:j,focused:t.focused,empty:k,notEmpty:!k,disabled:f,isRtl:"rtl"===e.dir}),c),R=a.classNames(a.uFloatingLabel.label({c:j,focused:t.focused,empty:k,notEmpty:!k,invalid:!1===b,disabled:f}),u);return r.createElement("span",{...h,id:e.id,className:D,onFocus:e=>{o({focused:!0})},onBlur:e=>{o({focused:!1})},style:y,dir:e.dir},e.children,s?d?r.createElement("label",{id:g,htmlFor:d,className:R},s,T):r.createElement("span",{id:g,className:R},s,T):null)};p.propTypes={label:o.node,editorId:o.string,editorValue:o.oneOfType([o.string,o.bool,o.number]),editorPlaceholder:o.string,editorValid:o.bool,editorDisabled:o.bool,id:o.string,style:o.object,className:o.string,labelClassName:o.string,optional:o.bool},e.Error=c,e.FloatingLabel=p,e.Hint=u,e.Label=d}));