carbon-react 157.4.0 → 157.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/__internal__/character-count/character-count.component.d.ts +3 -1
- package/esm/__internal__/character-count/character-count.component.js +1 -1
- package/esm/__internal__/character-count/character-count.style.d.ts +1 -0
- package/esm/__internal__/character-count/character-count.style.js +1 -1
- package/esm/__internal__/fieldset/fieldset.component.d.ts +3 -1
- package/esm/__internal__/fieldset/fieldset.component.js +1 -1
- package/esm/__internal__/fieldset/fieldset.style.d.ts +1 -0
- package/esm/__internal__/fieldset/fieldset.style.js +1 -1
- package/esm/__internal__/form-field/form-field.style.js +1 -1
- package/esm/__internal__/hint-text/hint-text.component.d.ts +3 -1
- package/esm/__internal__/hint-text/hint-text.component.js +1 -1
- package/esm/__internal__/hint-text/hint-text.style.js +1 -1
- package/esm/__internal__/label/label.component.d.ts +2 -2
- package/esm/__internal__/label/label.component.js +1 -1
- package/esm/__internal__/label/label.style.d.ts +2 -0
- package/esm/__internal__/label/label.style.js +1 -1
- package/esm/__internal__/validation-message/validation-message.component.d.ts +3 -1
- package/esm/__internal__/validation-message/validation-message.component.js +1 -1
- package/esm/__internal__/validation-message/validation-message.style.d.ts +1 -0
- package/esm/__internal__/validation-message/validation-message.style.js +1 -1
- package/esm/components/numeral-date/numeral-date.style.d.ts +1 -1
- package/esm/components/time/time.style.d.ts +1 -1
- package/lib/__internal__/character-count/character-count.component.d.ts +3 -1
- package/lib/__internal__/character-count/character-count.component.js +1 -1
- package/lib/__internal__/character-count/character-count.style.d.ts +1 -0
- package/lib/__internal__/character-count/character-count.style.js +1 -1
- package/lib/__internal__/fieldset/fieldset.component.d.ts +3 -1
- package/lib/__internal__/fieldset/fieldset.component.js +1 -1
- package/lib/__internal__/fieldset/fieldset.style.d.ts +1 -0
- package/lib/__internal__/fieldset/fieldset.style.js +1 -1
- package/lib/__internal__/form-field/form-field.style.js +1 -1
- package/lib/__internal__/hint-text/hint-text.component.d.ts +3 -1
- package/lib/__internal__/hint-text/hint-text.component.js +1 -1
- package/lib/__internal__/hint-text/hint-text.style.js +1 -1
- package/lib/__internal__/label/label.component.d.ts +2 -2
- package/lib/__internal__/label/label.component.js +1 -1
- package/lib/__internal__/label/label.style.d.ts +2 -0
- package/lib/__internal__/label/label.style.js +1 -1
- package/lib/__internal__/validation-message/validation-message.component.d.ts +3 -1
- package/lib/__internal__/validation-message/validation-message.component.js +1 -1
- package/lib/__internal__/validation-message/validation-message.style.d.ts +1 -0
- package/lib/__internal__/validation-message/validation-message.style.js +1 -1
- package/lib/components/numeral-date/numeral-date.style.d.ts +1 -1
- package/lib/components/time/time.style.d.ts +1 -1
- package/package.json +1 -1
|
@@ -7,6 +7,8 @@ interface CharacterCountProps {
|
|
|
7
7
|
isDebouncedOverLimit?: boolean;
|
|
8
8
|
isOverLimit: boolean;
|
|
9
9
|
visuallyHiddenHintId?: string;
|
|
10
|
+
/** Set large font-size */
|
|
11
|
+
isLarge?: boolean;
|
|
10
12
|
}
|
|
11
|
-
declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
|
|
13
|
+
declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, isLarge, }: CharacterCountProps) => React.JSX.Element;
|
|
12
14
|
export default CharacterCount;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as a,jsx as e}from"react/jsx-runtime";import"react";import{StyledCharacterCountWrapper as t,VisuallyHiddenHint as r,StyledCharacterCount as c,VisuallyHiddenCharacterCount as i}from"./character-count.style.js";import l from"../../hooks/__internal__/useLocale/useLocale.js";const o=({ariaLive:o="off",value:n,debouncedValue:d=n,limit:u,isDebouncedOverLimit:h,isOverLimit:s,visuallyHiddenHintId:m})=>{const
|
|
1
|
+
import{jsxs as a,jsx as e}from"react/jsx-runtime";import"react";import{StyledCharacterCountWrapper as t,VisuallyHiddenHint as r,StyledCharacterCount as c,VisuallyHiddenCharacterCount as i}from"./character-count.style.js";import l from"../../hooks/__internal__/useLocale/useLocale.js";const o=({ariaLive:o="off",value:n,debouncedValue:d=n,limit:u,isDebouncedOverLimit:h,isOverLimit:s,visuallyHiddenHintId:m,isLarge:v})=>{const L=+u-+n,f=+n-+u,y=+u-+d,C=d-+u,p=l(),H=(a,e)=>new Intl.NumberFormat(e).format(a);return a(t,{children:[e(r,{"data-element":"visually-hidden-hint","data-role":"visually-hidden-hint",id:m,children:p.characterCount.visuallyHiddenHint(H(u,p.locale()))}),e(c,{"aria-hidden":"true",isOverLimit:s,"data-element":"character-count","data-role":"character-count",isLarge:v,children:s?p.characterCount.tooManyCharacters(f,H(f,p.locale())):p.characterCount.charactersLeft(L,H(L,p.locale()))}),e(i,{"data-element":"visually-hidden-character-count","data-role":"visually-hidden-character-count","aria-live":o,children:h?p.characterCount.tooManyCharacters(C,H(C,p.locale())):p.characterCount.charactersLeft(y,H(y,p.locale()))})]})};export{o as default};
|
|
@@ -3,6 +3,7 @@ declare const StyledCharacterCount: import("styled-components").StyledComponent<
|
|
|
3
3
|
theme: object;
|
|
4
4
|
} & {
|
|
5
5
|
isOverLimit: boolean;
|
|
6
|
+
isLarge?: boolean;
|
|
6
7
|
}, "theme">;
|
|
7
8
|
declare const VisuallyHiddenCharacterCount: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
9
|
declare const VisuallyHiddenHint: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as e}from"styled-components";import
|
|
1
|
+
import t,{css as e}from"styled-components";import i from"../../style/themes/apply-base-theme.js";import o from"../../style/utils/visually-hidden.js";const a=t.div.withConfig({displayName:"character-count.style__StyledCharacterCountWrapper",componentId:"sc-f39231b-0"})([""]),n=t.div.attrs(i).withConfig({displayName:"character-count.style__StyledCharacterCount",componentId:"sc-f39231b-1"})(["text-align:left;font-size:var(--fontSizes100);margin-top:var(--spacing050);margin-bottom:var(--spacing050);color:",";"," ",""],(({isOverLimit:t})=>t?"var(--colorsSemanticNegative500)":"var(--colorsUtilityYin055)"),(({isLarge:t})=>t&&e(["font-size:var(--fontSizes200);"])),(({isOverLimit:t})=>t&&e(["font-weight:var(--fontWeights500);"]))),r=t.div.withConfig({displayName:"character-count.style__VisuallyHiddenCharacterCount",componentId:"sc-f39231b-2"})(['::after{content:" ";}',""],o),s=t.div.withConfig({displayName:"character-count.style__VisuallyHiddenHint",componentId:"sc-f39231b-3"})(['::before{content:" ";}::after{content:" ";}',""],o);export{n as StyledCharacterCount,a as StyledCharacterCountWrapper,r as VisuallyHiddenCharacterCount,s as VisuallyHiddenHint};
|
|
@@ -42,6 +42,8 @@ export interface FieldsetProps extends MarginProps {
|
|
|
42
42
|
validationMessagePositionTop?: boolean;
|
|
43
43
|
/** Apply new validation styles */
|
|
44
44
|
applyNewValidation?: boolean;
|
|
45
|
+
/** Set the size of the component */
|
|
46
|
+
size?: "small" | "medium" | "large";
|
|
45
47
|
}
|
|
46
|
-
declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, ...rest }: FieldsetProps) => React.JSX.Element;
|
|
48
|
+
declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, size, ...rest }: FieldsetProps) => React.JSX.Element;
|
|
47
49
|
export default Fieldset;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import{useContext as r,useState as t,useRef as o,useEffect as l}from"react";import{StyledFieldset as a,StyledLegend as
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import{useContext as r,useState as t,useRef as o,useEffect as l}from"react";import{StyledFieldset as a,StyledLegend as s,StyledIconWrapper as d}from"./fieldset.style.js";import{ValidationIcon as p}from"../validations/validation-icon.component.js";import c from"../../components/carbon-provider/__internal__/new-validation.context.js";import{InputGroupBehaviour as u,InputGroupContext as m}from"../input-behaviour/input-group-behaviour.component.js";import{Help as f}from"../../components/help/help.component.js";import{Typography as g}from"../../components/typography/typography.component.js";import{Box as b}from"../../components/box/box.component.js";import y from"../../components/textbox/textbox.style.js";import h from"../validation-message/validation-message.component.js";import{HintText as j}from"../hint-text/hint-text.component.js";import{FieldHelp as v}from"../field-help/field-help.component.js";import O from"../utils/helpers/guid/index.js";import w from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";function x(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function D(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(i){x(e,i,n[i])}))}return e}function M(e,i){return i=null!=i?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))})),e}const S=x=>{var{legend:S,children:H,inline:I=!1,legendWidth:_,legendAlign:k,legendSpacing:A=2,error:R,warning:q,info:B,isRequired:E,blockGroupBehaviour:L,legendMargin:F={},isDisabled:G,labelHelp:T,fieldHelp:z,inputHint:N,validationMessagePositionTop:V,applyNewValidation:W=!1,id:C,size:$}=x,J=function(e,i){if(null==e)return{};var n,r,t=function(e,i){if(null==e)return{};var n,r,t={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],i.indexOf(n)>=0||(t[n]=e[n]);return t}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(x,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","labelHelp","fieldHelp","inputHint","validationMessagePositionTop","applyNewValidation","id","size"]);const{validationRedesignOptIn:K}=r(c),Q=P(J),[U,X]=t(null),[Y,Z]=t(!1),ee=o(O()),ie=C||ee.current,ne=N?`${ie}-hint`:void 0;l((()=>{U&&E&&Array.from(U.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[U,E]);let re;re=I&&!k?"right":k||"left";const{validationId:te,fieldHelpId:oe,ariaDescribedBy:le}=w({id:ie,validationRedesignOptIn:!0,error:R,warning:q,info:B,fieldHelp:z}),ae=(V?[le,ne]:[ne,le]).filter(Boolean).join(" "),se=()=>R||q?e(n,{children:[i(h,{error:R,warning:q,validationId:te,validationMessagePositionTop:V,isLarge:"large"===$}),i(y,{warning:!(R||!q)})]}):null;return W?e(a,M(D({ref:X,"data-component":"fieldset",id:ie,"aria-describedby":ae||void 0},J,Q),{children:[S&&i(s,{align:re,isRequired:E,isDisabled:G,"data-element":"legend","data-role":"legend",isLarge:"large"===$,children:S}),N&&i(j,{id:ne,isDisabled:G,align:re,isLarge:"large"===$,children:N}),e(b,{position:"relative",mt:1,children:[V&&se(),H,!V&&se()]})]})):i(u,{blockGroupBehaviour:L,children:e(a,M(D({ref:X,"data-component":"fieldset",id:ie,"aria-describedby":le||void 0},J,Q),{children:[S&&i(m.Consumer,{children:({onMouseEnter:n,onMouseLeave:r})=>e(s,M(D({onMouseEnter:n,onMouseLeave:r,inline:I,width:_,align:re,rightPadding:A},F),{"data-element":"legend","data-role":"legend",isRequired:E,isDisabled:G,children:[S,!K&&(R||q||B?i(d,{"aria-hidden":"true",children:i(p,{error:R,warning:q,info:B,tooltipFlipOverrides:["top","bottom"]})}):T?i(d,M(D({},{onFocus:()=>Z(!0),onBlur:()=>Z(!1)}),{children:i(f,{isFocused:Y,children:T})})):null)]}))}),!K&&i(g,{screenReaderOnly:!0,id:te,children:R||q||B}),e(b,{display:"flex",flexDirection:"column",mt:I?0:1,children:[H,z&&i(v,{id:oe,children:z})]})]}))})};export{S as default};
|
|
@@ -11,6 +11,7 @@ export type StyledLegendProps = {
|
|
|
11
11
|
rightPadding?: 1 | 2;
|
|
12
12
|
isRequired?: boolean;
|
|
13
13
|
isDisabled?: boolean;
|
|
14
|
+
isLarge?: boolean;
|
|
14
15
|
};
|
|
15
16
|
export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
|
|
16
17
|
export declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i,{css as
|
|
1
|
+
import i,{css as e}from"styled-components";import{margin as t}from"styled-system";import n from"../../style/themes/apply-base-theme.js";const o=i.fieldset.attrs(n).withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-9fe88181-0"})(["margin:0;margin-bottom:var(--fieldSpacing);"," border:none;padding:0;min-width:0;min-inline-size:0;",""],t,(({width:i})=>i&&`width: ${i};`)),a=i.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-9fe88181-1"})(["display:flex;align-items:center;padding:0;line-height:24px;font-weight:var(--fontWeights500);color:var(--colorsUtilityYin090);"," "," "," ",";"," ",""],(({isLarge:i})=>i&&e(["font-size:var(--fontSizes200);"])),(({isRequired:i})=>i&&e(['::after{content:"*";line-height:24px;color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);position:relative;top:1px;}'])),(({isDisabled:i})=>i&&e(["color:var(--colorsUtilityYin030);::after{color:var(--colorsUtilityYin030);}"])),(({align:i,inline:t})=>i&&e(["text-align:",";justify-content:",";",""],i,"right"===i?"flex-end":"flex-start",!t&&e(["width:-moz-available;"]))),(({inline:i,width:t,rightPadding:n})=>i&&e(["float:left;box-sizing:border-box;margin:0;",";padding-right:",";"],t&&`width: ${t}%`,1===n?"var(--spacing100)":"var(--spacing200)")),t),l=i.div.withConfig({displayName:"fieldset.style__StyledIconWrapper",componentId:"sc-9fe88181-2"})(["margin-left:var(--spacing050);"]);export{o as StyledFieldset,l as StyledIconWrapper,a as StyledLegend};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as t}from"styled-components";import{space as i}from"styled-system";import o from"../../style/themes/apply-base-theme.js";const m=e.div.attrs(o).withConfig({displayName:"form-field.style__FormFieldStyle",componentId:"sc-
|
|
1
|
+
import e,{css as t}from"styled-components";import{space as i}from"styled-system";import o from"../../style/themes/apply-base-theme.js";const m=e.div.attrs(o).withConfig({displayName:"form-field.style__FormFieldStyle",componentId:"sc-ec2b28a0-0"})(["position:relative;margin-bottom:var(--fieldSpacing);& + &{margin-top:16px;}&&&{","}"],i),l=e.div.withConfig({displayName:"form-field.style__FieldLineStyle",componentId:"sc-ec2b28a0-1"})(["",""],(({inline:e,maxWidth:i})=>t(["display:",";",""],e?"flex":"block",i&&`max-width: ${i};`)));export{l as FieldLineStyle,m as default};
|
|
@@ -20,6 +20,8 @@ export interface HintTextProps {
|
|
|
20
20
|
marginTop?: string;
|
|
21
21
|
/** Max width for the hint text */
|
|
22
22
|
maxWidth?: string;
|
|
23
|
+
/** Set large font-size */
|
|
24
|
+
isLarge?: boolean;
|
|
23
25
|
}
|
|
24
|
-
export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, }: HintTextProps) => React.JSX.Element | null;
|
|
26
|
+
export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, isLarge, }: HintTextProps) => React.JSX.Element | null;
|
|
25
27
|
export default HintText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{useContext as t}from"react";import n from"./hint-text.style.js";import a from"../../components/carbon-provider/__internal__/new-validation.context.js";const r=({align:r,children:o,fontWeight:e,id:m,isComponentInline:s=!1,isDarkBackground:d=!1,isDisabled:l=!1,marginBottom:g="var(--spacing100)",marginTop:p="var(--spacing000)",maxWidth:c,isLarge:h})=>{const{validationRedesignOptIn:f}=t(a);return s&&!f?null:i(n,{align:r,"data-element":"input-hint","data-role":"hint-text",fontWeight:e,id:m,isDarkBackground:d,isDisabled:l,marginBottom:g,marginTop:p,maxWidth:c,isLarge:h,children:o})};export{r as HintText,r as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as i}from"styled-components";const o=t.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-
|
|
1
|
+
import t,{css as i}from"styled-components";const o=t.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-92b90b9-0"})(["display:flex;align-items:center;font-size:14px;"," "," margin-bottom:",";margin-top:",";"," "," ",' ::after{content:" ";}'],(({isLarge:t})=>t&&i(["font-size:var(--fontSizes200);"])),(({align:t})=>i(["justify-content:",";"],"right"!==t?"flex-start":"flex-end")),(({marginBottom:t})=>t),(({marginTop:t})=>t),(({isDarkBackground:t,isDisabled:o})=>i(["color:",";"],((t,i)=>t?"var(--colorsUtilityYang080)":i?"var(--colorsUtilityYin030)":"var(--colorsUtilityYin055)")(t,o))),(({fontWeight:t})=>t&&i(["font-weight:",";"],t)),(({maxWidth:t})=>t&&i(["max-width:",";"],t)));export{o as default};
|
|
@@ -30,6 +30,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
|
|
|
30
30
|
/** Whether this component is shown against a dark background */
|
|
31
31
|
isDarkBackground?: boolean;
|
|
32
32
|
}
|
|
33
|
-
export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
|
|
34
|
-
declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
|
|
33
|
+
export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element;
|
|
34
|
+
declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element>;
|
|
35
35
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useState as n,useContext as t,useRef as i}from"react";import{Help as l}from"../../components/help/help.component.js";import a,{StyledLabelContainer as c}from"./label.style.js";import{ValidationIcon as
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useState as n,useContext as t,useRef as i}from"react";import{Help as l}from"../../components/help/help.component.js";import a,{StyledLabelContainer as c}from"./label.style.js";import{ValidationIcon as s}from"../validations/validation-icon.component.js";import p from"./icon-wrapper.style.js";import{InputContext as u}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as d}from"../input-behaviour/input-group-behaviour.component.js";import b from"../utils/helpers/guid/index.js";function m(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(r){m(e,r,o[r])}))}return e}function g(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})),e}const h=({align:o,as:m="label",children:h,disabled:O,error:j,help:y,helpIcon:w,htmlFor:v,info:P,inline:I,isDarkBackground:k=!1,isRequired:D,labelId:M,pr:E,pl:F,tooltipId:L,useValidationIcon:S=!0,validationIconId:x,warning:B,width:q=30,className:N,"aria-label":R,isLarge:V})=>{const[$,z]=n(!1),{onMouseEnter:A,onMouseLeave:C}=t(u),{onMouseEnter:G,onMouseLeave:H}=t(d),J=i(b());let K;return K=I&&!o?"right":o||"left",e(c,{"data-role":"label-container",id:`label-container-${null!=M?M:J.current}`,align:K,inline:I,width:q,pr:E,pl:F,className:N,children:[r(a,g(f({"data-element":"label",disabled:O,id:M},"label"===m?{htmlFor:v}:{}),{onMouseEnter:()=>{A&&A(),G&&G()},onMouseLeave:()=>{C&&C(),H&&H()},isRequired:D,as:m,"aria-label":R,isDarkBackground:k,isLarge:V,children:h})),(()=>{const e={onFocus:()=>z(!0),onBlur:()=>z(!1)};if(S&&(({error:e,warning:r,info:o,disabled:n})=>!n&&"string"==typeof(e||r||o))({error:j,warning:B,info:P,disabled:O})){const e=(({error:e,warning:r,info:o,inline:n})=>(e||r||o)&&n?"top":"right")({error:j,warning:B,info:P,inline:I});return r(p,{children:r(s,{tooltipId:x,error:j,warning:B,info:P,tooltipPosition:e,tooltipFlipOverrides:["top","bottom"]})})}return y&&r(p,g(f({},e),{children:r(l,{tooltipId:L,type:w,isFocused:$,children:y})}))})()]})};var O=o.memo(h);export{h as Label,O as default};
|
|
@@ -5,6 +5,8 @@ export interface StyledLabelProps {
|
|
|
5
5
|
isRequired?: boolean;
|
|
6
6
|
/** Flag to determine whether to use colours for dark backgrounds */
|
|
7
7
|
isDarkBackground?: boolean;
|
|
8
|
+
/** Set large font-size */
|
|
9
|
+
isLarge?: boolean;
|
|
8
10
|
}
|
|
9
11
|
declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
|
|
10
12
|
export interface StyledLabelContainerProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i,{css as t}from"styled-components";const
|
|
1
|
+
import i,{css as t}from"styled-components";const e=i.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-e75e7420-0"})([""," display:block;font-weight:var(--fontWeights500);"," "," ",""],(({isDarkBackground:i})=>t(["color:",";"],i?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isLarge:i})=>i&&t(["font-size:var(--fontSizes200);"])),(({isRequired:i})=>i&&t(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:i})=>i&&t(["color:var(--colorsUtilityYin030);"]))),a=i.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-e75e7420-1"})(["display:flex;align-items:center;margin-bottom:8px;"," ",""],(({align:i})=>t(["justify-content:",";"],"right"!==i?"flex-start":"flex-end")),(({inline:i,pr:e,pl:a,width:o})=>i&&t(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],e&&t(["padding-right:var(",");"],1===e?"--spacing100":"--spacing200"),a&&t(["padding-left:var(",");"],1===a?"--spacing100":"--spacing200"),o)));export{a as StyledLabelContainer,e as default};
|
|
@@ -13,6 +13,8 @@ export interface ValidationMessageProps extends TagProps {
|
|
|
13
13
|
isDarkBackground?: boolean;
|
|
14
14
|
/** Render the validation message above the input */
|
|
15
15
|
validationMessagePositionTop?: boolean;
|
|
16
|
+
/** Set large font-size */
|
|
17
|
+
isLarge?: boolean;
|
|
16
18
|
}
|
|
17
|
-
declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, "data-element": dataElement, "data-role": dataRole, validationMessagePositionTop, }: ValidationMessageProps) => React.JSX.Element | null;
|
|
19
|
+
declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, "data-element": dataElement, "data-role": dataRole, validationMessagePositionTop, isLarge, }: ValidationMessageProps) => React.JSX.Element | null;
|
|
18
20
|
export default ValidationMessage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import"react";import t from"./validation-message.style.js";import r from"../utils/helpers/tags/tags.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({error:o,validationId:a,warning:i,isDarkBackground:s,"data-element":c,"data-role":l="validation-message",validationMessagePositionTop:p})=>{const
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import"react";import t from"./validation-message.style.js";import r from"../utils/helpers/tags/tags.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({error:o,validationId:a,warning:i,isDarkBackground:s,"data-element":c,"data-role":l="validation-message",validationMessagePositionTop:p,isLarge:u})=>{const g=o||i;return"string"==typeof g?e(t,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({id:a,isWarning:!(o||!i),isDarkBackground:s},r("validation-message",{"data-element":c,"data-role":l})),f=null!=(f={validationMessagePositionTop:p,isLarge:u,children:g})?f:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(f)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(f)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(f,e))})),b)):null;var b,f};export{o as default};
|
|
@@ -2,6 +2,7 @@ interface StyledValidationMessageProps {
|
|
|
2
2
|
isWarning?: boolean;
|
|
3
3
|
isDarkBackground?: boolean;
|
|
4
4
|
validationMessagePositionTop?: boolean;
|
|
5
|
+
isLarge?: boolean;
|
|
5
6
|
}
|
|
6
7
|
declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
|
|
7
8
|
export default StyledValidationMessage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as a}from"styled-components";const t=o.p.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-
|
|
1
|
+
import o,{css as a}from"styled-components";const t=o.p.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-3359a809-0"})(["",""],(({isWarning:o,isDarkBackground:t,validationMessagePositionTop:i,isLarge:e})=>a(["color:",";font-weight:",";font-size:",";margin:0px;margin-",":8px;"],o?"var(--tempColorsSemanticCaution600)":t?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)",o?"normal":"500",e?"var(--fontSizes200)":"var(--fontSizes100)",i?"bottom":"top")));export{t as default};
|
|
@@ -12,5 +12,5 @@ interface StyledFieldsetProps extends FieldsetProps {
|
|
|
12
12
|
inline?: boolean;
|
|
13
13
|
size?: "small" | "medium" | "large";
|
|
14
14
|
}
|
|
15
|
-
export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, ...rest }: FieldsetProps) => import("react").JSX.Element, any, StyledFieldsetProps, never>;
|
|
15
|
+
export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, size, ...rest }: FieldsetProps) => import("react").JSX.Element, any, StyledFieldsetProps, never>;
|
|
16
16
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
|
|
1
|
+
declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, isLarge, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
|
|
2
2
|
export default StyledLabel;
|
|
@@ -7,6 +7,8 @@ interface CharacterCountProps {
|
|
|
7
7
|
isDebouncedOverLimit?: boolean;
|
|
8
8
|
isOverLimit: boolean;
|
|
9
9
|
visuallyHiddenHintId?: string;
|
|
10
|
+
/** Set large font-size */
|
|
11
|
+
isLarge?: boolean;
|
|
10
12
|
}
|
|
11
|
-
declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, }: CharacterCountProps) => React.JSX.Element;
|
|
13
|
+
declare const CharacterCount: ({ ariaLive, value, debouncedValue, limit, isDebouncedOverLimit, isOverLimit, visuallyHiddenHintId, isLarge, }: CharacterCountProps) => React.JSX.Element;
|
|
12
14
|
export default CharacterCount;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var a=require("./character-count.style.js"),r=require("../../hooks/__internal__/useLocale/useLocale.js");exports.default=({ariaLive:t="off",value:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var a=require("./character-count.style.js"),r=require("../../hooks/__internal__/useLocale/useLocale.js");exports.default=({ariaLive:t="off",value:i,debouncedValue:c=i,limit:l,isDebouncedOverLimit:n,isOverLimit:u,visuallyHiddenHintId:d,isLarge:o})=>{const s=+l-+i,h=+i-+l,v=+l-+c,y=c-+l,C=r.default(),m=(e,a)=>new Intl.NumberFormat(a).format(e);return e.jsxs(a.StyledCharacterCountWrapper,{children:[e.jsx(a.VisuallyHiddenHint,{"data-element":"visually-hidden-hint","data-role":"visually-hidden-hint",id:d,children:C.characterCount.visuallyHiddenHint(m(l,C.locale()))}),e.jsx(a.StyledCharacterCount,{"aria-hidden":"true",isOverLimit:u,"data-element":"character-count","data-role":"character-count",isLarge:o,children:u?C.characterCount.tooManyCharacters(h,m(h,C.locale())):C.characterCount.charactersLeft(s,m(s,C.locale()))}),e.jsx(a.VisuallyHiddenCharacterCount,{"data-element":"visually-hidden-character-count","data-role":"visually-hidden-character-count","aria-live":t,children:n?C.characterCount.tooManyCharacters(y,m(y,C.locale())):C.characterCount.charactersLeft(v,m(v,C.locale()))})]})};
|
|
@@ -3,6 +3,7 @@ declare const StyledCharacterCount: import("styled-components").StyledComponent<
|
|
|
3
3
|
theme: object;
|
|
4
4
|
} & {
|
|
5
5
|
isOverLimit: boolean;
|
|
6
|
+
isLarge?: boolean;
|
|
6
7
|
}, "theme">;
|
|
7
8
|
declare const VisuallyHiddenCharacterCount: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
9
|
declare const VisuallyHiddenHint: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("styled-components"),e=require("../../style/themes/apply-base-theme.js"),a=require("../../style/utils/visually-hidden.js");function r(t){return t&&t.__esModule?t:{default:t}}var i=r(t);const n=i.default.div.withConfig({displayName:"character-count.style__StyledCharacterCountWrapper",componentId:"sc-
|
|
1
|
+
"use strict";var t=require("styled-components"),e=require("../../style/themes/apply-base-theme.js"),a=require("../../style/utils/visually-hidden.js");function r(t){return t&&t.__esModule?t:{default:t}}var i=r(t);const n=i.default.div.withConfig({displayName:"character-count.style__StyledCharacterCountWrapper",componentId:"sc-f39231b-0"})([""]),s=i.default.div.attrs(e.default).withConfig({displayName:"character-count.style__StyledCharacterCount",componentId:"sc-f39231b-1"})(["text-align:left;font-size:var(--fontSizes100);margin-top:var(--spacing050);margin-bottom:var(--spacing050);color:",";"," ",""],(({isOverLimit:t})=>t?"var(--colorsSemanticNegative500)":"var(--colorsUtilityYin055)"),(({isLarge:e})=>e&&t.css(["font-size:var(--fontSizes200);"])),(({isOverLimit:e})=>e&&t.css(["font-weight:var(--fontWeights500);"]))),o=i.default.div.withConfig({displayName:"character-count.style__VisuallyHiddenCharacterCount",componentId:"sc-f39231b-2"})(['::after{content:" ";}',""],a.default),l=i.default.div.withConfig({displayName:"character-count.style__VisuallyHiddenHint",componentId:"sc-f39231b-3"})(['::before{content:" ";}::after{content:" ";}',""],a.default);exports.StyledCharacterCount=s,exports.StyledCharacterCountWrapper=n,exports.VisuallyHiddenCharacterCount=o,exports.VisuallyHiddenHint=l;
|
|
@@ -42,6 +42,8 @@ export interface FieldsetProps extends MarginProps {
|
|
|
42
42
|
validationMessagePositionTop?: boolean;
|
|
43
43
|
/** Apply new validation styles */
|
|
44
44
|
applyNewValidation?: boolean;
|
|
45
|
+
/** Set the size of the component */
|
|
46
|
+
size?: "small" | "medium" | "large";
|
|
45
47
|
}
|
|
46
|
-
declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, ...rest }: FieldsetProps) => React.JSX.Element;
|
|
48
|
+
declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, size, ...rest }: FieldsetProps) => React.JSX.Element;
|
|
47
49
|
export default Fieldset;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("./fieldset.style.js"),n=require("../validations/validation-icon.component.js"),t=require("../../components/carbon-provider/__internal__/new-validation.context.js"),o=require("../input-behaviour/input-group-behaviour.component.js"),l=require("../../components/help/help.component.js"),s=require("../../components/typography/typography.component.js"),a=require("../../components/box/box.component.js"),d=require("../../components/textbox/textbox.style.js"),u=require("../validation-message/validation-message.component.js"),c=require("../hint-text/hint-text.component.js"),p=require("../field-help/field-help.component.js"),g=require("../utils/helpers/guid/index.js"),f=require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js");require("../../style/utils/filter-styled-system-padding-props.js");var y=require("../../style/utils/filter-styled-system-margin-props.js");function b(e,r,i){return r in e?Object.defineProperty(e,r,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[r]=i,e}function j(e){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{},n=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter((function(e){return Object.getOwnPropertyDescriptor(i,e).enumerable})))),n.forEach((function(r){b(e,r,i[r])}))}return e}function h(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);r.push.apply(r,i)}return r}(Object(r)).forEach((function(i){Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(r,i))})),e}exports.default=b=>{var{legend:x,children:m,inline:v=!1,legendWidth:O,legendAlign:q,legendSpacing:w=2,error:P,warning:S,info:I,isRequired:D,blockGroupBehaviour:H,legendMargin:M={},isDisabled:_,labelHelp:B,fieldHelp:R,inputHint:k,validationMessagePositionTop:A,applyNewValidation:E=!1,id:F,size:L}=b,G=function(e,r){if(null==e)return{};var i,n,t=function(e,r){if(null==e)return{};var i,n,t={},o=Object.keys(e);for(n=0;n<o.length;n++)i=o[n],r.indexOf(i)>=0||(t[i]=e[i]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)i=o[n],r.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(t[i]=e[i])}return t}(b,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","labelHelp","fieldHelp","inputHint","validationMessagePositionTop","applyNewValidation","id","size"]);const{validationRedesignOptIn:T}=r.useContext(t.default),W=y.default(G),[C,V]=r.useState(null),[z,N]=r.useState(!1),$=r.useRef(g.default()),J=F||$.current,K=k?`${J}-hint`:void 0;r.useEffect((()=>{C&&D&&Array.from(C.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[C,D]);const Q=()=>{if(P||S||I)return e.jsx(i.StyledIconWrapper,{"aria-hidden":"true",children:e.jsx(n.ValidationIcon,{error:P,warning:S,info:I,tooltipFlipOverrides:["top","bottom"]})});const r={onFocus:()=>N(!0),onBlur:()=>N(!1)};return B?e.jsx(i.StyledIconWrapper,h(j({},r),{children:e.jsx(l.Help,{isFocused:z,children:B})})):null};let U;U=v&&!q?"right":q||"left";const{validationId:X,fieldHelpId:Y,ariaDescribedBy:Z}=f.default({id:J,validationRedesignOptIn:!0,error:P,warning:S,info:I,fieldHelp:R}),ee=(A?[Z,K]:[K,Z]).filter(Boolean).join(" "),re=()=>P||S?e.jsxs(e.Fragment,{children:[e.jsx(u.default,{error:P,warning:S,validationId:X,validationMessagePositionTop:A,isLarge:"large"===L}),e.jsx(d.default,{warning:!(P||!S)})]}):null;return E?e.jsxs(i.StyledFieldset,h(j({ref:V,"data-component":"fieldset",id:J,"aria-describedby":ee||void 0},G,W),{children:[x&&e.jsx(i.StyledLegend,{align:U,isRequired:D,isDisabled:_,"data-element":"legend","data-role":"legend",isLarge:"large"===L,children:x}),k&&e.jsx(c.HintText,{id:K,isDisabled:_,align:U,isLarge:"large"===L,children:k}),e.jsxs(a.Box,{position:"relative",mt:1,children:[A&&re(),m,!A&&re()]})]})):e.jsx(o.InputGroupBehaviour,{blockGroupBehaviour:H,children:e.jsxs(i.StyledFieldset,h(j({ref:V,"data-component":"fieldset",id:J,"aria-describedby":Z||void 0},G,W),{children:[x&&e.jsx(o.InputGroupContext.Consumer,{children:({onMouseEnter:r,onMouseLeave:n})=>e.jsxs(i.StyledLegend,h(j({onMouseEnter:r,onMouseLeave:n,inline:v,width:O,align:U,rightPadding:w},M),{"data-element":"legend","data-role":"legend",isRequired:D,isDisabled:_,children:[x,!T&&Q()]}))}),!T&&e.jsx(s.Typography,{screenReaderOnly:!0,id:X,children:P||S||I}),e.jsxs(a.Box,{display:"flex",flexDirection:"column",mt:v?0:1,children:[m,R&&e.jsx(p.FieldHelp,{id:Y,children:R})]})]}))})};
|
|
@@ -11,6 +11,7 @@ export type StyledLegendProps = {
|
|
|
11
11
|
rightPadding?: 1 | 2;
|
|
12
12
|
isRequired?: boolean;
|
|
13
13
|
isDisabled?: boolean;
|
|
14
|
+
isLarge?: boolean;
|
|
14
15
|
};
|
|
15
16
|
export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
|
|
16
17
|
export declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),
|
|
1
|
+
"use strict";var e=require("styled-components"),i=require("styled-system"),t=require("../../style/themes/apply-base-theme.js");function n(e){return e&&e.__esModule?e:{default:e}}var s=n(e);const a=s.default.fieldset.attrs(t.default).withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-9fe88181-0"})(["margin:0;margin-bottom:var(--fieldSpacing);"," border:none;padding:0;min-width:0;min-inline-size:0;",""],i.margin,(({width:e})=>e&&`width: ${e};`)),l=s.default.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-9fe88181-1"})(["display:flex;align-items:center;padding:0;line-height:24px;font-weight:var(--fontWeights500);color:var(--colorsUtilityYin090);"," "," "," ",";"," ",""],(({isLarge:i})=>i&&e.css(["font-size:var(--fontSizes200);"])),(({isRequired:i})=>i&&e.css(['::after{content:"*";line-height:24px;color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);position:relative;top:1px;}'])),(({isDisabled:i})=>i&&e.css(["color:var(--colorsUtilityYin030);::after{color:var(--colorsUtilityYin030);}"])),(({align:i,inline:t})=>i&&e.css(["text-align:",";justify-content:",";",""],i,"right"===i?"flex-end":"flex-start",!t&&e.css(["width:-moz-available;"]))),(({inline:i,width:t,rightPadding:n})=>i&&e.css(["float:left;box-sizing:border-box;margin:0;",";padding-right:",";"],t&&`width: ${t}%`,1===n?"var(--spacing100)":"var(--spacing200)")),i.margin),r=s.default.div.withConfig({displayName:"fieldset.style__StyledIconWrapper",componentId:"sc-9fe88181-2"})(["margin-left:var(--spacing050);"]);exports.StyledFieldset=a,exports.StyledIconWrapper=r,exports.StyledLegend=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),i=require("../../style/themes/apply-base-theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(e);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),i=require("../../style/themes/apply-base-theme.js");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(e);const a=s.default.div.attrs(i.default).withConfig({displayName:"form-field.style__FormFieldStyle",componentId:"sc-ec2b28a0-0"})(["position:relative;margin-bottom:var(--fieldSpacing);& + &{margin-top:16px;}&&&{","}"],t.space),d=s.default.div.withConfig({displayName:"form-field.style__FieldLineStyle",componentId:"sc-ec2b28a0-1"})(["",""],(({inline:t,maxWidth:i})=>e.css(["display:",";",""],t?"flex":"block",i&&`max-width: ${i};`)));exports.FieldLineStyle=d,exports.default=a;
|
|
@@ -20,6 +20,8 @@ export interface HintTextProps {
|
|
|
20
20
|
marginTop?: string;
|
|
21
21
|
/** Max width for the hint text */
|
|
22
22
|
maxWidth?: string;
|
|
23
|
+
/** Set large font-size */
|
|
24
|
+
isLarge?: boolean;
|
|
23
25
|
}
|
|
24
|
-
export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, }: HintTextProps) => React.JSX.Element | null;
|
|
26
|
+
export declare const HintText: ({ align, children, fontWeight, id, isComponentInline, isDarkBackground, isDisabled, marginBottom, marginTop, maxWidth, isLarge, }: HintTextProps) => React.JSX.Element | null;
|
|
25
27
|
export default HintText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("./hint-text.style.js"),n=require("../../components/carbon-provider/__internal__/new-validation.context.js");const r=({align:r,children:a,fontWeight:o,id:s,isComponentInline:d=!1,isDarkBackground:l=!1,isDisabled:u=!1,marginBottom:c="var(--spacing100)",marginTop:g="var(--spacing000)",maxWidth:p})=>{const{validationRedesignOptIn:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("./hint-text.style.js"),n=require("../../components/carbon-provider/__internal__/new-validation.context.js");const r=({align:r,children:a,fontWeight:o,id:s,isComponentInline:d=!1,isDarkBackground:l=!1,isDisabled:u=!1,marginBottom:c="var(--spacing100)",marginTop:g="var(--spacing000)",maxWidth:p,isLarge:m})=>{const{validationRedesignOptIn:x}=t.useContext(n.default);return d&&!x?null:e.jsx(i.default,{align:r,"data-element":"input-hint","data-role":"hint-text",fontWeight:o,id:s,isDarkBackground:l,isDisabled:u,marginBottom:c,marginTop:g,maxWidth:p,isLarge:m,children:a})};exports.HintText=r,exports.default=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components");function e(t){return t&&t.__esModule?t:{default:t}}const i=e(t).default.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components");function e(t){return t&&t.__esModule?t:{default:t}}const i=e(t).default.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-92b90b9-0"})(["display:flex;align-items:center;font-size:14px;"," "," margin-bottom:",";margin-top:",";"," "," ",' ::after{content:" ";}'],(({isLarge:e})=>e&&t.css(["font-size:var(--fontSizes200);"])),(({align:e})=>t.css(["justify-content:",";"],"right"!==e?"flex-start":"flex-end")),(({marginBottom:t})=>t),(({marginTop:t})=>t),(({isDarkBackground:e,isDisabled:i})=>t.css(["color:",";"],((t,e)=>t?"var(--colorsUtilityYang080)":e?"var(--colorsUtilityYin030)":"var(--colorsUtilityYin055)")(e,i))),(({fontWeight:e})=>e&&t.css(["font-weight:",";"],e)),(({maxWidth:e})=>e&&t.css(["max-width:",";"],e)));exports.default=i;
|
|
@@ -30,6 +30,6 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
|
|
|
30
30
|
/** Whether this component is shown against a dark background */
|
|
31
31
|
isDarkBackground?: boolean;
|
|
32
32
|
}
|
|
33
|
-
export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element;
|
|
34
|
-
declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: LabelProps) => React.JSX.Element>;
|
|
33
|
+
export declare const Label: ({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element;
|
|
34
|
+
declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, isLarge, }: LabelProps) => React.JSX.Element>;
|
|
35
35
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../components/help/help.component.js"),n=require("./label.style.js"),o=require("../validations/validation-icon.component.js"),i=require("./icon-wrapper.style.js"),l=require("../input-behaviour/input-behaviour.component.js"),a=require("../input-behaviour/input-group-behaviour.component.js"),u=require("../utils/helpers/guid/index.js");function s(e){return e&&e.__esModule?e:{default:e}}function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){c(e,r,t[r])}))}return e}function d(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const b=({align:s,as:c="label",children:b,disabled:f,error:j,help:g,helpIcon:h,htmlFor:y,info:O,inline:m,isDarkBackground:v=!1,isRequired:w,labelId:x,pr:P,pl:q,tooltipId:I,useValidationIcon:M=!0,validationIconId:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../components/help/help.component.js"),n=require("./label.style.js"),o=require("../validations/validation-icon.component.js"),i=require("./icon-wrapper.style.js"),l=require("../input-behaviour/input-behaviour.component.js"),a=require("../input-behaviour/input-group-behaviour.component.js"),u=require("../utils/helpers/guid/index.js");function s(e){return e&&e.__esModule?e:{default:e}}function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){c(e,r,t[r])}))}return e}function d(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const b=({align:s,as:c="label",children:b,disabled:f,error:j,help:g,helpIcon:h,htmlFor:y,info:O,inline:m,isDarkBackground:v=!1,isRequired:w,labelId:x,pr:P,pl:q,tooltipId:I,useValidationIcon:M=!0,validationIconId:L,warning:k,width:D=30,className:S,"aria-label":C,isLarge:E})=>{const[F,_]=r.useState(!1),{onMouseEnter:B,onMouseLeave:R}=r.useContext(l.InputContext),{onMouseEnter:N,onMouseLeave:V}=r.useContext(a.InputGroupContext),G=r.useRef(u.default());let H;return H=m&&!s?"right":s||"left",e.jsxs(n.StyledLabelContainer,{"data-role":"label-container",id:`label-container-${null!=x?x:G.current}`,align:H,inline:m,width:D,pr:P,pl:q,className:S,children:[e.jsx(n.default,d(p({"data-element":"label",disabled:f,id:x},"label"===c?{htmlFor:y}:{}),{onMouseEnter:()=>{B&&B(),N&&N()},onMouseLeave:()=>{R&&R(),V&&V()},isRequired:w,as:c,"aria-label":C,isDarkBackground:v,isLarge:E,children:b})),(()=>{const r={onFocus:()=>_(!0),onBlur:()=>_(!1)};if(M&&(({error:e,warning:r,info:t,disabled:n})=>!n&&"string"==typeof(e||r||t))({error:j,warning:k,info:O,disabled:f})){const r=(({error:e,warning:r,info:t,inline:n})=>(e||r||t)&&n?"top":"right")({error:j,warning:k,info:O,inline:m});return e.jsx(i.default,{children:e.jsx(o.ValidationIcon,{tooltipId:L,error:j,warning:k,info:O,tooltipPosition:r,tooltipFlipOverrides:["top","bottom"]})})}return g&&e.jsx(i.default,d(p({},r),{children:e.jsx(t.Help,{tooltipId:I,type:h,isFocused:F,children:g})}))})()]})};var f=s(r).default.memo(b);exports.Label=b,exports.default=f;
|
|
@@ -5,6 +5,8 @@ export interface StyledLabelProps {
|
|
|
5
5
|
isRequired?: boolean;
|
|
6
6
|
/** Flag to determine whether to use colours for dark backgrounds */
|
|
7
7
|
isDarkBackground?: boolean;
|
|
8
|
+
/** Set large font-size */
|
|
9
|
+
isLarge?: boolean;
|
|
8
10
|
}
|
|
9
11
|
declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
|
|
10
12
|
export interface StyledLabelContainerProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function t(e){return e&&e.__esModule?e:{default:e}}var i=t(e);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function t(e){return e&&e.__esModule?e:{default:e}}var i=t(e);const s=i.default.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-e75e7420-0"})([""," display:block;font-weight:var(--fontWeights500);"," "," ",""],(({isDarkBackground:t})=>e.css(["color:",";"],t?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isLarge:t})=>t&&e.css(["font-size:var(--fontSizes200);"])),(({isRequired:t})=>t&&e.css(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:t})=>t&&e.css(["color:var(--colorsUtilityYin030);"]))),a=i.default.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-e75e7420-1"})(["display:flex;align-items:center;margin-bottom:8px;"," ",""],(({align:t})=>e.css(["justify-content:",";"],"right"!==t?"flex-start":"flex-end")),(({inline:t,pr:i,pl:s,width:a})=>t&&e.css(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],i&&e.css(["padding-right:var(",");"],1===i?"--spacing100":"--spacing200"),s&&e.css(["padding-left:var(",");"],1===s?"--spacing100":"--spacing200"),a)));exports.StyledLabelContainer=a,exports.default=s;
|
|
@@ -13,6 +13,8 @@ export interface ValidationMessageProps extends TagProps {
|
|
|
13
13
|
isDarkBackground?: boolean;
|
|
14
14
|
/** Render the validation message above the input */
|
|
15
15
|
validationMessagePositionTop?: boolean;
|
|
16
|
+
/** Set large font-size */
|
|
17
|
+
isLarge?: boolean;
|
|
16
18
|
}
|
|
17
|
-
declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, "data-element": dataElement, "data-role": dataRole, validationMessagePositionTop, }: ValidationMessageProps) => React.JSX.Element | null;
|
|
19
|
+
declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, "data-element": dataElement, "data-role": dataRole, validationMessagePositionTop, isLarge, }: ValidationMessageProps) => React.JSX.Element | null;
|
|
18
20
|
export default ValidationMessage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("./validation-message.style.js"),t=require("../utils/helpers/tags/tags.js");function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}exports.default=({error:a,validationId:o,warning:i,isDarkBackground:s,"data-element":c,"data-role":l="validation-message",validationMessagePositionTop:u,isLarge:p})=>{const g=a||i;return"string"==typeof g?e.jsx(r.default,(b=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){n(e,r,t[r])}))}return e}({id:o,isWarning:!(a||!i),isDarkBackground:s},t.default("validation-message",{"data-element":c,"data-role":l})),d=null!=(d={validationMessagePositionTop:u,isLarge:p,children:g})?d:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(d)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(d)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(d,e))})),b)):null;var b,d};
|
|
@@ -2,6 +2,7 @@ interface StyledValidationMessageProps {
|
|
|
2
2
|
isWarning?: boolean;
|
|
3
3
|
isDarkBackground?: boolean;
|
|
4
4
|
validationMessagePositionTop?: boolean;
|
|
5
|
+
isLarge?: boolean;
|
|
5
6
|
}
|
|
6
7
|
declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
|
|
7
8
|
export default StyledValidationMessage;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function t(e){return e&&e.__esModule?e:{default:e}}const o=t(e).default.p.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components");function t(e){return e&&e.__esModule?e:{default:e}}const o=t(e).default.p.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-3359a809-0"})(["",""],(({isWarning:t,isDarkBackground:o,validationMessagePositionTop:a,isLarge:i})=>{const s=o?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)";return e.css(["color:",";font-weight:",";font-size:",";margin:0px;margin-",":8px;"],t?"var(--tempColorsSemanticCaution600)":s,t?"normal":"500",i?"var(--fontSizes200)":"var(--fontSizes100)",a?"bottom":"top")}));exports.default=o;
|
|
@@ -12,5 +12,5 @@ interface StyledFieldsetProps extends FieldsetProps {
|
|
|
12
12
|
inline?: boolean;
|
|
13
13
|
size?: "small" | "medium" | "large";
|
|
14
14
|
}
|
|
15
|
-
export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, ...rest }: FieldsetProps) => import("react").JSX.Element, any, StyledFieldsetProps, never>;
|
|
15
|
+
export declare const StyledFieldset: import("styled-components").StyledComponent<({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, fieldHelp, inputHint, validationMessagePositionTop, applyNewValidation, id, size, ...rest }: FieldsetProps) => import("react").JSX.Element, any, StyledFieldsetProps, never>;
|
|
16
16
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
|
|
1
|
+
declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, isLarge, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
|
|
2
2
|
export default StyledLabel;
|