carbon-react 155.13.0 → 156.0.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__/checkable-input/checkable-input.component.d.ts +0 -5
- package/esm/__internal__/checkable-input/checkable-input.component.js +1 -1
- package/esm/__internal__/fieldset/fieldset.component.d.ts +1 -6
- package/esm/__internal__/fieldset/fieldset.component.js +1 -1
- package/esm/__internal__/fieldset/fieldset.style.d.ts +0 -6
- package/esm/__internal__/fieldset/fieldset.style.js +1 -1
- package/esm/__internal__/form-field/form-field.component.d.ts +1 -6
- package/esm/__internal__/form-field/form-field.component.js +1 -1
- package/esm/__internal__/input/input.component.d.ts +0 -5
- package/esm/__internal__/input/input.component.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 +0 -4
- package/esm/__internal__/label/label.style.js +1 -1
- package/esm/components/badge/badge.component.d.ts +15 -8
- package/esm/components/badge/badge.component.js +1 -1
- package/esm/components/badge/badge.style.d.ts +6 -5
- package/esm/components/badge/badge.style.js +1 -1
- package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts +1 -6
- package/esm/components/checkbox/checkbox-group/checkbox-group.component.js +1 -1
- package/esm/components/checkbox/checkbox.component.js +1 -1
- package/esm/components/date-range/date-range.component.d.ts +1 -6
- package/esm/components/date-range/date-range.component.js +1 -1
- package/esm/components/dialog/dialog.component.js +1 -1
- package/esm/components/dialog-full-screen/dialog-full-screen.component.js +1 -1
- package/esm/components/fieldset/fieldset.component.d.ts +1 -6
- package/esm/components/fieldset/fieldset.component.js +1 -1
- package/esm/components/fieldset/fieldset.style.d.ts +0 -7
- package/esm/components/fieldset/fieldset.style.js +1 -1
- package/esm/components/file-input/file-input.component.d.ts +0 -5
- package/esm/components/file-input/file-input.component.js +1 -1
- package/esm/components/inline-inputs/inline-inputs.component.d.ts +1 -6
- package/esm/components/inline-inputs/inline-inputs.component.js +1 -1
- package/esm/components/loader/loader.component.d.ts +1 -6
- package/esm/components/loader/loader.component.js +1 -1
- package/esm/components/modal/modal.component.d.ts +1 -3
- package/esm/components/modal/modal.component.js +1 -1
- package/esm/components/numeral-date/numeral-date.component.d.ts +0 -5
- package/esm/components/numeral-date/numeral-date.component.js +1 -1
- package/esm/components/numeral-date/numeral-date.style.d.ts +1 -1
- package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts +1 -6
- package/esm/components/radio-button/radio-button-group/radio-button-group.component.js +1 -1
- package/esm/components/radio-button/radio-button.component.d.ts +1 -1
- package/esm/components/select/__internal__/select-textbox/select-textbox.component.d.ts +0 -5
- package/esm/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/esm/components/select/filterable-select/filterable-select.component.d.ts +0 -5
- package/esm/components/select/filterable-select/filterable-select.component.js +1 -1
- package/esm/components/select/multi-select/multi-select.component.d.ts +0 -5
- package/esm/components/select/multi-select/multi-select.component.js +1 -1
- package/esm/components/select/simple-select/simple-select.component.d.ts +0 -5
- package/esm/components/select/simple-select/simple-select.component.js +1 -1
- package/esm/components/switch/switch.component.js +1 -1
- package/esm/components/tabs/__internal__/tab-title/tab-title.component.js +1 -1
- package/esm/components/text-editor/text-editor.component.d.ts +0 -5
- package/esm/components/text-editor/text-editor.component.js +1 -1
- package/esm/components/textarea/textarea.component.d.ts +0 -5
- package/esm/components/textarea/textarea.component.js +1 -1
- package/esm/components/textbox/textbox.component.d.ts +0 -5
- package/esm/components/textbox/textbox.component.js +1 -1
- package/esm/components/tile-select/tile-select.style.d.ts +1 -1
- package/esm/components/time/time.component.d.ts +0 -5
- package/esm/components/time/time.component.js +1 -1
- package/esm/components/time/time.style.d.ts +1 -1
- package/esm/locales/de-de.js +1 -1
- package/esm/locales/en-gb.js +1 -1
- package/esm/locales/es-es.js +1 -1
- package/esm/locales/fr-ca.js +1 -1
- package/esm/locales/fr-fr.js +1 -1
- package/esm/locales/locale.d.ts +0 -3
- package/lib/__internal__/checkable-input/checkable-input.component.d.ts +0 -5
- package/lib/__internal__/checkable-input/checkable-input.component.js +1 -1
- package/lib/__internal__/fieldset/fieldset.component.d.ts +1 -6
- package/lib/__internal__/fieldset/fieldset.component.js +1 -1
- package/lib/__internal__/fieldset/fieldset.style.d.ts +0 -6
- package/lib/__internal__/fieldset/fieldset.style.js +1 -1
- package/lib/__internal__/form-field/form-field.component.d.ts +1 -6
- package/lib/__internal__/form-field/form-field.component.js +1 -1
- package/lib/__internal__/input/input.component.d.ts +0 -5
- package/lib/__internal__/input/input.component.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 +0 -4
- package/lib/__internal__/label/label.style.js +1 -1
- package/lib/components/badge/badge.component.d.ts +15 -8
- package/lib/components/badge/badge.component.js +1 -1
- package/lib/components/badge/badge.style.d.ts +6 -5
- package/lib/components/badge/badge.style.js +1 -1
- package/lib/components/checkbox/checkbox-group/checkbox-group.component.d.ts +1 -6
- package/lib/components/checkbox/checkbox-group/checkbox-group.component.js +1 -1
- package/lib/components/checkbox/checkbox.component.js +1 -1
- package/lib/components/date-range/date-range.component.d.ts +1 -6
- package/lib/components/date-range/date-range.component.js +1 -1
- package/lib/components/dialog/dialog.component.js +1 -1
- package/lib/components/dialog-full-screen/dialog-full-screen.component.js +1 -1
- package/lib/components/fieldset/fieldset.component.d.ts +1 -6
- package/lib/components/fieldset/fieldset.component.js +1 -1
- package/lib/components/fieldset/fieldset.style.d.ts +0 -7
- package/lib/components/fieldset/fieldset.style.js +1 -1
- package/lib/components/file-input/file-input.component.d.ts +0 -5
- package/lib/components/file-input/file-input.component.js +1 -1
- package/lib/components/inline-inputs/inline-inputs.component.d.ts +1 -6
- package/lib/components/inline-inputs/inline-inputs.component.js +1 -1
- package/lib/components/loader/loader.component.d.ts +1 -6
- package/lib/components/loader/loader.component.js +1 -1
- package/lib/components/modal/modal.component.d.ts +1 -3
- package/lib/components/modal/modal.component.js +1 -1
- package/lib/components/numeral-date/numeral-date.component.d.ts +0 -5
- package/lib/components/numeral-date/numeral-date.component.js +1 -1
- package/lib/components/numeral-date/numeral-date.style.d.ts +1 -1
- package/lib/components/radio-button/radio-button-group/radio-button-group.component.d.ts +1 -6
- package/lib/components/radio-button/radio-button-group/radio-button-group.component.js +1 -1
- package/lib/components/radio-button/radio-button.component.d.ts +1 -1
- package/lib/components/select/__internal__/select-textbox/select-textbox.component.d.ts +0 -5
- package/lib/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/lib/components/select/filterable-select/filterable-select.component.d.ts +0 -5
- package/lib/components/select/filterable-select/filterable-select.component.js +1 -1
- package/lib/components/select/multi-select/multi-select.component.d.ts +0 -5
- package/lib/components/select/multi-select/multi-select.component.js +1 -1
- package/lib/components/select/simple-select/simple-select.component.d.ts +0 -5
- package/lib/components/select/simple-select/simple-select.component.js +1 -1
- package/lib/components/switch/switch.component.js +1 -1
- package/lib/components/tabs/__internal__/tab-title/tab-title.component.js +1 -1
- package/lib/components/text-editor/text-editor.component.d.ts +0 -5
- package/lib/components/text-editor/text-editor.component.js +1 -1
- package/lib/components/textarea/textarea.component.d.ts +0 -5
- package/lib/components/textarea/textarea.component.js +1 -1
- package/lib/components/textbox/textbox.component.d.ts +0 -5
- package/lib/components/textbox/textbox.component.js +1 -1
- package/lib/components/tile-select/tile-select.style.d.ts +1 -1
- package/lib/components/time/time.component.d.ts +0 -5
- package/lib/components/time/time.component.js +1 -1
- package/lib/components/time/time.style.d.ts +1 -1
- package/lib/locales/de-de.js +1 -1
- package/lib/locales/en-gb.js +1 -1
- package/lib/locales/es-es.js +1 -1
- package/lib/locales/fr-ca.js +1 -1
- package/lib/locales/fr-fr.js +1 -1
- package/lib/locales/locale.d.ts +0 -3
- package/package.json +1 -1
|
@@ -27,11 +27,6 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
|
|
|
27
27
|
labelWidth?: number;
|
|
28
28
|
/** Flag to configure component as mandatory */
|
|
29
29
|
required?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* [Legacy] Flag to configure component as optional.
|
|
32
|
-
* @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
|
|
33
|
-
*/
|
|
34
|
-
isOptional?: boolean;
|
|
35
30
|
/** If true the label switches position with the input */
|
|
36
31
|
reverse?: boolean;
|
|
37
32
|
/** Size of the component */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import n,{useRef as l}from"react";import{StyledCheckableInputWrapper as i,StyledCheckableInput as t}from"./checkable-input.style.js";import{InputBehaviour as a}from"../input-behaviour/input-behaviour.component.js";import o from"../form-field/form-field.component.js";import c from"./hidden-checkable-input.component.js";import d from"../utils/helpers/guid/index.js";import
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import n,{useRef as l}from"react";import{StyledCheckableInputWrapper as i,StyledCheckableInput as t}from"./checkable-input.style.js";import{InputBehaviour as a}from"../input-behaviour/input-behaviour.component.js";import o from"../form-field/form-field.component.js";import c from"./hidden-checkable-input.component.js";import d from"../utils/helpers/guid/index.js";import u from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function b(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function p(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},l=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),l.forEach((function(r){b(e,r,n[r])}))}return e}const s=n.forwardRef(((n,b)=>{var{ariaLabelledBy:s,autoFocus:f,checked:y,children:m,disabled:h,loading:O,error:g,fieldHelp:j,fieldHelpInline:v,info:I,id:k,type:w,value:H,inputWidth:P,label:B,labelHelp:D,labelInline:S=!0,labelSpacing:F=1,labelWidth:W,name:x,onBlur:q,onChange:C,onFocus:L,required:_,reverse:E=!1,validationOnLabel:A,warning:R,isDarkBackground:N=!1}=n,V=function(e,r){if(null==e)return{};var n,l,i=function(e,r){if(null==e)return{};var n,l,i={},t=Object.keys(e);for(l=0;l<t.length;l++)n=t[l],r.indexOf(n)>=0||(i[n]=e[n]);return i}(e,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(l=0;l<t.length;l++)n=t[l],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(n,["ariaLabelledBy","autoFocus","checked","children","disabled","loading","error","fieldHelp","fieldHelpInline","info","id","type","value","inputWidth","label","labelHelp","labelInline","labelSpacing","labelWidth","name","onBlur","onChange","onFocus","required","reverse","validationOnLabel","warning","isDarkBackground"]);const{current:z}=l(k||d()),{labelId:G,fieldHelpId:J,validationId:K,ariaDescribedBy:M}=u({id:z,error:g,warning:R,info:I,label:B,fieldHelp:j}),Q={disabled:h,loading:O,error:g,fieldHelp:j,fieldHelpInline:v,fieldHelpId:J,id:z,info:I,label:B,labelHelp:D,labelHelpIcon:"info",labelId:G,labelInline:S,labelSpacing:F,reverse:E,warning:R,validationIconId:K,isRequired:_,useValidationIcon:A},T=p({ariaDescribedBy:M,"aria-labelledby":s,"aria-invalid":!!g,autoFocus:f,checked:y,disabled:h,id:z,type:w,value:H,name:x,onBlur:q,onChange:C,onFocus:L,required:_,ref:b,validationIconId:K},V);return e(i,{disabled:h,fieldHelpInline:v,inputWidth:P,labelWidth:W,labelInline:S,reverse:E,isDarkBackground:N,children:e(a,{children:e(o,(U=p({},Q),X={my:0,children:r(t,{"data-role":"checkable-input",children:[e(c,p({},T)),m]})},X=null!=X?X:{},Object.getOwnPropertyDescriptors?Object.defineProperties(U,Object.getOwnPropertyDescriptors(X)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(X)).forEach((function(e){Object.defineProperty(U,e,Object.getOwnPropertyDescriptor(X,e))})),U))})});var U,X}));s.displayName="CheckableInput";export{s as default};
|
|
@@ -26,11 +26,6 @@ export interface FieldsetProps extends MarginProps {
|
|
|
26
26
|
legendMargin?: Pick<MarginProps, "mb">;
|
|
27
27
|
/** Any valid CSS string to set the component's width */
|
|
28
28
|
width?: string;
|
|
29
|
-
/**
|
|
30
|
-
* [Legacy] Flag to configure component as optional.
|
|
31
|
-
* @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
|
|
32
|
-
*/
|
|
33
|
-
isOptional?: boolean;
|
|
34
29
|
/** Apply disabled styling to the legend content */
|
|
35
30
|
isDisabled?: boolean;
|
|
36
31
|
/** Set a name value on the component */
|
|
@@ -42,5 +37,5 @@ export interface FieldsetProps extends MarginProps {
|
|
|
42
37
|
/** Id for the validation icon tooltip */
|
|
43
38
|
validationId?: string;
|
|
44
39
|
}
|
|
45
|
-
declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled,
|
|
40
|
+
declare const Fieldset: ({ legend, children, inline, legendWidth, legendAlign, legendSpacing, error, warning, info, isRequired, blockGroupBehaviour, legendMargin, isDisabled, labelHelp, validationId, ...rest }: FieldsetProps) => React.JSX.Element;
|
|
46
41
|
export default Fieldset;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useContext as n,useState as t,useEffect as o}from"react";import{StyledFieldset as i,StyledLegend as l,StyledLegendContent as
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useContext as n,useState as t,useEffect as o}from"react";import{StyledFieldset as i,StyledLegend as l,StyledLegendContent as c,StyledIconWrapper as a}from"./fieldset.style.js";import{ValidationIcon as p}from"../validations/validation-icon.component.js";import s from"../../components/carbon-provider/__internal__/new-validation.context.js";import{InputGroupBehaviour as d,InputGroupContext as u}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"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";function b(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function y(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(r){b(e,r,n[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 n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}const O=b=>{var{legend:O,children:j,inline:v=!1,legendWidth:w,legendAlign:P,legendSpacing:S=2,error:D,warning:k,info:E,isRequired:M,blockGroupBehaviour:q,legendMargin:x={},isDisabled:A,labelHelp:R,validationId:B}=b,I=function(e,r){if(null==e)return{};var n,t,o=function(e,r){if(null==e)return{};var n,t,o={},i=Object.keys(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)n=i[t],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(b,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","labelHelp","validationId"]);const{validationRedesignOptIn:_}=n(s),F=m(I),[G,H]=t(null),[L,W]=t(!1);o((()=>{G&&M&&Array.from(G.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[G,M]);let C;return C=v&&!P?"right":P||"left",e(d,{blockGroupBehaviour:q,children:r(i,h(y({ref:H,"data-component":"fieldset"},I,F),{children:[O&&e(u.Consumer,{children:({onMouseEnter:n,onMouseLeave:t})=>e(l,h(y({onMouseEnter:n,onMouseLeave:t,inline:v,width:w,align:C,rightPadding:S},x),{"data-element":"legend","data-role":"legend",children:r(c,{isRequired:M,isDisabled:A,children:[O,!_&&(D||k||E?e(a,{"aria-hidden":"true",children:e(p,{error:D,warning:k,info:E,tooltipFlipOverrides:["top","bottom"]})}):R?e(a,h(y({},{onFocus:()=>W(!0),onBlur:()=>W(!1)}),{children:e(f,{isFocused:L,children:R})})):null)]})}))}),!_&&e(g,{screenReaderOnly:!0,id:B,children:D||k||E}),j]}))})};export{O as default};
|
|
@@ -6,13 +6,7 @@ declare const StyledFieldset: import("styled-components").StyledComponent<"field
|
|
|
6
6
|
} & StyledFieldsetProps, "theme">;
|
|
7
7
|
type StyledLegendContentProps = {
|
|
8
8
|
isRequired?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* [Legacy] Flag to configure component as optional.
|
|
11
|
-
* @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
|
|
12
|
-
*/
|
|
13
|
-
isOptional?: boolean;
|
|
14
9
|
isDisabled?: boolean;
|
|
15
|
-
optionalLabel?: string;
|
|
16
10
|
};
|
|
17
11
|
declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
|
|
18
12
|
export type StyledLegendProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{css as i}from"styled-components";import{margin as t}from"styled-system";import n from"../../style/themes/apply-base-theme.js";const o=e.fieldset.attrs(n).withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-
|
|
1
|
+
import e,{css as i}from"styled-components";import{margin as t}from"styled-system";import n from"../../style/themes/apply-base-theme.js";const o=e.fieldset.attrs(n).withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-1361c9e5-0"})(["margin:0;margin-bottom:var(--fieldSpacing);"," border:none;padding:0;min-width:0;min-inline-size:0;",""],t,(({width:e})=>e&&`width: ${e};`)),a=e.span.withConfig({displayName:"fieldset.style__StyledLegendContent",componentId:"sc-1361c9e5-1"})(["display:flex;align-items:center;line-height:24px;"," ",""],(({isRequired:e})=>e&&i(['::after{content:"*";line-height:24px;color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);position:relative;top:1px;}'])),(({isDisabled:e})=>e&&i(["color:var(--colorsUtilityYin030);::after{color:var(--colorsUtilityYin030);}"]))),l=e.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-1361c9e5-2"})(["display:flex;align-items:center;margin-bottom:var(--spacing100);padding:0;font-weight:var(--fontWeights500);color:var(--colorsUtilityYin090);",";"," ",""],(({align:e,inline:t})=>e&&i(["text-align:",";justify-content:",";",""],e,"right"===e?"flex-end":"flex-start",!t&&i(["width:-moz-available;"]))),(({inline:e,width:t,rightPadding:n})=>e&&i(["float:left;box-sizing:border-box;margin:0;",";padding-right:",";"],t&&`width: ${t}%`,1===n?"var(--spacing100)":"var(--spacing200)")),t),s=e.div.withConfig({displayName:"fieldset.style__StyledIconWrapper",componentId:"sc-1361c9e5-3"})(["margin-left:var(--spacing050);"]);export{o as StyledFieldset,s as StyledIconWrapper,l as StyledLegend,a as StyledLegendContent};
|
|
@@ -53,11 +53,6 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
|
|
|
53
53
|
fieldHelpInline?: boolean;
|
|
54
54
|
/** Id of the element a label should be bound to */
|
|
55
55
|
id: string;
|
|
56
|
-
/**
|
|
57
|
-
* [Legacy] Flag to configure component as optional.
|
|
58
|
-
* @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
|
|
59
|
-
*/
|
|
60
|
-
isOptional?: boolean;
|
|
61
56
|
/** Flag to configure component as mandatory */
|
|
62
57
|
isRequired?: boolean;
|
|
63
58
|
/** Whether to show the validation icon */
|
|
@@ -68,7 +63,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
|
|
|
68
63
|
"data-component"?: string;
|
|
69
64
|
}
|
|
70
65
|
declare const FormField: {
|
|
71
|
-
({ maxWidth, children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse,
|
|
66
|
+
({ maxWidth, children, "data-component": dataComponent, disabled, loading, fieldHelp: fieldHelpContent, fieldHelpInline, error, warning, info, tooltipId, fieldHelpId, label, labelId, labelAlign, labelHelp, labelHelpIcon, labelInline, labelSpacing, labelWidth, labelAs, id, reverse, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
|
|
72
67
|
displayName: string;
|
|
73
68
|
};
|
|
74
69
|
export default FormField;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useContext as r,useRef as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as n,useContext as r,useRef as l,useLayoutEffect as i,useEffect as o}from"react";import a from"invariant";import s,{FieldLineStyle as d}from"./form-field.style.js";import p from"../label/label.component.js";import{FieldHelp as c}from"../field-help/field-help.component.js";import b from"../utils/helpers/tags/tags.js";import f from"../../components/tabs/tab/__internal__/tab.context.js";import u from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../style/utils/filter-styled-system-padding-props.js";import m from"../../style/utils/filter-styled-system-margin-props.js";function y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const O=O=>{var{maxWidth:g,children:I,"data-component":j,disabled:h,loading:v,fieldHelp:w,fieldHelpInline:P,error:H,warning:k,info:x,tooltipId:S,fieldHelpId:_,label:W,labelId:A,labelAlign:R,labelHelp:q,labelHelpIcon:B,labelInline:D,labelSpacing:E=2,labelWidth:F,labelAs:V,id:L,reverse:N,useValidationIcon:U,adaptiveLabelBreakpoint:$,isRequired:z,validationIconId:C,validationRedesignOptIn:G}=O,J=function(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}(O,["maxWidth","children","data-component","disabled","loading","fieldHelp","fieldHelpInline","error","warning","info","tooltipId","fieldHelpId","label","labelId","labelAlign","labelHelp","labelHelpIcon","labelInline","labelSpacing","labelWidth","labelAs","id","reverse","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const K=n((()=>{const e={error:!!H,warning:!!k,info:!!x};if(h&&!v)return Object.keys(e).find((t=>e[t]))}),[H,k,x,h,v]);a(void 0===K,`Prop \`${K}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`);const M=u($);let Q=D;$&&(Q=M);const{setError:T,setWarning:X,setInfo:Y}=r(f),Z=m(J),ee=l(!1);i((()=>(ee.current=!0,()=>{ee.current=!1})),[]),o((()=>(T&&T(L,H),X&&X(L,k),Y&&Y(L,x),()=>{ee.current||(T&&H&&T(L,!1),X&&k&&X(L,!1),Y&&x&&Y(L,!1))})),[L,T,X,Y,H,k,x]);const te=w?t(c,{labelInline:Q,labelWidth:F,id:_,children:w}):null;return e(s,(ne=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},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(t){y(e,t,n[t])}))}return e}({},b(j,J),Z),re=null!=(re={children:[e(d,{"data-role":"field-line",inline:Q,maxWidth:g,children:[N&&I,W&&t(p,{labelId:A,align:R,disabled:h,error:!G&&H,warning:!G&&k,info:!G&&x,help:q,tooltipId:S,htmlFor:L,helpIcon:B,inline:Q,width:F,useValidationIcon:U,pr:N?void 0:E,pl:N?E:void 0,isRequired:z,validationIconId:C,as:V,children:W}),P&&te,!N&&I]}),!P&&te]})?re:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ne,Object.getOwnPropertyDescriptors(re)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(re)).forEach((function(e){Object.defineProperty(ne,e,Object.getOwnPropertyDescriptor(re,e))})),ne));var ne,re};O.displayName="FormField";export{O as default};
|
|
@@ -3,11 +3,6 @@ import { BorderRadiusType } from "../../components/box/box.component";
|
|
|
3
3
|
export type EnterKeyHintTypes = "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
|
|
4
4
|
export interface CommonInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
5
5
|
align?: "right" | "left";
|
|
6
|
-
/**
|
|
7
|
-
* Set the ID of the input's description.
|
|
8
|
-
* @deprecated Please use `aria-describedby` instead.
|
|
9
|
-
*/
|
|
10
|
-
ariaDescribedBy?: string;
|
|
11
6
|
/** The ID of the input's description, is set along with hint text and error message. */
|
|
12
7
|
"aria-describedby"?: string;
|
|
13
8
|
/** Override the variant component */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t,{useContext as r,useRef as n,useCallback as o,useEffect as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t,{useContext as r,useRef as n,useCallback as o,useEffect as u}from"react";import i from"./input.style.js";import{InputContext as c}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as l}from"../input-behaviour/input-group-behaviour.component.js";import{SelectTextboxContext as a}from"../../components/select/__internal__/select-textbox/select-textbox.context.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const p=t.forwardRef(((t,p)=>{var{align:d,"aria-labelledby":b,"aria-describedby":f,placeholder:y,disabled:m,readOnly:O,autoFocus:h,onClick:g,onChangeDeferred:v,onChange:j,onBlur:B,onFocus:P,deferTimeout:w,type:x="text",id:F,name:I,validationIconId:S,inputBorderRadius:C="borderRadius050",enterKeyHint:R}=t,k=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},u=Object.keys(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n<u.length;n++)r=u[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["align","aria-labelledby","aria-describedby","placeholder","disabled","readOnly","autoFocus","onClick","onChangeDeferred","onChange","onBlur","onFocus","deferTimeout","type","id","name","validationIconId","inputBorderRadius","enterKeyHint"]);const D=r(c),E=r(l),{isInputInSelect:T}=r(a),_=n(null);let H=n(null);p&&"current"in p&&(H=p);const K=o((e=>{H.current=e,"function"==typeof p&&p(e),h&&e&&e.focus(),R&&e&&e.setAttribute("enterkeyhint",R)}),[h,p,R]);u((()=>{D.inputRef&&D.inputRef(H)}),[D,H]),u((()=>{m&&D.onBlur&&D.onBlur()}),[m,D]);const M=f?[f]:[];(D.hasFocus||E.hasFocus||D.hasMouseOver||E.hasMouseOver)&&S&&M.push(S);const A=M.length?M.filter(Boolean).join(" "):void 0;return e(i,(N=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){s(e,t,r[t])}))}return e}({},k),q={isInputInSelect:T,"data-has-autofocus":!!h||void 0,"aria-describedby":A,"aria-labelledby":b,align:d,placeholder:y,disabled:m,readOnly:O,name:I,type:x,id:F||I,ref:K,"data-element":"input",onFocus:e=>{P&&P(e),D.onFocus&&D.onFocus(),E.onFocus&&E.onFocus(),"text"===x&&function(e){setTimeout((()=>{if(null==e?void 0:e.current){const{selectionStart:t,selectionEnd:r,value:n}=e.current,{length:o}=n;(0===t&&0===r||t===o&&r===o)&&document.activeElement===e.current&&e.current.setSelectionRange(0,o)}}))}(H)},onBlur:e=>{B&&B(e),D.onBlur&&D.onBlur(),E.onBlur&&E.onBlur()},onClick:m||O?void 0:e=>{var t;g&&g(e),null==H||null===(t=H.current)||void 0===t||t.focus()},onChange:e=>{j&&j(e),(e=>{v&&(_.current&&clearTimeout(_.current),_.current=setTimeout((()=>{v(e)}),w||750))})(e)},inputBorderRadius:C},q=null!=q?q:{},Object.getOwnPropertyDescriptors?Object.defineProperties(N,Object.getOwnPropertyDescriptors(q)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(q)).forEach((function(e){Object.defineProperty(N,e,Object.getOwnPropertyDescriptor(q,e))})),N));var N,q}));p.displayName="Input";export{p 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,
|
|
34
|
-
declare const _default: React.MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isDarkBackground, isRequired, labelId,
|
|
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>;
|
|
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
|
|
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 p}from"../validations/validation-icon.component.js";import s 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:S,useValidationIcon:x=!0,validationIconId:B,warning:L,width:q=30,className:N,"aria-label":R})=>{const[V,$]=n(!1),{onMouseEnter:z,onMouseLeave:A}=t(u),{onMouseEnter:C,onMouseLeave:G}=t(d),H=i(b());let J;return J=I&&!o?"right":o||"left",e(c,{"data-role":"label-container",id:`label-container-${null!=M?M:H.current}`,align:J,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:()=>{z&&z(),C&&C()},onMouseLeave:()=>{A&&A(),G&&G()},isRequired:D,as:m,"aria-label":R,isDarkBackground:k,children:h})),(()=>{const e={onFocus:()=>$(!0),onBlur:()=>$(!1)};if(x&&(({error:e,warning:r,info:o,disabled:n})=>!n&&"string"==typeof(e||r||o))({error:j,warning:L,info:P,disabled:O})){const e=(({error:e,warning:r,info:o,inline:n})=>(e||r||o)&&n?"top":"right")({error:j,warning:L,info:P,inline:I});return r(s,{children:r(p,{tooltipId:B,error:j,warning:L,info:P,tooltipPosition:e,tooltipFlipOverrides:["top","bottom"]})})}return y&&r(s,g(f({},e),{children:r(l,{tooltipId:S,type:w,isFocused:V,children:y})}))})()]})};var O=o.memo(h);export{h as Label,O as default};
|
|
@@ -12,16 +12,12 @@ export interface StyledLabelContainerProps {
|
|
|
12
12
|
align?: "left" | "right";
|
|
13
13
|
/** When true, label is placed in line an input */
|
|
14
14
|
inline?: boolean;
|
|
15
|
-
/** Flag to configure component as optional in Form */
|
|
16
|
-
optional?: boolean;
|
|
17
15
|
/** Padding right, integer multiplied by base spacing constant (8) */
|
|
18
16
|
pr?: 1 | 2;
|
|
19
17
|
/** Padding left, integer multiplied by base spacing constant (8) */
|
|
20
18
|
pl?: 1 | 2;
|
|
21
19
|
/** Label width */
|
|
22
20
|
width?: number;
|
|
23
|
-
/** Text used for the optional label */
|
|
24
|
-
optionalLabel?: string;
|
|
25
21
|
}
|
|
26
22
|
export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
|
|
27
23
|
export default StyledLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import i,{css as t}from"styled-components";const a=i.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-ea59dfc5-0"})([""," display:block;font-weight:var(--fontWeights500);"," ",""],(({isDarkBackground:i})=>t(["color:",";"],i?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isRequired:i})=>i&&t(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:i})=>i&&t(["color:var(--colorsUtilityYin030);"]))),e=i.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-ea59dfc5-1"})(["display:flex;align-items:center;margin-bottom:8px;"," ",""],(({align:i})=>t(["justify-content:",";"],"right"!==i?"flex-start":"flex-end")),(({inline:i,pr:a,pl:e,width:o})=>i&&t(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],a&&t(["padding-right:var(",");"],1===a?"--spacing100":"--spacing200"),e&&t(["padding-left:var(",");"],1===e?"--spacing100":"--spacing200"),o)));export{e as StyledLabelContainer,a as default};
|
|
@@ -1,18 +1,25 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { MarginProps } from "styled-system";
|
|
3
|
+
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
4
|
+
export interface BadgeProps extends TagProps, MarginProps {
|
|
5
|
+
/** @deprecated Prop to specify an aria-label for the component */
|
|
5
6
|
"aria-label"?: string;
|
|
6
|
-
/** The badge will be
|
|
7
|
-
children
|
|
7
|
+
/** The badge will be positioned relative to this element */
|
|
8
|
+
children?: React.ReactNode;
|
|
8
9
|
/** The number rendered in the badge component */
|
|
9
10
|
counter?: string | number;
|
|
10
|
-
/** Prop to specify the color of the component */
|
|
11
|
+
/** @deprecated Prop to specify the color of the component */
|
|
11
12
|
color?: string;
|
|
12
|
-
/** Callback fired when badge is clicked */
|
|
13
|
+
/** @deprecated Callback fired when badge is clicked */
|
|
13
14
|
onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
14
15
|
/** Unique identifier for the component. */
|
|
15
16
|
id?: string;
|
|
17
|
+
/** Size of the badge */
|
|
18
|
+
size?: "small" | "medium" | "large";
|
|
19
|
+
/** Badge variant */
|
|
20
|
+
variant?: "typical" | "subtle";
|
|
21
|
+
/** Set the style of the Badge to inverse */
|
|
22
|
+
inverse?: boolean;
|
|
16
23
|
}
|
|
17
|
-
export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, id,
|
|
24
|
+
export declare const Badge: ({ "aria-label": ariaLabel, children, counter, color, onClick, id, size, variant, inverse, ...rest }: BadgeProps) => React.JSX.Element | null;
|
|
18
25
|
export default Badge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useRef as
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useRef as n}from"react";import"../../style/utils/filter-styled-system-padding-props.js";import o from"../../style/utils/filter-styled-system-margin-props.js";import{StyledBadgeWrapper as i,StyledBadge as l,StyledCounter as a}from"./badge.style.js";import s from"../icon/icon.component.js";import c from"../../__internal__/utils/helpers/tags/tags.js";import p from"../../__internal__/utils/helpers/guid/index.js";import d from"../../__internal__/utils/logger/index.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let b=!1,m=!1,f=!1;const y=y=>{var{"aria-label":g,children:O,counter:j=0,color:h,onClick:v,id:w,size:P="medium",variant:_="typical",inverse:k=!1}=y,x=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(y,["aria-label","children","counter","color","onClick","id","size","variant","inverse"]);v&&!b&&(d.deprecate("The `onClick` prop in `Badge` is deprecated and will soon be removed."),b=!0),g&&!m&&(d.deprecate("The `aria-label` prop in `Badge` is deprecated and will soon be removed."),m=!0),h&&!f&&(d.deprecate("The `color` prop in `Badge` is deprecated and will soon be removed."),f=!0);const[C,S]=t(!1),[B,D]=t(!1),{current:E}=n(w||p());let T=!0;const z=v&&"small"!==P,M=z&&(C||B);let F=j;"string"==typeof j?(j.length>4&&(F=j.substring(0,4)),""===j&&(T=!1)):"number"==typeof j&&(j>999&&(F="999+"),(j<=0||j%1!=0)&&(T=!1));const I=()=>{return T?r(l,(e=function(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){u(e,r,t[r])}))}return e}({customColor:h,id:E,"aria-label":g,size:P,variant:_,inverse:k,hasChildren:!!O,onFocus:()=>{S(!0)},onBlur:()=>{S(!1)},onMouseEnter:()=>{D(!0)},onMouseLeave:()=>{D(!1)}},z&&{buttonType:"secondary",onClick:v},c("badge",x),o(x)),t=null!=(t={children:M?r(s,{"data-role":"badge-cross-icon","data-element":"badge-cross-icon",type:"cross",color:"white"}):"small"!==P?r(a,{"data-element":"badge-counter",children:F}):null})?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e)):null;var e,t};return O?e(i,{"data-role":"badge-wrapper",children:[O,I()]}):I()};export{y as Badge,y as default};
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
interface StyledBadgeProps {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
customColor?: string;
|
|
5
|
+
size?: "small" | "medium" | "large";
|
|
6
|
+
variant?: "typical" | "subtle";
|
|
7
|
+
inverse?: boolean;
|
|
8
|
+
hasChildren?: boolean;
|
|
7
9
|
}
|
|
8
10
|
declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
|
|
9
11
|
theme: object;
|
|
10
12
|
} & {
|
|
11
13
|
as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>> | undefined;
|
|
12
14
|
} & StyledBadgeProps, "theme" | "as">;
|
|
13
|
-
|
|
14
|
-
export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };
|
|
15
|
+
export { StyledBadge, StyledBadgeWrapper, StyledCounter };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import o,{css as t}from"styled-components";import{margin as r}from"styled-system";import i from"../icon/icon.style.js";import e from"../button/button.component.js";import n from"../../style/themes/apply-base-theme.js";import{toColor as l}from"../../style/utils/color.js";const s=(o,t)=>"subtle"===o?`\n ${t?"#007ED9":"#0060A7"};\n `:`\n ${t?"#E13E53":"#CD384B"};\n `,a=o.div.withConfig({displayName:"badge.style__StyledBadgeWrapper",componentId:"sc-62fb7324-0"})([""," position:relative;display:inline-block;"],r),p=o.div.withConfig({displayName:"badge.style__StyledCounter",componentId:"sc-62fb7324-1"})(["font-weight:500;font-size:13px;line-height:150%;"]),c=o.span.attrs(n).attrs((({onClick:o})=>({as:o?e:void 0}))).withConfig({displayName:"badge.style__StyledBadge",componentId:"sc-62fb7324-2"})([""," box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:999px;border:solid 2px;",""],r,(({size:o,variant:r,inverse:e,hasChildren:n,customColor:a,theme:p,onClick:c})=>t(["",";background-color:",";border-color:",";color:",";"," "," ",""],(o=>{switch(o){case"small":return t(["width:12px;height:12px;"]);case"large":return t(["min-width:28px;height:28px;padding:0px 4px 1px;"]);default:return t(["min-width:24px;height:24px;padding:0px 2px 1px;"])}})(o),s(r,e),e?"var(--colorsUtilityYin100)":"var(--colorsUtilityYang100)",e?"var(--colorsUtilityYin100)":"var(--colorsUtilityYang100)",n&&t(["position:absolute;z-index:2;",";"],(o=>{switch(o){case"small":return t(["top:-3px;right:-2px;"]);case"large":return t(["top:-14px;right:-8px;"]);default:return t(["top:-12px;right:-8px;"])}})(o)),c&&t(["min-height:0;:hover,:focus{padding:0;border-color:",";background-color:",";","{margin:0;color:",";}}"],s(r,e),s(r,e),i,e?"var(--colorsUtilityYin100)":"var(--colorsUtilityYang100)"),a&&t(["background-color:var(--colorsUtilityYang100);border-color:",";color:",";",""],l(p,a),l(p,a),c&&t([":hover,:focus{background-color:",";border-color:",";}"],l(p,a),l(p,a))))));export{c as StyledBadge,a as StyledBadgeWrapper,p as StyledCounter};
|
|
@@ -29,11 +29,6 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps, TagPro
|
|
|
29
29
|
labelSpacing?: 1 | 2;
|
|
30
30
|
/** Flag to configure component as mandatory */
|
|
31
31
|
required?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* [Legacy] Flag to configure component as optional.
|
|
34
|
-
* @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
|
|
35
|
-
*/
|
|
36
|
-
isOptional?: boolean;
|
|
37
32
|
/** [Legacy] Overrides the default tooltip */
|
|
38
33
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
39
34
|
/** When true, Checkboxes are inline */
|
|
@@ -42,7 +37,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps, TagPro
|
|
|
42
37
|
validationMessagePositionTop?: boolean;
|
|
43
38
|
}
|
|
44
39
|
export declare const CheckboxGroup: {
|
|
45
|
-
({ children, legend, error, warning, info, required,
|
|
40
|
+
({ children, legend, error, warning, info, required, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, validationMessagePositionTop, ...rest }: CheckboxGroupProps): React.JSX.Element;
|
|
46
41
|
displayName: string;
|
|
47
42
|
};
|
|
48
43
|
export default CheckboxGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{useContext as i,useRef as t}from"react";import o from"./checkbox-group.style.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import a from"../../../__internal__/fieldset/fieldset.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import
|
|
1
|
+
import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{useContext as i,useRef as t}from"react";import o from"./checkbox-group.style.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import a from"../../../__internal__/fieldset/fieldset.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import c from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as d}from"../../../__internal__/tooltip-provider/index.js";import s from"../../carbon-provider/__internal__/new-validation.context.js";import p from"../../../__internal__/validation-message/validation-message.component.js";import{Box as g}from"../../box/box.component.js";import u from"../../textbox/textbox.style.js";import f from"./__internal__/checkbox-group.context.js";import m from"../../../__internal__/utils/helpers/guid/index.js";import b from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import{HintText as h}from"../../../__internal__/hint-text/hint-text.component.js";function y(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function _(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(r){y(e,r,n[r])}))}return e}function j(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 n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}const v=y=>{var{children:v,legend:O,error:x,warning:w,info:P,required:k,legendInline:I,legendWidth:S,legendAlign:A="left",legendSpacing:D,legendHelp:T,tooltipPosition:q,inline:B,id:M,validationMessagePositionTop:R=!0}=y,E=function(e,r){if(null==e)return{};var n,i,t=function(e,r){if(null==e)return{};var n,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(y,["children","legend","error","warning","info","required","legendInline","legendWidth","legendAlign","legendSpacing","legendHelp","tooltipPosition","inline","id","validationMessagePositionTop"]);const{validationRedesignOptIn:G}=i(s),W=t(m()),H=M||W.current,C=T?`${H}-hint`:void 0,{validationId:N,ariaDescribedBy:$}=b({id:H,validationRedesignOptIn:!0,error:x,warning:w,info:P}),z=(G&&R?[$,C]:[C,$]).filter(Boolean).join(" ");return e(r,{children:G?n(a,j(_(j(_({id:H,legend:O,legendAlign:A,error:x,warning:w,isRequired:k,width:"fit-content"},z&&{"aria-describedby":z},l("checkboxgroup",E)),{blockGroupBehaviour:!(x||w)}),c(E)),{children:[T&&e(h,{align:A,id:C,marginTop:"-4px",children:T}),n(g,{position:"relative",children:[R&&n(r,{children:[e(p,{error:x,warning:w,validationId:N,validationMessagePositionTop:R}),(x||w)&&e(u,{warning:!(x||!w)})]}),e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",inline:B,children:e(f.Provider,{value:{error:!!x,warning:!!w},children:v})}),!R&&n(r,{children:[e(p,{error:x,warning:w,validationId:N,validationMessagePositionTop:R}),(x||w)&&e(u,{warning:!(x||!w)})]})]})]})):e(d,{tooltipPosition:q,children:e(a,j(_(j(_({id:H,legend:O,inline:I,legendWidth:S,legendAlign:A,legendSpacing:D,error:x,warning:w,info:P,isRequired:k,"aria-describedby":$,validationId:N},l("checkboxgroup",E)),{blockGroupBehaviour:!(x||w||P)}),c(E)),{children:e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",legendInline:I,children:e(f.Provider,{value:{error:!!x,warning:!!w,info:!!P},children:v})})}))})})};v.displayName="CheckboxGroup";export{v as CheckboxGroup,v as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as r}from"react/jsx-runtime";import t,{useContext as n}from"react";import o from"../../__internal__/utils/helpers/tags/tags.js";import i from"./checkbox.style.js";import l from"../../__internal__/checkable-input/checkable-input.component.js";import a from"./checkbox-svg.component.js";import p from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import{TooltipProvider as c}from"../../__internal__/tooltip-provider/index.js";import s from"./checkbox-group/__internal__/checkbox-group.context.js";import d from"../../__internal__/utils/logger/index.js";import b from"../carbon-provider/__internal__/new-validation.context.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(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){f(e,r,t[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 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}let y=!1;const g=t.forwardRef(((t,f)=>{var{"aria-labelledby":g,id:O,label:j,onChange:v,name:_,onClick:k,onBlur:w,onFocus:P,value:x,fieldHelp:S,autoFocus:H,labelHelp:I,labelSpacing:B=1,labelWidth:C,adaptiveSpacingBreakpoint:W,required:F,
|
|
1
|
+
import{jsx as e,Fragment as r}from"react/jsx-runtime";import t,{useContext as n}from"react";import o from"../../__internal__/utils/helpers/tags/tags.js";import i from"./checkbox.style.js";import l from"../../__internal__/checkable-input/checkable-input.component.js";import a from"./checkbox-svg.component.js";import p from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import{TooltipProvider as c}from"../../__internal__/tooltip-provider/index.js";import s from"./checkbox-group/__internal__/checkbox-group.context.js";import d from"../../__internal__/utils/logger/index.js";import b from"../carbon-provider/__internal__/new-validation.context.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function m(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){f(e,r,t[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 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}let y=!1;const g=t.forwardRef(((t,f)=>{var{"aria-labelledby":g,id:O,label:j,onChange:v,name:_,onClick:k,onBlur:w,onFocus:P,value:x,fieldHelp:S,autoFocus:H,labelHelp:I,labelSpacing:B=1,labelWidth:C,adaptiveSpacingBreakpoint:W,required:F,error:A,warning:L,info:D,fieldHelpInline:q,reverse:z=!1,checked:E,disabled:N,inputWidth:R,size:U,tooltipPosition:V,"data-element":G,"data-role":J,helpAriaLabel:K}=t,M=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(t,["aria-labelledby","id","label","onChange","name","onClick","onBlur","onFocus","value","fieldHelp","autoFocus","labelHelp","labelSpacing","labelWidth","adaptiveSpacingBreakpoint","required","error","warning","info","fieldHelpInline","reverse","checked","disabled","inputWidth","size","tooltipPosition","data-element","data-role","helpAriaLabel"]);const{validationRedesignOptIn:Q}=n(b),T=p(W),X=!(!W||T),Y=n(s),{error:Z,warning:$,info:ee}=Y;y||v||(y=!0,d.deprecate("Uncontrolled behaviour in `Checkbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const re=h(m({ariaLabelledBy:g,onClick:k,onChange:v,onBlur:w,onFocus:P,labelInline:!0,id:O,label:j,value:x,type:"checkbox",name:_,reverse:!z,fieldHelp:S,autoFocus:H,labelHelp:I,labelSpacing:B,required:F,fieldHelpInline:q,checked:E,disabled:N,inputWidth:R,labelWidth:C,ref:f},M),{"data-component":void 0}),te=m({error:Z||A,warning:$||L},Q?{validationOnLabel:!1}:{info:ee||D}),ne=u(M),oe=e(i,h(m(h(m({disabled:N,labelSpacing:B,inputWidth:R,adaptiveSpacingSmallScreen:X},te),{fieldHelpInline:q,reverse:z,size:U,applyNewValidation:Q}),ne,o("checkbox",{"data-element":G,"data-role":J})),{children:e(l,h(m({},re,te),{children:e(a,{})}))}));return e(r,{children:Q?oe:e(c,{helpAriaLabel:K,tooltipPosition:V,children:oe})})}));g.displayName="Checkbox";export{g as Checkbox,g as default};
|
|
@@ -83,11 +83,6 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
|
|
|
83
83
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
84
84
|
/** Flag to configure component as mandatory. */
|
|
85
85
|
required?: boolean;
|
|
86
|
-
/**
|
|
87
|
-
* [Legacy] Flag to configure component as optional.
|
|
88
|
-
* @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
|
|
89
|
-
*/
|
|
90
|
-
isOptional?: boolean;
|
|
91
86
|
/** Date format string to be applied to the date inputs */
|
|
92
87
|
dateFormatOverride?: string;
|
|
93
88
|
/** Prop to specify the aria-label attribute of the start date picker */
|
|
@@ -102,7 +97,7 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
|
|
|
102
97
|
validationMessagePositionTop?: boolean;
|
|
103
98
|
}
|
|
104
99
|
export declare const DateRange: {
|
|
105
|
-
({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required,
|
|
100
|
+
({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, dateFormatOverride: dateFormatOverrideProp, datePickerStartAriaLabel, datePickerStartAriaLabelledBy, datePickerEndAriaLabel, datePickerEndAriaLabelledBy, validationMessagePositionTop, ...rest }: DateRangeProps): React.JSX.Element;
|
|
106
101
|
displayName: string;
|
|
107
102
|
};
|
|
108
103
|
export default DateRange;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,useMemo as a,useState as n,useCallback as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,useMemo as a,useState as n,useCallback as l,useEffect as o}from"react";import{checkISOFormatAndLength as i,formattedValue as s,parseISODate as d,formatToISO as u}from"../date/__internal__/utils.js";import{DateInput as c}from"../date/date.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import f from"./date-range.style.js";import b from"../../__internal__/utils/helpers/events/events.js";import y from"../../hooks/__internal__/useLocale/useLocale.js";import v from"../../hooks/__internal__/usePrevious/index.js";import O from"../date/__internal__/date-formats/index.js";import g from"./__internal__/date-range.context.js";import P from"../carbon-provider/__internal__/new-validation.context.js";function _(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){_(e,t,r[t])}))}return e}function k(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const w=_=>{var{endDateProps:w={},id:B,labelsInline:h,name:L,onBlur:V,onChange:E,startDateProps:A={},tooltipPosition:S,validationOnLabel:D,value:x,startRef:I,endRef:R,required:F,dateFormatOverride:M,datePickerStartAriaLabel:T,datePickerStartAriaLabelledBy:K,datePickerEndAriaLabel:$,datePickerEndAriaLabelledBy:q,validationMessagePositionTop:C=!0}=_,N=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(_,["endDateProps","id","labelsInline","name","onBlur","onChange","startDateProps","tooltipPosition","validationOnLabel","value","startRef","endRef","required","dateFormatOverride","datePickerStartAriaLabel","datePickerStartAriaLabelledBy","datePickerEndAriaLabel","datePickerEndAriaLabelledBy","validationMessagePositionTop"]);const{validationRedesignOptIn:W}=r(P),z=!W&&h,G=y(),{dateFnsLocale:H,dateFormatOverride:J}=G.date,{format:Q}=a((()=>O(H(),M||J)),[H,M,J]),[U,X]=n(""),Y=l((e=>i(e)?s(Q,d(e)):e),[Q]),Z=l((()=>{const{value:e}=A;return Y(e||x[0])}),[A,x,Y]),ee=l((()=>{const{value:e}=w;return Y(e||x[1])}),[w,x,Y]),[te,re]=n({start:{isBlurBlocked:{current:!1},setOpen:null},end:{isBlurBlocked:{current:!1},setOpen:null}});function ae(e,t){return e&&!t.length}const[ne,le]=n({formattedValue:Z(),rawValue:ae(!!A.allowEmptyValue,Z())?"":u(Q,Z())}),[oe,ie]=n({formattedValue:ee(),rawValue:ae(!!w.allowEmptyValue,ee())?"":u(Q,ee())}),se=v(x);o((()=>{(null==se?void 0:se.length)&&(x[0]!==se[0]||x[1]!==se[1])&&(le({formattedValue:Z(),rawValue:ae(!!A.allowEmptyValue,Z())?"":u(Q,Z())}),ie({formattedValue:ee(),rawValue:ae(!!w.allowEmptyValue,ee())?"":u(Q,ee())}))}),[x,se,w.allowEmptyValue,Q,ee,Z,A.allowEmptyValue]);const de=l(((e,t)=>{const r="start"===e?t:ne,a="end"===e?t:oe;return X(e),{target:k(j({},L&&{name:L},B&&{id:B}),{value:[r,a]})}}),[oe,B,L,ne]),ue=(e,t)=>{"start"===e?le(j({},t.target.value)):ie(j({},t.target.value));const r=de(e,t.target.value);E(r)},ce=e=>{ue("start",e)},pe=e=>{ue("end",e)},me=e=>{var t,r;if(!(null==te||null===(t=te.start)||void 0===t?void 0:t.isBlurBlocked.current)&&!(null==te||null===(r=te.end)||void 0===r?void 0:r.isBlurBlocked.current)&&V){const t=de(U,e.target.value);V(t)}},fe=e=>{(e=>{const t=null==te?void 0:te[e];var r;t&&(null===(r=t.setOpen)||void 0===r||r.call(t,!1),t.isBlurBlocked.current=!1)})(e),X("start"===e?"end":"start")},be=e=>{const t="start"===e?A:w,{formattedValue:r}="start"===e?ne:oe,a="start"===e?ce:pe;return k(j({label:N[`${e}Label`],labelInline:z,value:r,error:N[`${e}Error`],warning:N[`${e}Warning`],info:N[`${e}Info`],validationOnLabel:D,onBlur:me,onChange:a,onKeyDown:t=>((e,t)=>{b.isTabKey(e)&&b.isShiftKey(e)&&(null==te?void 0:te.start)?te.start.isBlurBlocked.current=!("start"===t):b.isTabKey(e)&&(null==te?void 0:te.end)&&(te.end.isBlurBlocked.current=!("end"===t))})(t,e)},t),{required:F})};return e(f,k(j(k(j({},m("date-range",N)),{labelsInline:z}),p(N)),{validationMessagePositionTop:C,children:t(g.Provider,{value:{inputRefMap:te,setInputRefMap:e=>{re((t=>j({},t,e)))},validationMessagePositionTop:C},children:[e(c,k(j({my:0},be("start")),{onFocus:()=>fe("end"),"data-element":"start-date",inputName:"start",labelWidth:40,tooltipPosition:S,ref:I,datePickerAriaLabel:T,datePickerAriaLabelledBy:K})),e(c,k(j({my:0},be("end")),{onFocus:()=>fe("start"),"data-element":"end-date",inputName:"end",labelWidth:40,tooltipPosition:S,ref:R,datePickerAriaLabel:$,datePickerAriaLabelledBy:q}))]})}))};w.displayName="DateRange";export{w as DateRange,w as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as t,useRef as r,useImperativeHandle as a}from"react";import l from"../../__internal__/utils/helpers/guid/index.js";import n from"../modal/modal.component.js";import{Heading as i}from"../heading/heading.component.js";import s from"../../__internal__/utils/helpers/tags/tags.js";import{DialogPositioner as c,StyledDialog as d,StyledDialogContent as u,StyledDialogTitle as p}from"./dialog.style.js";import b from"../../__internal__/focus-trap/focus-trap.component.js";import
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as t,useRef as r,useImperativeHandle as a}from"react";import l from"../../__internal__/utils/helpers/guid/index.js";import n from"../modal/modal.component.js";import{Heading as i}from"../heading/heading.component.js";import s from"../../__internal__/utils/helpers/tags/tags.js";import{DialogPositioner as c,StyledDialog as d,StyledDialogContent as u,StyledDialogTitle as p}from"./dialog.style.js";import b from"../../__internal__/focus-trap/focus-trap.component.js";import f from"../icon-button/icon-button.component.js";import m from"../icon/icon.component.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import h from"../../hooks/__internal__/useModalAria/useModalAria.js";function y(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function O(e){for(var o=1;o<arguments.length;o++){var t=null!=arguments[o]?arguments[o]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(o){y(e,o,t[o])}))}return e}function j(e,o){return o=null!=o?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):function(e){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);o.push.apply(o,t)}return o}(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))})),e}const _=t(((t,y)=>{var{className:_,"data-component":v="dialog","data-element":P="dialog","data-role":C,children:w,open:k,height:F,size:S="medium",title:x,disableEscKey:E,subtitle:I,disableAutoFocus:D=!1,focusFirstElement:M,focusableSelectors:A,onCancel:B,showCloseIcon:z=!0,bespokeFocusTrap:K,disableClose:L,help:N,highlightVariant:T="default",role:V="dialog",contentPadding:R={},greyBackground:U=!1,focusableContainers:$,topModalOverride:H,closeButtonDataProps:W,restoreFocusOnClose:Y=!0,"aria-labelledby":q,"aria-describedby":G,"aria-label":J}=t,Q=function(e,o){if(null==e)return{};var t,r,a=function(e,o){if(null==e)return{};var t,r,a={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],o.indexOf(t)>=0||(a[t]=e[t]);return a}(e,o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],o.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(t,["className","data-component","data-element","data-role","children","open","height","size","title","disableEscKey","subtitle","disableAutoFocus","focusFirstElement","focusableSelectors","onCancel","showCloseIcon","bespokeFocusTrap","disableClose","help","highlightVariant","role","contentPadding","greyBackground","focusableContainers","topModalOverride","closeButtonDataProps","restoreFocusOnClose","aria-labelledby","aria-describedby","aria-label"]);const X=g(),Z=r(null),ee=r(null),{current:oe}=r(l()),{current:te}=r(l()),re=h(Z);a(y,(()=>({focus(){var e;null===(e=Z.current)||void 0===e||e.focus()}})),[]);const ae=z&&B&&e(f,j(O({"aria-label":X.dialog.ariaLabels.close(),onClick:B,disabled:L},s("close",O({"data-element":"close"},W))),{children:e(m,{type:"close"})})),le=x&&e(p,{showCloseIcon:z,hasSubtitle:!!I,ref:ee,children:"string"==typeof x?e(i,{"data-element":"dialog-title",title:x,titleId:oe,subheader:I,subtitleId:te,divider:!1,help:N}):x});let ne=F;F&&F.match(/px$/)&&(ne=F.replace("px",""));const ie={size:S,dialogHeight:ne,"aria-labelledby":x&&"string"==typeof x?oe:q,"aria-describedby":I&&"string"==typeof I?te:G,"aria-label":J};return e(n,j(O({open:k,onCancel:B,disableEscKey:E,disableClose:L,className:_?`${_} carbon-dialog`:"carbon-dialog",topModalOverride:H,restoreFocusOnClose:Y},Q),{children:e(b,{autoFocus:!D,focusFirstElement:M,bespokeTrap:K,focusableSelectors:A,wrapperRef:Z,isOpen:k,additionalWrapperRefs:$,children:e(c,{children:o(d,j(O(j(O({"data-component":v,"data-element":P,"data-role":C,"aria-modal":!!re||void 0,ref:Z},ie),{highlightVariant:T,role:V,tabIndex:-1}),R),{backgroundColor:U?"var(--colorsUtilityMajor025)":"var(--colorsUtilityYang100)",children:[le,ae,e(u,j(O({},R),{"data-role":"dialog-content",tabIndex:-1,children:w}))]}))})})}))}));export{_ as Dialog,_ as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as r}from"react";import t from"../../__internal__/utils/helpers/guid/index.js";import n from"../modal/modal.component.js";import{Heading as l}from"../heading/heading.component.js";import a from"../../__internal__/full-screen-heading/full-screen-heading.component.js";import i from"./dialog-full-screen.style.js";import s from"./content.style.js";import c from"../../__internal__/focus-trap/focus-trap.component.js";import d from"../icon-button/icon-button.component.js";import p from"../icon/icon.component.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import b from"../../hooks/__internal__/useModalAria/useModalAria.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../__internal__/utils/logger/index.js";function g(e,o,r){return o in e?Object.defineProperty(e,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[o]=r,e}function y(e){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},t=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),t.forEach((function(o){g(e,o,r[o])}))}return e}function h(e,o){return o=null!=o?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):function(e){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o.push.apply(o,r)}return o}(Object(o)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))})),e}let O=!1,j=!1;const _=g=>{var{"aria-describedby":_,"aria-label":C,"aria-labelledby":v,disableAutoFocus:P=!1,focusFirstElement:w,bespokeFocusTrap:S,open:F,children:k,title:E,subtitle:D,pagesStyling:x,headerChildren:I,showCloseIcon:M=!0,disableContentPadding:T,disableEscKey:A,onCancel:R,contentRef:B,help:K,role:L="dialog",focusableContainers:H,focusableSelectors:W,topModalOverride:q,closeButtonDataProps:z,restoreFocusOnClose:G=!0}=g,J=function(e,o){if(null==e)return{};var r,t,n=function(e,o){if(null==e)return{};var r,t,n={},l=Object.keys(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||(n[r]=e[r]);return n}(e,o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(t=0;t<l.length;t++)r=l[t],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(g,["aria-describedby","aria-label","aria-labelledby","disableAutoFocus","focusFirstElement","bespokeFocusTrap","open","children","title","subtitle","pagesStyling","headerChildren","showCloseIcon","disableContentPadding","disableEscKey","onCancel","contentRef","help","role","focusableContainers","focusableSelectors","topModalOverride","closeButtonDataProps","restoreFocusOnClose"]);const N=u(),Q=r(null),U=r(null),{current:V}=r(t()),{current:X}=r(t()),Y=b(Q);!O&&(null==J?void 0:J.disableClose)&&(O=!0,m.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.")),!j&&x&&(j=!0,m.deprecate("The pagesStyling prop in DialogFullScreen is deprecated and will soon be removed."));const Z={"aria-labelledby":E&&"string"==typeof E?V:v,"aria-describedby":D&&"string"==typeof D?X:_,"aria-label":C};return e(n,h(y({open:F,onCancel:R,disableEscKey:A,topModalOverride:q,restoreFocusOnClose:G},f("dialog-full-screen",J)),{children:e(c,{autoFocus:!P,focusFirstElement:w,bespokeTrap:S,wrapperRef:Q,isOpen:F,additionalWrapperRefs:H,focusableSelectors:W,children:o(i,h(y({"aria-modal":!("dialog"!==L||!Y)||void 0},Z),{ref:Q,"data-element":"dialog-full-screen",pagesStyling:x,role:L,children:[E||I?o(a,{hasContent:!!E,hasCloseButton:M,ref:U,children:["string"==typeof E?e(l,{"data-element":"dialog-title",title:E,titleId:V,subheader:D,subtitleId:X,divider:!1,help:K}):E,I]}):null,M&&R?e(d,h(y({"aria-label":N.dialogFullScreen.ariaLabels.close(),onClick:R},f("close",y({"data-element":"close"},z))),{children:e(p,{type:"close"})})):null,e(s,{hasHeader:void 0!==E,"data-element":"content","data-role":"dialog-full-screen-content",ref:B,disableContentPadding:T,children:k})]}))})}))};export{_ as DialogFullScreen,_ as default};
|