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.
Files changed (139) hide show
  1. package/esm/__internal__/checkable-input/checkable-input.component.d.ts +0 -5
  2. package/esm/__internal__/checkable-input/checkable-input.component.js +1 -1
  3. package/esm/__internal__/fieldset/fieldset.component.d.ts +1 -6
  4. package/esm/__internal__/fieldset/fieldset.component.js +1 -1
  5. package/esm/__internal__/fieldset/fieldset.style.d.ts +0 -6
  6. package/esm/__internal__/fieldset/fieldset.style.js +1 -1
  7. package/esm/__internal__/form-field/form-field.component.d.ts +1 -6
  8. package/esm/__internal__/form-field/form-field.component.js +1 -1
  9. package/esm/__internal__/input/input.component.d.ts +0 -5
  10. package/esm/__internal__/input/input.component.js +1 -1
  11. package/esm/__internal__/label/label.component.d.ts +2 -2
  12. package/esm/__internal__/label/label.component.js +1 -1
  13. package/esm/__internal__/label/label.style.d.ts +0 -4
  14. package/esm/__internal__/label/label.style.js +1 -1
  15. package/esm/components/badge/badge.component.d.ts +15 -8
  16. package/esm/components/badge/badge.component.js +1 -1
  17. package/esm/components/badge/badge.style.d.ts +6 -5
  18. package/esm/components/badge/badge.style.js +1 -1
  19. package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts +1 -6
  20. package/esm/components/checkbox/checkbox-group/checkbox-group.component.js +1 -1
  21. package/esm/components/checkbox/checkbox.component.js +1 -1
  22. package/esm/components/date-range/date-range.component.d.ts +1 -6
  23. package/esm/components/date-range/date-range.component.js +1 -1
  24. package/esm/components/dialog/dialog.component.js +1 -1
  25. package/esm/components/dialog-full-screen/dialog-full-screen.component.js +1 -1
  26. package/esm/components/fieldset/fieldset.component.d.ts +1 -6
  27. package/esm/components/fieldset/fieldset.component.js +1 -1
  28. package/esm/components/fieldset/fieldset.style.d.ts +0 -7
  29. package/esm/components/fieldset/fieldset.style.js +1 -1
  30. package/esm/components/file-input/file-input.component.d.ts +0 -5
  31. package/esm/components/file-input/file-input.component.js +1 -1
  32. package/esm/components/inline-inputs/inline-inputs.component.d.ts +1 -6
  33. package/esm/components/inline-inputs/inline-inputs.component.js +1 -1
  34. package/esm/components/loader/loader.component.d.ts +1 -6
  35. package/esm/components/loader/loader.component.js +1 -1
  36. package/esm/components/modal/modal.component.d.ts +1 -3
  37. package/esm/components/modal/modal.component.js +1 -1
  38. package/esm/components/numeral-date/numeral-date.component.d.ts +0 -5
  39. package/esm/components/numeral-date/numeral-date.component.js +1 -1
  40. package/esm/components/numeral-date/numeral-date.style.d.ts +1 -1
  41. package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts +1 -6
  42. package/esm/components/radio-button/radio-button-group/radio-button-group.component.js +1 -1
  43. package/esm/components/radio-button/radio-button.component.d.ts +1 -1
  44. package/esm/components/select/__internal__/select-textbox/select-textbox.component.d.ts +0 -5
  45. package/esm/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
  46. package/esm/components/select/filterable-select/filterable-select.component.d.ts +0 -5
  47. package/esm/components/select/filterable-select/filterable-select.component.js +1 -1
  48. package/esm/components/select/multi-select/multi-select.component.d.ts +0 -5
  49. package/esm/components/select/multi-select/multi-select.component.js +1 -1
  50. package/esm/components/select/simple-select/simple-select.component.d.ts +0 -5
  51. package/esm/components/select/simple-select/simple-select.component.js +1 -1
  52. package/esm/components/switch/switch.component.js +1 -1
  53. package/esm/components/tabs/__internal__/tab-title/tab-title.component.js +1 -1
  54. package/esm/components/text-editor/text-editor.component.d.ts +0 -5
  55. package/esm/components/text-editor/text-editor.component.js +1 -1
  56. package/esm/components/textarea/textarea.component.d.ts +0 -5
  57. package/esm/components/textarea/textarea.component.js +1 -1
  58. package/esm/components/textbox/textbox.component.d.ts +0 -5
  59. package/esm/components/textbox/textbox.component.js +1 -1
  60. package/esm/components/tile-select/tile-select.style.d.ts +1 -1
  61. package/esm/components/time/time.component.d.ts +0 -5
  62. package/esm/components/time/time.component.js +1 -1
  63. package/esm/components/time/time.style.d.ts +1 -1
  64. package/esm/locales/de-de.js +1 -1
  65. package/esm/locales/en-gb.js +1 -1
  66. package/esm/locales/es-es.js +1 -1
  67. package/esm/locales/fr-ca.js +1 -1
  68. package/esm/locales/fr-fr.js +1 -1
  69. package/esm/locales/locale.d.ts +0 -3
  70. package/lib/__internal__/checkable-input/checkable-input.component.d.ts +0 -5
  71. package/lib/__internal__/checkable-input/checkable-input.component.js +1 -1
  72. package/lib/__internal__/fieldset/fieldset.component.d.ts +1 -6
  73. package/lib/__internal__/fieldset/fieldset.component.js +1 -1
  74. package/lib/__internal__/fieldset/fieldset.style.d.ts +0 -6
  75. package/lib/__internal__/fieldset/fieldset.style.js +1 -1
  76. package/lib/__internal__/form-field/form-field.component.d.ts +1 -6
  77. package/lib/__internal__/form-field/form-field.component.js +1 -1
  78. package/lib/__internal__/input/input.component.d.ts +0 -5
  79. package/lib/__internal__/input/input.component.js +1 -1
  80. package/lib/__internal__/label/label.component.d.ts +2 -2
  81. package/lib/__internal__/label/label.component.js +1 -1
  82. package/lib/__internal__/label/label.style.d.ts +0 -4
  83. package/lib/__internal__/label/label.style.js +1 -1
  84. package/lib/components/badge/badge.component.d.ts +15 -8
  85. package/lib/components/badge/badge.component.js +1 -1
  86. package/lib/components/badge/badge.style.d.ts +6 -5
  87. package/lib/components/badge/badge.style.js +1 -1
  88. package/lib/components/checkbox/checkbox-group/checkbox-group.component.d.ts +1 -6
  89. package/lib/components/checkbox/checkbox-group/checkbox-group.component.js +1 -1
  90. package/lib/components/checkbox/checkbox.component.js +1 -1
  91. package/lib/components/date-range/date-range.component.d.ts +1 -6
  92. package/lib/components/date-range/date-range.component.js +1 -1
  93. package/lib/components/dialog/dialog.component.js +1 -1
  94. package/lib/components/dialog-full-screen/dialog-full-screen.component.js +1 -1
  95. package/lib/components/fieldset/fieldset.component.d.ts +1 -6
  96. package/lib/components/fieldset/fieldset.component.js +1 -1
  97. package/lib/components/fieldset/fieldset.style.d.ts +0 -7
  98. package/lib/components/fieldset/fieldset.style.js +1 -1
  99. package/lib/components/file-input/file-input.component.d.ts +0 -5
  100. package/lib/components/file-input/file-input.component.js +1 -1
  101. package/lib/components/inline-inputs/inline-inputs.component.d.ts +1 -6
  102. package/lib/components/inline-inputs/inline-inputs.component.js +1 -1
  103. package/lib/components/loader/loader.component.d.ts +1 -6
  104. package/lib/components/loader/loader.component.js +1 -1
  105. package/lib/components/modal/modal.component.d.ts +1 -3
  106. package/lib/components/modal/modal.component.js +1 -1
  107. package/lib/components/numeral-date/numeral-date.component.d.ts +0 -5
  108. package/lib/components/numeral-date/numeral-date.component.js +1 -1
  109. package/lib/components/numeral-date/numeral-date.style.d.ts +1 -1
  110. package/lib/components/radio-button/radio-button-group/radio-button-group.component.d.ts +1 -6
  111. package/lib/components/radio-button/radio-button-group/radio-button-group.component.js +1 -1
  112. package/lib/components/radio-button/radio-button.component.d.ts +1 -1
  113. package/lib/components/select/__internal__/select-textbox/select-textbox.component.d.ts +0 -5
  114. package/lib/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
  115. package/lib/components/select/filterable-select/filterable-select.component.d.ts +0 -5
  116. package/lib/components/select/filterable-select/filterable-select.component.js +1 -1
  117. package/lib/components/select/multi-select/multi-select.component.d.ts +0 -5
  118. package/lib/components/select/multi-select/multi-select.component.js +1 -1
  119. package/lib/components/select/simple-select/simple-select.component.d.ts +0 -5
  120. package/lib/components/select/simple-select/simple-select.component.js +1 -1
  121. package/lib/components/switch/switch.component.js +1 -1
  122. package/lib/components/tabs/__internal__/tab-title/tab-title.component.js +1 -1
  123. package/lib/components/text-editor/text-editor.component.d.ts +0 -5
  124. package/lib/components/text-editor/text-editor.component.js +1 -1
  125. package/lib/components/textarea/textarea.component.d.ts +0 -5
  126. package/lib/components/textarea/textarea.component.js +1 -1
  127. package/lib/components/textbox/textbox.component.d.ts +0 -5
  128. package/lib/components/textbox/textbox.component.js +1 -1
  129. package/lib/components/tile-select/tile-select.style.d.ts +1 -1
  130. package/lib/components/time/time.component.d.ts +0 -5
  131. package/lib/components/time/time.component.js +1 -1
  132. package/lib/components/time/time.style.d.ts +1 -1
  133. package/lib/locales/de-de.js +1 -1
  134. package/lib/locales/en-gb.js +1 -1
  135. package/lib/locales/es-es.js +1 -1
  136. package/lib/locales/fr-ca.js +1 -1
  137. package/lib/locales/fr-fr.js +1 -1
  138. package/lib/locales/locale.d.ts +0 -3
  139. 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 p from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function u(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function b(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){u(e,r,n[r])}))}return e}const s=n.forwardRef(((n,u)=>{var{ariaLabelledBy:s,autoFocus:f,checked:y,children:m,disabled:O,loading:h,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:_,isOptional:E,reverse:A=!1,validationOnLabel:R,warning:N,isDarkBackground:V=!1}=n,z=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","isOptional","reverse","validationOnLabel","warning","isDarkBackground"]);const{current:G}=l(k||d()),{labelId:J,fieldHelpId:K,validationId:M,ariaDescribedBy:Q}=p({id:G,error:g,warning:N,info:I,label:B,fieldHelp:j}),T={disabled:O,loading:h,error:g,fieldHelp:j,fieldHelpInline:v,fieldHelpId:K,id:G,info:I,label:B,labelHelp:D,labelHelpIcon:"info",labelId:J,labelInline:S,labelSpacing:F,reverse:A,warning:N,validationIconId:M,isRequired:_,isOptional:E,useValidationIcon:R},U=b({ariaDescribedBy:Q,"aria-labelledby":s,"aria-invalid":!!g,autoFocus:f,checked:y,disabled:O,id:G,type:w,value:H,name:x,onBlur:q,onChange:C,onFocus:L,required:_,ref:u,validationIconId:M},z);return e(i,{disabled:O,fieldHelpInline:v,inputWidth:P,labelWidth:W,labelInline:S,reverse:A,isDarkBackground:V,children:e(a,{children:e(o,(X=b({},T),Y={my:0,children:r(t,{"data-role":"checkable-input",children:[e(c,b({},U)),m]})},Y=null!=Y?Y:{},Object.getOwnPropertyDescriptors?Object.defineProperties(X,Object.getOwnPropertyDescriptors(Y)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(Y)).forEach((function(e){Object.defineProperty(X,e,Object.getOwnPropertyDescriptor(Y,e))})),X))})});var X,Y}));s.displayName="CheckableInput";export{s as default};
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, isOptional, labelHelp, validationId, ...rest }: FieldsetProps) => React.JSX.Element;
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 a,StyledIconWrapper as p}from"./fieldset.style.js";import{ValidationIcon as s}from"../validations/validation-icon.component.js";import c 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 m}from"../../components/typography/typography.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import g from"../../style/utils/filter-styled-system-margin-props.js";import b from"../../hooks/__internal__/useLocale/useLocale.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 O(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){y(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 j=y=>{var{legend:j,children:v,inline:w=!1,legendWidth:P,legendAlign:S,legendSpacing:_=2,error:k,warning:D,info:E,isRequired:M,blockGroupBehaviour:q,legendMargin:x={},isDisabled:A,isOptional:L,labelHelp:R,validationId:B}=y,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}(y,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","isOptional","labelHelp","validationId"]);const{validationRedesignOptIn:F}=n(c),G=g(I),[H,W]=t(null),[C,z]=t(!1),J=b().label.optional();o((()=>{H&&M&&Array.from(H.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[H,M]);let K;return K=w&&!S?"right":S||"left",e(d,{blockGroupBehaviour:q,children:r(i,h(O({ref:W,"data-component":"fieldset"},I,G),{children:[j&&e(u.Consumer,{children:({onMouseEnter:n,onMouseLeave:t})=>e(l,h(O({onMouseEnter:n,onMouseLeave:t,inline:w,width:P,align:K,rightPadding:_},x),{"data-element":"legend","data-role":"legend",children:r(a,{isRequired:M,isOptional:L,optionalLabel:J,isDisabled:A,children:[j,!F&&(k||D||E?e(p,{"aria-hidden":"true",children:e(s,{error:k,warning:D,info:E,tooltipFlipOverrides:["top","bottom"]})}):R?e(p,h(O({},{onFocus:()=>z(!0),onBlur:()=>z(!1)}),{children:e(f,{isFocused:C,children:R})})):null)]})}))}),!F&&e(m,{screenReaderOnly:!0,id:B,children:k||D||E}),v]}))})};export{j as default};
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-5eed3c01-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-5eed3c01-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;}'])),(({isOptional:e,optionalLabel:t})=>e&&i(['::after{content:"(',')";color:var(--colorsUtilityYin055);font-weight:var(--fontWeights400);margin-left:var(--spacing050);}'],t)),(({isDisabled:e})=>e&&i(["color:var(--colorsUtilityYin030);::after{color:var(--colorsUtilityYin030);}"]))),l=e.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-5eed3c01-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),r=e.div.withConfig({displayName:"fieldset.style__StyledIconWrapper",componentId:"sc-5eed3c01-3"})(["margin-left:var(--spacing050);"]);export{o as StyledFieldset,r as StyledIconWrapper,l as StyledLegend,a as StyledLegendContent};
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, isOptional, useValidationIcon, adaptiveLabelBreakpoint, isRequired, validationIconId, validationRedesignOptIn, ...rest }: FormFieldProps): React.JSX.Element;
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 i,useLayoutEffect as l,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":h,disabled:j,loading:v,fieldHelp:w,fieldHelpInline:P,error:H,warning:k,info:x,tooltipId:S,fieldHelpId:_,label:W,labelId:A,labelAlign:q,labelHelp:R,labelHelpIcon:B,labelInline:D,labelSpacing:E=2,labelWidth:F,labelAs:V,id:L,reverse:N,isOptional:U,useValidationIcon:$,adaptiveLabelBreakpoint:z,isRequired:C,validationIconId:G,validationRedesignOptIn:J}=O,K=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(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","isOptional","useValidationIcon","adaptiveLabelBreakpoint","isRequired","validationIconId","validationRedesignOptIn"]);const M=n((()=>{const e={error:!!H,warning:!!k,info:!!x};if(j&&!v)return Object.keys(e).find((t=>e[t]))}),[H,k,x,j]);a(void 0===M,`Prop \`${M}\` cannot be used in conjunction with \`disabled\`. Use \`readOnly\` if you require users to see validations with a non-interactive field`),a(!(C&&U),"an input cannot be set to both required and optional at the same time");const Q=u(z);let T=D;z&&(T=Q);const{setError:X,setWarning:Y,setInfo:Z}=r(f),ee=m(K),te=i(!1);l((()=>(te.current=!0,()=>{te.current=!1})),[]),o((()=>(X&&X(L,H),Y&&Y(L,k),Z&&Z(L,x),()=>{te.current||(X&&H&&X(L,!1),Y&&k&&Y(L,!1),Z&&x&&Z(L,!1))})),[L,X,Y,Z,H,k,x]);const ne=w?t(c,{labelInline:T,labelWidth:F,id:_,children:w}):null;return e(s,(re=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(h,K),ee),ie=null!=(ie={children:[e(d,{"data-role":"field-line",inline:T,maxWidth:g,children:[N&&I,W&&t(p,{labelId:A,align:q,disabled:j,error:!J&&H,warning:!J&&k,info:!J&&x,help:R,tooltipId:S,htmlFor:L,helpIcon:B,inline:T,width:F,optional:U,useValidationIcon:$,pr:N?void 0:E,pl:N?E:void 0,isRequired:C,validationIconId:G,as:V,children:W}),P&&ne,!N&&I]}),!P&&ne]})?ie:{},Object.getOwnPropertyDescriptors?Object.defineProperties(re,Object.getOwnPropertyDescriptors(ie)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(ie)).forEach((function(e){Object.defineProperty(re,e,Object.getOwnPropertyDescriptor(ie,e))})),re));var re,ie};O.displayName="FormField";export{O as default};
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 i}from"react";import u from"./input.style.js";import{InputContext as c}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as a}from"../input-behaviour/input-group-behaviour.component.js";import{SelectTextboxContext as l}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 d=t.forwardRef(((t,d)=>{var{align:p,"aria-labelledby":b,"aria-describedby":f,ariaDescribedBy:y,placeholder:m,disabled:O,readOnly:h,autoFocus:g,onClick:v,onChangeDeferred:j,onChange:B,onBlur:P,onFocus:w,deferTimeout:x,type:F="text",id:I,name:S,validationIconId:C,inputBorderRadius:D="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={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["align","aria-labelledby","aria-describedby","ariaDescribedBy","placeholder","disabled","readOnly","autoFocus","onClick","onChangeDeferred","onChange","onBlur","onFocus","deferTimeout","type","id","name","validationIconId","inputBorderRadius","enterKeyHint"]);const E=r(c),T=r(a),{isInputInSelect:_}=r(l),H=n(null);let K=n(null);d&&"current"in d&&(K=d);const M=o((e=>{K.current=e,"function"==typeof d&&d(e),g&&e&&e.focus(),R&&e&&e.setAttribute("enterkeyhint",R)}),[g,d,R]);i((()=>{E.inputRef&&E.inputRef(K)}),[E,K]),i((()=>{O&&E.onBlur&&E.onBlur()}),[O,E]);const A=f||y?[f||y]:[];(E.hasFocus||T.hasFocus||E.hasMouseOver||T.hasMouseOver)&&C&&A.push(C);const N=A.length?A.filter(Boolean).join(" "):void 0;return e(u,(q=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),z={isInputInSelect:_,"data-has-autofocus":!!g||void 0,"aria-describedby":N,"aria-labelledby":b,align:p,placeholder:m,disabled:O,readOnly:h,name:S,type:F,id:I||S,ref:M,"data-element":"input",onFocus:e=>{w&&w(e),E.onFocus&&E.onFocus(),T.onFocus&&T.onFocus(),"text"===F&&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)}}))}(K)},onBlur:e=>{P&&P(e),E.onBlur&&E.onBlur(),T.onBlur&&T.onBlur()},onClick:O||h?void 0:e=>{var t;v&&v(e),null==K||null===(t=K.current)||void 0===t||t.focus()},onChange:e=>{B&&B(e),(e=>{j&&(H.current&&clearTimeout(H.current),H.current=setTimeout((()=>{j(e)}),x||750))})(e)},inputBorderRadius:D},z=null!=z?z:{},Object.getOwnPropertyDescriptors?Object.defineProperties(q,Object.getOwnPropertyDescriptors(z)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(z)).forEach((function(e){Object.defineProperty(q,e,Object.getOwnPropertyDescriptor(z,e))})),q));var q,z}));d.displayName="Input";export{d as default};
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, optional, 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, optional, 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, }: 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 p}from"./label.style.js";import{ValidationIcon as c}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 b}from"../input-behaviour/input-group-behaviour.component.js";import d from"../utils/helpers/guid/index.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";function f(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function h(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){f(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 j=({align:o,as:f="label",children:j,disabled:O,error:y,help:w,helpIcon:v,htmlFor:P,info:I,inline:k,isDarkBackground:D=!1,isRequired:L,labelId:M,optional:E,pr:F,pl:S,tooltipId:_,useValidationIcon:x=!0,validationIconId:B,warning:q,width:N=30,className:R,"aria-label":V})=>{const[$,z]=n(!1),{onMouseEnter:A,onMouseLeave:C}=t(u),{onMouseEnter:G,onMouseLeave:H}=t(b),J=i(d()),K=m().label.optional();let Q;return Q=k&&!o?"right":o||"left",e(p,{"data-role":"label-container",id:`label-container-${null!=M?M:J.current}`,align:Q,inline:k,width:N,optional:E,pr:F,pl:S,className:R,optionalLabel:K,children:[r(a,g(h({"data-element":"label",disabled:O,id:M},"label"===f?{htmlFor:P}:{}),{onMouseEnter:()=>{A&&A(),G&&G()},onMouseLeave:()=>{C&&C(),H&&H()},isRequired:L,as:f,"aria-label":V,isDarkBackground:D,children:j})),(()=>{const e={onFocus:()=>z(!0),onBlur:()=>z(!1)};if(x&&(({error:e,warning:r,info:o,disabled:n})=>!n&&"string"==typeof(e||r||o))({error:y,warning:q,info:I,disabled:O})){const e=(({error:e,warning:r,info:o,inline:n})=>(e||r||o)&&n?"top":"right")({error:y,warning:q,info:I,inline:k});return r(s,{children:r(c,{tooltipId:B,error:y,warning:q,info:I,tooltipPosition:e,tooltipFlipOverrides:["top","bottom"]})})}return w&&r(s,g(h({},e),{children:r(l,{tooltipId:_,type:v,isFocused:$,children:w})}))})()]})};var O=o.memo(j);export{j as Label,O as default};
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 t,{css as i}from"styled-components";const o=t.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-61d9c380-0"})([""," display:block;font-weight:var(--fontWeights500);"," ",""],(({isDarkBackground:t})=>i(["color:",";"],t?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isRequired:t})=>t&&i(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:t})=>t&&i(["color:var(--colorsUtilityYin030);"]))),a=t.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-61d9c380-1"})(["display:flex;align-items:center;margin-bottom:8px;"," "," ",""],(({align:t})=>i(["justify-content:",";"],"right"!==t?"flex-start":"flex-end")),(({inline:t,pr:o,pl:a,width:n})=>t&&i(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],o&&i(["padding-right:var(",");"],1===o?"--spacing100":"--spacing200"),a&&i(["padding-left:var(",");"],1===a?"--spacing100":"--spacing200"),n)),(({optional:t,optionalLabel:o})=>t&&i(['::after{content:"(',')";font-weight:var(--fontWeights400);margin-left:var(--spacing050);color:var(--colorsUtilityYin055);}'],o)));export{a as StyledLabelContainer,o as default};
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 { TagProps } from "../../__internal__/utils/helpers/tags";
3
- export interface BadgeProps extends TagProps {
4
- /** Prop to specify an aria-label for the component */
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 added to this element */
7
- children: React.ReactNode;
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, "data-element": dataElement, "data-role": dataRole, }: BadgeProps) => React.JSX.Element;
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 o}from"react";import{StyledBadgeWrapper as n,StyledBadge as c,StyledCrossIcon as a,StyledCounter as i}from"./badge.style.js";import l from"../../__internal__/utils/helpers/guid/index.js";function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const u=({"aria-label":u,children:b,counter:p=0,color:d="--colorsActionMajor500",onClick:f,id:y,"data-element":O,"data-role":m})=>{const j=+p>0,g=+p>99?99:p,[P,h]=t(!1),[w,v]=t(!1),{current:k}=o(y||l());return e(n,{children:[b,j?e(c,(D=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){s(e,r,t[r])}))}return e}({"data-component":"badge","data-element":O,"data-role":m,color:d,id:k,"aria-label":u,onFocus:()=>{h(!0)},onBlur:()=>{h(!1)},onMouseEnter:()=>{v(!0)},onMouseLeave:()=>{v(!1)},isFocused:P,isHovered:w},f&&{buttonType:"secondary",onClick:f}),S={children:[f&&r(a,{"data-element":"badge-cross-icon",type:"cross"}),r(i,{"data-element":"badge-counter",children:g})]},S=null!=S?S:{},Object.getOwnPropertyDescriptors?Object.defineProperties(D,Object.getOwnPropertyDescriptors(S)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(S)).forEach((function(e){Object.defineProperty(D,e,Object.getOwnPropertyDescriptor(S,e))})),D)):null]});var D,S};export{u as Badge,u as default};
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
- color: string;
5
- isFocused?: boolean;
6
- isHovered?: boolean;
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
- declare const StyledCrossIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
14
- export { StyledBadge, StyledBadgeWrapper, StyledCrossIcon, StyledCounter };
15
+ export { StyledBadge, StyledBadgeWrapper, StyledCounter };
@@ -1 +1 @@
1
- import n,{css as o}from"styled-components";import e from"../icon/icon.style.js";import t from"../button/button.component.js";import i from"../icon/icon.component.js";import r from"../../style/themes/apply-base-theme.js";import{toColor as s}from"../../style/utils/color.js";const a="\n overflow: hidden;\n border-radius: var(--borderRadiusCircle);\n position: absolute;\n top: -14px;\n right: -4px;\n padding: 0;\n margin-right: 0;\n background: var(--colorsActionMajorYang100);\n",d=n.div.withConfig({displayName:"badge.style__StyledBadgeWrapper",componentId:"sc-c6b5a4b6-0"})(["position:relative;display:inline-block;"]),c=n.div.withConfig({displayName:"badge.style__StyledCounter",componentId:"sc-c6b5a4b6-1"})(["font-weight:500;font-size:12px;margin-top:-1px;"]),l=n.span.attrs(r).attrs((({onClick:n})=>({as:n?t:void 0}))).withConfig({displayName:"badge.style__StyledBadge",componentId:"sc-c6b5a4b6-2"})([""," cursor:default;align-items:center;display:inline-flex;justify-content:center;width:22px;min-height:22px;border:solid 2px transparent;z-index:2;",";::-moz-focus-inner{border:none;}",""],a,(({color:n,theme:e})=>o(["border-color:",";color:",";"],s(e,n),s(e,n))),(({onClick:n,color:t,theme:i,isFocused:r,isHovered:d})=>o(["",""],n&&`\n ${a}\n width: 26px;\n min-height: 26px;\n text-align: center;\n\n ::-moz-focus-inner {\n border: none;\n }\n\n border-color: ${s(i,t)};\n color: ${s(i,t)};\n\n ${(r||d)&&`\n && {\n background: ${s(i,t)};\n border: none;\n ${c} {\n display: none;\n }\n\n ${e} {\n display: block;\n width: auto;\n height: auto;\n margin-right: 0;\n\n :before {\n font-size: 20px;\n color: var(--colorsActionMajorYang100);\n }\n }\n }\n `}\n }\n `))),p=n(i).withConfig({displayName:"badge.style__StyledCrossIcon",componentId:"sc-c6b5a4b6-3"})(["margin:0;display:none;"]);export{l as StyledBadge,d as StyledBadgeWrapper,c as StyledCounter,p as StyledCrossIcon};
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, isOptional, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, validationMessagePositionTop, ...rest }: CheckboxGroupProps): React.JSX.Element;
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 s from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as d}from"../../../__internal__/tooltip-provider/index.js";import p from"../../carbon-provider/__internal__/new-validation.context.js";import c 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";import _ from"../../../__internal__/utils/logger/index.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 O(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}let v=!1;const x=y=>{var{children:x,legend:w,error:P,warning:k,info:I,required:S,isOptional:q,legendInline:A,legendWidth:D,legendAlign:T="left",legendSpacing:B,legendHelp:G,tooltipPosition:M,inline:R,id:E,validationMessagePositionTop:W=!0}=y,C=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","isOptional","legendInline","legendWidth","legendAlign","legendSpacing","legendHelp","tooltipPosition","inline","id","validationMessagePositionTop"]);!v&&q&&(v=!0,_.deprecate("`isOptional` is deprecated in CheckboxGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:H}=i(p),N=t(m()),$=E||N.current,z=G?`${$}-hint`:void 0,{validationId:F,ariaDescribedBy:J}=b({id:$,validationRedesignOptIn:!0,error:P,warning:k,info:I}),K=(H&&W?[J,z]:[z,J]).filter(Boolean).join(" ");return e(r,{children:H?n(a,j(O(j(O({id:$,legend:w,legendAlign:T,error:P,warning:k,isRequired:S,isOptional:q,width:"fit-content"},K&&{"aria-describedby":K},l("checkboxgroup",C)),{blockGroupBehaviour:!(P||k)}),s(C)),{children:[G&&e(h,{align:T,id:z,marginTop:"-4px",children:G}),n(g,{position:"relative",children:[W&&n(r,{children:[e(c,{error:P,warning:k,validationId:F,validationMessagePositionTop:W}),(P||k)&&e(u,{warning:!(P||!k)})]}),e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",inline:R,children:e(f.Provider,{value:{error:!!P,warning:!!k},children:x})}),!W&&n(r,{children:[e(c,{error:P,warning:k,validationId:F,validationMessagePositionTop:W}),(P||k)&&e(u,{warning:!(P||!k)})]})]})]})):e(d,{tooltipPosition:M,children:e(a,j(O(j(O({id:$,legend:w,inline:A,legendWidth:D,legendAlign:T,legendSpacing:B,error:P,warning:k,info:I,isRequired:S,isOptional:q,"aria-describedby":J,validationId:F},l("checkboxgroup",C)),{blockGroupBehaviour:!(P||k||I)}),s(C)),{children:e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",legendInline:A,children:e(f.Provider,{value:{error:!!P,warning:!!k,info:!!I},children:x})})}))})})};x.displayName="CheckboxGroup";export{x as CheckboxGroup,x as default};
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,isOptional:A,error:L,warning:D,info:q,fieldHelpInline:z,reverse:E=!1,checked:N,disabled:R,inputWidth:U,size:V,tooltipPosition:G,"data-element":J,"data-role":K,helpAriaLabel:M}=t,Q=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","isOptional","error","warning","info","fieldHelpInline","reverse","checked","disabled","inputWidth","size","tooltipPosition","data-element","data-role","helpAriaLabel"]);const{validationRedesignOptIn:T}=n(b),X=p(W),Y=!(!W||X),Z=n(s),{error:$,warning:ee,info:re}=Z;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 te=h(m({ariaLabelledBy:g,onClick:k,onChange:v,onBlur:w,onFocus:P,labelInline:!0,id:O,label:j,value:x,type:"checkbox",name:_,reverse:!E,fieldHelp:S,autoFocus:H,labelHelp:I,labelSpacing:B,required:F,isOptional:A,fieldHelpInline:z,checked:N,disabled:R,inputWidth:U,labelWidth:C,ref:f},Q),{"data-component":void 0}),ne=m({error:$||L,warning:ee||D},T?{validationOnLabel:!1}:{info:re||q}),oe=u(Q),ie=e(i,h(m(h(m({disabled:R,labelSpacing:B,inputWidth:U,adaptiveSpacingSmallScreen:Y},ne),{fieldHelpInline:z,reverse:E,size:V,applyNewValidation:T}),oe,o("checkbox",{"data-element":J,"data-role":K})),{children:e(l,h(m({},te,ne),{children:e(a,{})}))}));return e(r,{children:T?ie:e(c,{helpAriaLabel:M,tooltipPosition:G,children:ie})})}));g.displayName="Checkbox";export{g as Checkbox,g as default};
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, isOptional, dateFormatOverride: dateFormatOverrideProp, datePickerStartAriaLabel, datePickerStartAriaLabelledBy, datePickerEndAriaLabel, datePickerEndAriaLabelledBy, validationMessagePositionTop, ...rest }: DateRangeProps): React.JSX.Element;
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 o,useEffect as l}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";import _ from"../../__internal__/utils/logger/index.js";function j(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function w(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){j(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}let h=!1;const B=j=>{var{endDateProps:B={},id:L,labelsInline:V,name:E,onBlur:A,onChange:D,startDateProps:S={},tooltipPosition:x,validationOnLabel:I,value:R,startRef:F,endRef:M,required:T,isOptional:q,dateFormatOverride:K,datePickerStartAriaLabel:$,datePickerStartAriaLabelledBy:C,datePickerEndAriaLabel:N,datePickerEndAriaLabelledBy:W,validationMessagePositionTop:z=!0}=j,G=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(j,["endDateProps","id","labelsInline","name","onBlur","onChange","startDateProps","tooltipPosition","validationOnLabel","value","startRef","endRef","required","isOptional","dateFormatOverride","datePickerStartAriaLabel","datePickerStartAriaLabelledBy","datePickerEndAriaLabel","datePickerEndAriaLabelledBy","validationMessagePositionTop"]);!h&&q&&(h=!0,_.deprecate("`isOptional` is deprecated in DateRange and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:H}=r(P),J=!H&&V,Q=y(),{dateFnsLocale:U,dateFormatOverride:X}=Q.date,{format:Y}=a((()=>O(U(),K||X)),[U,K,X]),[Z,ee]=n(""),te=o((e=>i(e)?s(Y,d(e)):e),[Y]),re=o((()=>{const{value:e}=S;return te(e||R[0])}),[S,R,te]),ae=o((()=>{const{value:e}=B;return te(e||R[1])}),[B,R,te]),[ne,oe]=n({start:{isBlurBlocked:{current:!1},setOpen:null},end:{isBlurBlocked:{current:!1},setOpen:null}});function le(e,t){return e&&!t.length}const[ie,se]=n({formattedValue:re(),rawValue:le(!!S.allowEmptyValue,re())?"":u(Y,re())}),[de,ue]=n({formattedValue:ae(),rawValue:le(!!B.allowEmptyValue,ae())?"":u(Y,ae())}),ce=v(R);l((()=>{(null==ce?void 0:ce.length)&&(R[0]!==ce[0]||R[1]!==ce[1])&&(se({formattedValue:re(),rawValue:le(!!S.allowEmptyValue,re())?"":u(Y,re())}),ue({formattedValue:ae(),rawValue:le(!!B.allowEmptyValue,ae())?"":u(Y,ae())}))}),[R,ce,B.allowEmptyValue,Y,ae,re,S.allowEmptyValue]);const pe=o(((e,t)=>{const r="start"===e?t:ie,a="end"===e?t:de;return ee(e),{target:k(w({},E&&{name:E},L&&{id:L}),{value:[r,a]})}}),[de,L,E,ie]),me=(e,t)=>{"start"===e?se(w({},t.target.value)):ue(w({},t.target.value));const r=pe(e,t.target.value);D(r)},fe=e=>{me("start",e)},be=e=>{me("end",e)},ye=e=>{var t,r;if(!(null==ne||null===(t=ne.start)||void 0===t?void 0:t.isBlurBlocked.current)&&!(null==ne||null===(r=ne.end)||void 0===r?void 0:r.isBlurBlocked.current)&&A){const t=pe(Z,e.target.value);A(t)}},ve=e=>{(e=>{const t=null==ne?void 0:ne[e];var r;t&&(null===(r=t.setOpen)||void 0===r||r.call(t,!1),t.isBlurBlocked.current=!1)})(e),ee("start"===e?"end":"start")},Oe=e=>{const t="start"===e?S:B,{formattedValue:r}="start"===e?ie:de,a="start"===e?fe:be;return k(w({label:G[`${e}Label`],labelInline:J,value:r,error:G[`${e}Error`],warning:G[`${e}Warning`],info:G[`${e}Info`],validationOnLabel:I,onBlur:ye,onChange:a,onKeyDown:t=>((e,t)=>{b.isTabKey(e)&&b.isShiftKey(e)&&(null==ne?void 0:ne.start)?ne.start.isBlurBlocked.current=!("start"===t):b.isTabKey(e)&&(null==ne?void 0:ne.end)&&(ne.end.isBlurBlocked.current=!("end"===t))})(t,e)},t),{required:T,isOptional:q})};return e(f,k(w(k(w({},m("date-range",G)),{labelsInline:J}),p(G)),{validationMessagePositionTop:z,children:t(g.Provider,{value:{inputRefMap:ne,setInputRefMap:e=>{oe((t=>w({},t,e)))},validationMessagePositionTop:z},children:[e(c,k(w({my:0},Oe("start")),{onFocus:()=>ve("end"),"data-element":"start-date",inputName:"start",labelWidth:40,tooltipPosition:x,ref:F,datePickerAriaLabel:$,datePickerAriaLabelledBy:C})),e(c,k(w({my:0},Oe("end")),{onFocus:()=>ve("start"),"data-element":"end-date",inputName:"end",labelWidth:40,tooltipPosition:x,ref:M,datePickerAriaLabel:N,datePickerAriaLabelledBy:W}))]})}))};B.displayName="DateRange";export{B as DateRange,B as default};
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 m from"../icon-button/icon-button.component.js";import f from"../icon/icon.component.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import h from"../../hooks/__internal__/useModalAria/useModalAria.js";import y from"../../__internal__/utils/logger/index.js";function O(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function j(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){O(e,o,t[o])}))}return e}function _(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}let v=!1;const P=t(((t,O)=>{var{className:P,"data-component":w="dialog","data-element":C="dialog","data-role":k,children:F,open:x,height:S,size:E="medium",title:I,disableEscKey:D,subtitle:M,disableAutoFocus:A=!1,focusFirstElement:B,focusableSelectors:T,onCancel:z,showCloseIcon:K=!0,bespokeFocusTrap:L,disableClose:N,help:V,highlightVariant:R="default",role:U="dialog",contentPadding:$={},greyBackground:H=!1,focusableContainers:W,topModalOverride:Y,closeButtonDataProps:q,restoreFocusOnClose:G=!0,"aria-labelledby":J,"aria-describedby":Q,"aria-label":X}=t,Z=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 ee=g(),oe=r(null),te=r(null),{current:re}=r(l()),{current:ae}=r(l()),le=h(oe);!v&&(null==Z?void 0:Z.timeout)&&(v=!0,y.deprecate("The timeout prop in Dialog is deprecated and will soon be removed.")),a(O,(()=>({focus(){var e;null===(e=oe.current)||void 0===e||e.focus()}})),[]);const ne=K&&z&&e(m,_(j({"aria-label":ee.dialog.ariaLabels.close(),onClick:z,disabled:N},s("close",j({"data-element":"close"},q))),{children:e(f,{type:"close"})})),ie=I&&e(p,{showCloseIcon:K,hasSubtitle:!!M,ref:te,children:"string"==typeof I?e(i,{"data-element":"dialog-title",title:I,titleId:re,subheader:M,subtitleId:ae,divider:!1,help:V}):I});let se=S;S&&S.match(/px$/)&&(se=S.replace("px",""));const ce={size:E,dialogHeight:se,"aria-labelledby":I&&"string"==typeof I?re:J,"aria-describedby":M&&"string"==typeof M?ae:Q,"aria-label":X};return e(n,_(j({open:x,onCancel:z,disableEscKey:D,disableClose:N,className:P?`${P} carbon-dialog`:"carbon-dialog",topModalOverride:Y,restoreFocusOnClose:G},Z),{children:e(b,{autoFocus:!A,focusFirstElement:B,bespokeTrap:L,focusableSelectors:T,wrapperRef:oe,isOpen:x,additionalWrapperRefs:W,children:e(c,{children:o(d,_(j(_(j({"data-component":w,"data-element":C,"data-role":k,"aria-modal":!!le||void 0,ref:oe},ce),{highlightVariant:R,role:U,tabIndex:-1}),$),{backgroundColor:H?"var(--colorsUtilityMajor025)":"var(--colorsUtilityYang100)",children:[ie,ne,e(u,_(j({},$),{"data-role":"dialog-content",tabIndex:-1,children:F}))]}))})})}))}));export{P as Dialog,P as default};
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 t}from"react";import r from"../../__internal__/utils/helpers/guid/index.js";import n from"../modal/modal.component.js";import{Heading as l}from"../heading/heading.component.js";import i from"../../__internal__/full-screen-heading/full-screen-heading.component.js";import a 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,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function y(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){g(e,o,t[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 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}let O=!1,j=!1,_=!1;const v=g=>{var{"aria-describedby":v,"aria-label":C,"aria-labelledby":P,disableAutoFocus:w=!1,focusFirstElement:S,bespokeFocusTrap:F,open:k,children:D,title:E,subtitle:x,pagesStyling:T,headerChildren:I,showCloseIcon:M=!0,disableContentPadding:A,disableEscKey:R,onCancel:B,contentRef:K,help:L,role:H="dialog",focusableContainers:W,focusableSelectors:q,topModalOverride:z,closeButtonDataProps:G,restoreFocusOnClose:J=!0}=g,N=function(e,o){if(null==e)return{};var t,r,n=function(e,o){if(null==e)return{};var t,r,n={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],o.indexOf(t)>=0||(n[t]=e[t]);return n}(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)&&(n[t]=e[t])}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 Q=u(),U=t(null),V=t(null),{current:X}=t(r()),{current:Y}=t(r()),Z=b(U);!O&&(null==N?void 0:N.disableClose)&&(O=!0,m.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.")),!j&&(null==N?void 0:N.timeout)&&(j=!0,m.deprecate("The timeout prop in DialogFullScreen is deprecated and will soon be removed.")),!_&&T&&(_=!0,m.deprecate("The pagesStyling prop in DialogFullScreen is deprecated and will soon be removed."));const $={"aria-labelledby":E&&"string"==typeof E?X:P,"aria-describedby":x&&"string"==typeof x?Y:v,"aria-label":C};return e(n,h(y({open:k,onCancel:B,disableEscKey:R,topModalOverride:z,restoreFocusOnClose:J},f("dialog-full-screen",N)),{children:e(c,{autoFocus:!w,focusFirstElement:S,bespokeTrap:F,wrapperRef:U,isOpen:k,additionalWrapperRefs:W,focusableSelectors:q,children:o(a,h(y({"aria-modal":!("dialog"!==H||!Z)||void 0},$),{ref:U,"data-element":"dialog-full-screen",pagesStyling:T,role:H,children:[E||I?o(i,{hasContent:!!E,hasCloseButton:M,ref:V,children:["string"==typeof E?e(l,{"data-element":"dialog-title",title:E,titleId:X,subheader:x,subtitleId:Y,divider:!1,help:L}):E,I]}):null,M&&B?e(d,h(y({"aria-label":Q.dialogFullScreen.ariaLabels.close(),onClick:B},f("close",y({"data-element":"close"},G))),{children:e(p,{type:"close"})})):null,e(s,{hasHeader:void 0!==E,"data-element":"content","data-role":"dialog-full-screen-content",ref:K,disableContentPadding:A,children:D})]}))})}))};export{v as DialogFullScreen,v as default};
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};