carbon-react 159.10.0 → 159.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/__internal__/input/input.component.js +1 -1
- package/esm/components/button/__next__/button.style.js +1 -1
- package/esm/components/decimal/__internal__/decimal-popover-button.component.d.ts +7 -0
- package/esm/components/decimal/__internal__/decimal-popover-button.component.js +1 -0
- package/esm/components/decimal/__internal__/decimal-popover-button.style.d.ts +3 -0
- package/esm/components/decimal/__internal__/decimal-popover-button.style.js +1 -0
- package/esm/components/decimal/decimal.component.d.ts +17 -6
- package/esm/components/decimal/decimal.component.js +1 -1
- package/esm/components/decimal/decimal.style.d.ts +2 -0
- package/esm/components/decimal/decimal.style.js +1 -0
- package/esm/components/icon/icon-config.js +1 -1
- package/esm/components/popover-container/popover-container.component.js +1 -1
- package/esm/components/textbox/__internal__/__next__/text-input.component.js +1 -1
- package/esm/components/tokens-wrapper/__internal__/static-tokens/index.d.ts +1 -1
- package/esm/components/tokens-wrapper/__internal__/static-tokens/index.js +1 -1
- package/esm/locales/de-de.js +1 -1
- package/esm/locales/en-gb.js +1 -1
- package/esm/locales/es-es.js +1 -1
- package/esm/locales/fr-ca.js +1 -1
- package/esm/locales/fr-fr.js +1 -1
- package/esm/locales/locale.d.ts +6 -0
- package/esm/locales/pt-pt.js +1 -1
- package/lib/__internal__/input/input.component.js +1 -1
- package/lib/components/button/__next__/button.style.js +1 -1
- package/lib/components/decimal/__internal__/decimal-popover-button.component.d.ts +7 -0
- package/lib/components/decimal/__internal__/decimal-popover-button.component.js +1 -0
- package/lib/components/decimal/__internal__/decimal-popover-button.style.d.ts +3 -0
- package/lib/components/decimal/__internal__/decimal-popover-button.style.js +1 -0
- package/lib/components/decimal/decimal.component.d.ts +17 -6
- package/lib/components/decimal/decimal.component.js +1 -1
- package/lib/components/decimal/decimal.style.d.ts +2 -0
- package/lib/components/decimal/decimal.style.js +1 -0
- package/lib/components/icon/icon-config.js +1 -1
- package/lib/components/textbox/__internal__/__next__/text-input.component.js +1 -1
- package/lib/components/tokens-wrapper/__internal__/static-tokens/index.d.ts +1 -1
- package/lib/components/tokens-wrapper/__internal__/static-tokens/index.js +1 -1
- package/lib/locales/de-de.js +1 -1
- package/lib/locales/en-gb.js +1 -1
- package/lib/locales/es-es.js +1 -1
- package/lib/locales/fr-ca.js +1 -1
- package/lib/locales/fr-fr.js +1 -1
- package/lib/locales/locale.d.ts +6 -0
- package/lib/locales/pt-pt.js +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n,useEffect as a,useCallback as i}from"react";import o from"./input.style.js";import l from"../utils/helpers/combine-refs/index.js";function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(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){d(e,t,r[t])}))}return e}const u=r.forwardRef(((r,d)=>{var{align:u="left","aria-describedby":s,"aria-labelledby":p,autoFocus:f,error:b,"data-is-transparent":y,"data-is-open":m,children:O,disabled:h,id:x,inputIcon:v,inputWidth:g,leftChildren:j,name:w,onFocus:$,prefix:P,prefixId:S,readOnly:F,size:I,type:E="text"}=r,z=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(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)&&(a[r]=e[r])}return a}(r,["align","aria-describedby","aria-labelledby","autoFocus","error","data-is-transparent","data-is-open","children","disabled","id","inputIcon","inputWidth","leftChildren","name","onFocus","prefix","prefixId","readOnly","size","type"]);const R=n(null),k=l(d,R);a((()=>{var e;f&&(null===(e=R.current)||void 0===e||e.focus())}),[f]);const C=i((e=>{var t;null==$||$(e),"text"===E&&(t=R,setTimeout((()=>{if(null==t?void 0:t.current){const{selectionStart:e,selectionEnd:r,value:n}=t.current,{length:a}=n;(0===e&&0===r||e===a&&r===a)&&document.activeElement===t.current&&t.current.setSelectionRange(0,a)}})))}),[$,E]);return e(o,{$align:u,"data-role":"input-container",$error:b,$size:I,$isDisabled:h,$isReadOnly:F,"data-is-transparent":y,"data-is-open":m,children:t("div",{"data-role":"input-text-container",role:"presentation",className:`input-text-container ${h?"disabled":""} ${F?"read-only":""}`,children:[j,P&&e("span",{id:S,"data-element":"textbox-prefix",children:P}),e("input",c({ref:k,"data-element":"input","data-role":"input",disabled:h,readOnly:F,"aria-describedby":s,"aria-labelledby":p,type:E,onFocus:C,id:x,name:w,"data-has-autofocus":!!f||void 0},z)),v,O]})})}));export{u as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as e}from"styled-components";import{space as i}from"styled-system";import r from"../../../style/utils/add-focus-styling.js";import{gradientAnimation as n,propsForSize as a,inverseColourSettings as t,colourSettings as d}from"./button.config.js";const l=o.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-
|
|
1
|
+
import o,{css as e}from"styled-components";import{space as i}from"styled-system";import r from"../../../style/utils/add-focus-styling.js";import{gradientAnimation as n,propsForSize as a,inverseColourSettings as t,colourSettings as d}from"./button.config.js";const l=o.span.withConfig({displayName:"button.style__StyledContentContainer",componentId:"sc-57b5bab3-0"})(["display:flex;gap:var(--global-space-comp-s);align-items:center;justify-content:center;"]),c=o.button.withConfig({displayName:"button.style__StyledButton",componentId:"sc-57b5bab3-1"})([""," align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;outline-offset:0;text-decoration:none;vertical-align:middle;cursor:pointer;"," "," &:focus{"," position:relative;z-index:1;}"],i,(({$allowMotion:o,disabled:i,$inverse:r,$size:l,$variant:c,$variantType:s,$iconOnly:b})=>r?(({disabled:o,size:i,variantType:r,iconOnly:n})=>{const{background:d,border:l,label:c}=t[r],{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";min-height:",";width:",";padding:"," ",";",""],d.default,"tertiary"===r?"1px":"2px",l.default,n?"var(--global-radius-action-circle)":s,c.default,b,u,n?u:"max-content",v,n?"":g,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],d.disabled,l.disabled,c.disabled):e(["&:active,&.active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],d.active,c.active,l.active,d.hover,c.hover,l.hover))})({disabled:i,size:l,variantType:s,iconOnly:b}):"gradient"===c?e([""," ",""],n,(({allowMotion:o=!0,disabled:i,size:r,iconOnly:n})=>{const{background:t,border:l,label:c}=d.gradient.secondary||{},{borderRadius:s,font:b,height:u,paddingVertical:v,paddingHorizontal:g}=a[r];return e(["position:relative;z-index:0;border:none;border-radius:",";background:white;color:var(--button-ai-label-default);font:",";min-height:",";width:",";padding:"," ",';overflow:hidden;&::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:-1;background:var(--button-ai-border-default);background-position:0% 0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}&:hover{background:linear-gradient( 90deg,var(--mode-color-action-ai-hover-stop-1) 0%,var(--mode-color-action-ai-hover-stop-2) 40%,var(--mode-color-action-ai-hover-stop-3) 90% );}&:hover::before{',"}"," ",""],n?"var(--global-radius-action-circle)":s,b,u,n?u:"max-content",v,n?"":g,o&&e(["background-size:300% 100%;animation:gradient-loop 1000ms linear infinite;"]),i&&e(["opacity:0.6;pointer-events:none;cursor:not-allowed;&::before{animation:none;background:none;-webkit-mask:none;mask:none;border:2px solid var(--button-ai-border-disabled);padding:0;}color:var(--button-ai-label-disabled);"]),!i&&e(["&:active,&.active{background:",";color:",";border-color:",";}"],null==t?void 0:t.active,null==c?void 0:c.active,null==l?void 0:l.active))})({allowMotion:o,disabled:i,size:l,iconOnly:b})):(({disabled:o,size:i,variant:r,variantType:n,iconOnly:t})=>{const{background:l,border:c,label:s}=d[r][n]||{},{borderRadius:b,font:u,height:v,paddingVertical:g,paddingHorizontal:p}=a[i];return e(["background-color:",";border:"," solid ",";border-radius:",";color:",";font:",";min-height:",";width:",";padding:"," ",";",""],null==l?void 0:l.default,"tertiary"===n?"1px":"2px",null==c?void 0:c.default,t?"var(--global-radius-action-circle)":b,null==s?void 0:s.default,u,v,t?v:"max-content",g,t?"":p,o?e(["background-color:",";border-color:",";color:",";cursor:not-allowed;"],null==l?void 0:l.disabled,null==c?void 0:c.disabled,null==s?void 0:s.disabled):e(["&:active,&.active{background-color:",";color:",";border-color:",";}&:hover{background-color:",";color:",";border-color:",";}"],null==l?void 0:l.active,null==s?void 0:s.active,null==c?void 0:c.active,null==l?void 0:l.hover,null==s?void 0:s.hover,null==c?void 0:c.hover))})("xs"!==l||"primary"!==s&&"default"===c?"destructive"!==c||"tertiary"!==s&&"subtle"!==s?{disabled:i,size:l,variant:c,variantType:s,iconOnly:b}:{disabled:i,size:l,variant:c,variantType:"primary",iconOnly:b}:{disabled:i,size:"xs",variant:"default",variantType:"secondary",iconOnly:b})),(({$fullWidth:o,$size:i,$noWrap:r})=>e([""," ",""],o&&e(["width:100%;"]),r?"white-space: nowrap;":`\n flex-flow: wrap;\n min-height: ${a[i].height};\n height: unset;\n `)),r());export{c as StyledButton,l as StyledContentContainer,c as default};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ButtonProps } from "../../button/__next__";
|
|
3
|
+
import { RenderOpenProps } from "../../popover-container";
|
|
4
|
+
declare const DecimalPopoverButton: React.ForwardRefExoticComponent<Pick<RenderOpenProps, "data-element" | "id" | "aria-expanded" | "aria-haspopup" | "aria-label" | "onClick"> & {
|
|
5
|
+
size?: ButtonProps["size"];
|
|
6
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
export default DecimalPopoverButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{forwardRef as a,useRef as r,useImperativeHandle as t}from"react";import{StyledDecimalPopoverButtonWrapper as i,StyledDecimalPopoverButton as o}from"./decimal-popover-button.style.js";const l=a((({onClick:a,"data-element":l,"aria-label":n,"aria-expanded":p,"aria-haspopup":d,id:s,size:u},c)=>{const m=r(null);return t(c,(()=>{var e;return null===(e=m.current)||void 0===e?void 0:e.querySelector("button")})),e(i,{ref:m,children:e(o,{onClick:a,"data-element":l,"aria-label":n,"aria-haspopup":d,"aria-expanded":p,id:s,iconType:"ellipsis_vertical",variantType:"subtle",size:u})})}));l.displayName="DecimalPopoverButton";export{l as default};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const StyledDecimalPopoverButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button/__next__").ButtonProps & import("react").RefAttributes<import("../../button/__next__").ButtonHandle>>, any, {}, never>;
|
|
2
|
+
declare const StyledDecimalPopoverButtonWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
3
|
+
export { StyledDecimalPopoverButton, StyledDecimalPopoverButtonWrapper };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import o from"styled-components";import{Button as t}from"../../button/__next__/button.component.js";const e=o(t).withConfig({displayName:"decimal-popover-button.style__StyledDecimalPopoverButton",componentId:"sc-1f248243-0"})(["border-radius:0 var(--global-radius-action-m) var(--global-radius-action-m) 0;border-left:none;"]),n=o.span.withConfig({displayName:"decimal-popover-button.style__StyledDecimalPopoverButtonWrapper",componentId:"sc-1f248243-1"})(["display:contents;"]);export{e as StyledDecimalPopoverButton,n as StyledDecimalPopoverButtonWrapper};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CommonTextboxProps } from "../textbox";
|
|
3
|
+
import { PopoverContainerProps } from "../popover-container";
|
|
3
4
|
export interface CustomEvent {
|
|
4
5
|
target: {
|
|
5
6
|
name?: string;
|
|
@@ -19,20 +20,30 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
|
|
|
19
20
|
id?: string;
|
|
20
21
|
/** The width of the input as a percentage */
|
|
21
22
|
inputWidth?: number;
|
|
22
|
-
/**
|
|
23
|
-
|
|
24
|
-
/** Handler for blur event */
|
|
25
|
-
onBlur?: (ev: CustomEvent) => void;
|
|
23
|
+
/** The locale string - default en */
|
|
24
|
+
locale?: string;
|
|
26
25
|
/** The input name */
|
|
27
26
|
name?: string;
|
|
27
|
+
/** Handler for blur event */
|
|
28
|
+
onBlur?: (ev: CustomEvent) => void;
|
|
29
|
+
/** Handler for change event */
|
|
30
|
+
onChange: (ev: CustomEvent) => void;
|
|
31
|
+
/** Sets the accessible name (aria-label) on the PopoverContainer dialog */
|
|
32
|
+
popoverContainerAriaLabel?: string;
|
|
33
|
+
/** Content to render inside a PopoverContainer, displayed via a button at the right of the input */
|
|
34
|
+
popoverContainerContent?: React.ReactNode;
|
|
35
|
+
/** Sets the position of the PopoverContainer dialog relative to its trigger button */
|
|
36
|
+
popoverPosition?: PopoverContainerProps["position"];
|
|
37
|
+
/** Sets the aria-label on the popover trigger button */
|
|
38
|
+
popoverTriggerAriaLabel?: string;
|
|
28
39
|
/** The decimal precision of the value in the input */
|
|
29
40
|
precision?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
|
|
30
41
|
/** If true, the component will be read-only */
|
|
31
42
|
readOnly?: boolean;
|
|
43
|
+
/** A suffix to display alongside the input. Please note that if a prefix is also provided, only the prefix will be rendered. */
|
|
44
|
+
suffix?: string;
|
|
32
45
|
/** The value of the input */
|
|
33
46
|
value: string;
|
|
34
|
-
/** The locale string - default en */
|
|
35
|
-
locale?: string;
|
|
36
47
|
}
|
|
37
48
|
export declare const Decimal: React.ForwardRefExoticComponent<DecimalProps & React.RefAttributes<HTMLInputElement>>;
|
|
38
49
|
export default Decimal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as
|
|
1
|
+
import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import n,{useContext as o,useCallback as a,useEffect as i,useState as l}from"react";import p from"invariant";import{Textbox as c}from"../textbox/textbox.component.js";import{PopoverContainer as s}from"../popover-container/popover-container.component.js";import u from"../../__internal__/i18n-context/index.js";import m from"./__internal__/decimal-popover-button.component.js";import f from"../../hooks/__internal__/usePrevious/index.js";import d from"../../__internal__/utils/logger/index.js";import g from"../../__internal__/utils/helpers/tags/tags.js";import b from"./decimal.style.js";function v(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function h(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){v(e,r,t[r])}))}return e}const y=n.forwardRef(((n,v)=>{var{align:y="right",allowEmptyValue:O=!1,fieldHelp:x,id:j,inputWidth:w,labelHelp:_,locale:P,name:C,onBlur:D,onChange:E,popoverContainerAriaLabel:z,popoverContainerContent:A,popoverPosition:L,popoverTriggerAriaLabel:N,precision:$=2,prefix:k,readOnly:H,size:S,suffix:V,value:R}=n,W=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(n,["align","allowEmptyValue","fieldHelp","id","inputWidth","labelHelp","locale","name","onBlur","onChange","popoverContainerAriaLabel","popoverContainerContent","popoverPosition","popoverTriggerAriaLabel","precision","prefix","readOnly","size","suffix","value"]);const F=o(u),T=a((e=>{var r;return null===(r=Intl.NumberFormat(P||F.locale()).formatToParts(10000.1).find((r=>r.type===e)))||void 0===r?void 0:r.value}),[F,P]),B=a((e=>Number.isNaN(Number(e))),[]),I=a((e=>{if(B(e))return e;if(""===e||e.match(/\s+/g))return e;const r=e.startsWith("+")?"+":"",t=T("decimal"),[n,o]=e.split(".");let a=r+Intl.NumberFormat(P||F.locale(),{maximumFractionDigits:0}).format(+n);return(null==o?void 0:o.length)>$?a+=`${t+o}`:(null==o?void 0:o.length)<=$?a+=`${t+o+"0".repeat($-o.length)}`:a+=`${$?t+"0".repeat($):""}`,a}),[T,B,F,P,$]),Z=O?"":I((0).toFixed($)),q=a((e=>(p("string"==typeof e,"Decimal `value` prop must be a string"),e&&!O&&p(""!==e,"Decimal `value` must not be an empty string. Please use `allowEmptyValue` or specify a non-empty initialValue"),e)),[O]),G=f($);i((()=>{G&&G!==$&&d.error("Decimal `precision` prop has changed value. Changing the Decimal `precision` prop has no effect.")}),[$,G]);const J=a((e=>{const r=new RegExp(`[\\${T("group")} ]*`,"g");return e.replace(r,"")}),[T]),K=a((e=>{var r;const t=(null===(r=T("group"))||void 0===r?void 0:r.match(/\s+/))&&!e.match(/\s{2,}/)?e.replace(/\s+/g,""):e,n=new RegExp("([^A-Za-z0-9]{2,})|(^[^A-Za-z0-9-]+)|([^0-9a-z-,.])|([^0-9-,.]+)|([W,.])$","g"),o=T("decimal"),a=new RegExp("."===o?`\\${o}`:o,"g");return t.match(n)||(t.match(a)||[]).length>1?t:J(t).replace(new RegExp(`\\${o}`,"g"),".")}),[T,J]),M=q(R||Z),[Q,U]=l(B(K(M))?M:I(M)),X=(e,r)=>({target:{name:C,id:j,value:{formattedValue:I(K(e)),rawValue:r||K(e)}}}),Y=f(R);return i((()=>{const e=K(Q),r=q(R);e!==r&&U(I(""===r&&""===Y?Z:r))}),[Z,I,q,Y,Q,K,R]),e(r,{children:[e(c,(ee=h({align:y,readOnly:H,inputWidth:w,onChange:e=>{const{value:r}=e.target;U(r),E(X(r))},onBlur:e=>{const{value:r}=e.target;let t;if(r){const e=K(r),n=B(e)?r:I(e);t=X(n,e),U(n)}else t=X(Z),U(Z);D&&D(t)},value:Q,"data-component":"decimal",id:j,ref:v,prefix:k,fieldHelp:x,labelHelp:_,size:S},W,g("decimal",W)),re={children:[!k&&V&&t(b,{"data-element":"textbox-suffix",children:V}),A&&t(s,{position:L,containerAriaLabel:z||F.decimal.ariaLabels.popoverContent(),renderOpenComponent:({ref:e,onClick:r,"data-element":n,"aria-label":o,"aria-expanded":a,"aria-haspopup":i,id:l})=>t(m,{ref:e,onClick:r,"data-element":n,"aria-label":N||o||F.decimal.ariaLabels.popoverTrigger(),"aria-haspopup":i,"aria-expanded":a,id:l,size:S}),children:A})]},re=null!=re?re:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ee,Object.getOwnPropertyDescriptors(re)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(re)).forEach((function(e){Object.defineProperty(ee,e,Object.getOwnPropertyDescriptor(re,e))})),ee)),t("input",{name:C,value:K(Q),type:"hidden","data-component":"hidden-input","data-role":"hidden-input"})]});var ee,re}));y.displayName="Decimal";export{y as Decimal,y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import o from"styled-components";const t=o.span.withConfig({displayName:"decimal.style__StyledSuffix",componentId:"sc-821f41bb-0"})(["font:var(--global-font-static-comp-medium-m);margin-right:var(--global-space-comp-m);"]);export{t as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e={backgroundSize:{"extra-small":"var(--global-size-2-xs)",small:"var(--global-size-xs)",medium:"var(--global-size-s)",large:"var(--global-size-m)","extra-large":"var(--global-size-m)"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--global-size-2-xs)",medium:"var(--global-size-xs)",large:"var(--global-size-s)","extra-large":"var(--global-size-s)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],l=["small","medium","large"
|
|
1
|
+
const e={backgroundSize:{"extra-small":"var(--global-size-2-xs)",small:"var(--global-size-xs)",medium:"var(--global-size-s)",large:"var(--global-size-m)","extra-large":"var(--global-size-m)"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--global-size-2-xs)",medium:"var(--global-size-xs)",large:"var(--global-size-s)","extra-large":"var(--global-size-s)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],l=["small","medium","large"],o=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","clock_add","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","marker_off","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","system_Android","system_iOS","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{o as ICONS,l as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as o,useRef as i,useContext as a,useCallback as l,useEffect as s,useImperativeHandle as c,useMemo as d}from"react";import{CSSTransition as p}from"react-transition-group";import{offset as u,flip as m,shift as f}from"@floating-ui/dom";import b from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerWrapperStyle as v,
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{forwardRef as n,useState as o,useRef as i,useContext as a,useCallback as l,useEffect as s,useImperativeHandle as c,useMemo as d}from"react";import{CSSTransition as p}from"react-transition-group";import{offset as u,flip as m,shift as f}from"@floating-ui/dom";import b from"../../hooks/useMediaQuery/useMediaQuery.js";import{PopoverContainerWrapperStyle as v,PopoverContainerOpenIcon as _,PopoverContainerCloseIcon as h,PopoverContainerContentStyle as y,PopoverContainerHeaderStyle as O,PopoverContainerTitleStyle as g}from"./popover-container.style.js";import j from"../icon/icon.component.js";import x from"../../__internal__/popover/popover.component.js";import P from"../../__internal__/utils/helpers/guid/index.js";import C from"../../style/utils/filter-styled-system-padding-props.js";import w from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import k from"../../__internal__/utils/helpers/events/events.js";import A from"../../__internal__/focus-trap/focus-trap.component.js";import B from"../../__internal__/modal/modal.context.js";import I from"../../hooks/__internal__/useFocusPortalContent/useFocusPortalContent.js";import D from"../../__internal__/utils/helpers/tags/tags.js";import{defaultFocusableSelectors as L}from"../../__internal__/focus-trap/focus-trap-utils.js";import E from"../flat-table/__internal__/flat-table.context.js";import{useGlobalHeader as S}from"../global-header/__internal__/global-header.context.js";import F from"../menu/__internal__/menu.context.js";function R(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function M(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){R(e,t,r[t])}))}return e}function W(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 $=({tabIndex:e,onClick:r,"data-element":n,ref:o,"aria-label":i,id:a,"aria-expanded":l,"aria-haspopup":s})=>t(_,{tabIndex:e,onClick:r,"data-element":n,ref:o,"aria-label":i,"aria-haspopup":s,"aria-expanded":l,id:a,children:t(j,{type:"settings"})}),H=({"data-element":e,tabIndex:r,onClick:n,ref:o,"aria-label":i,closeButtonDataProps:a})=>t(h,W(M({tabIndex:r,onClick:n,ref:o,"aria-label":i},D("close",M({"data-element":e},a))),{children:t(j,{type:"close"})}));function Q(e,t,r){return d((()=>[u(e?({rects:e})=>({mainAxis:-e.reference.height}):r),m({fallbackStrategy:"initialPlacement"}),...t?[f()]:[]]),[e,t,r])}const T=n(((n,d)=>{var{children:u,title:m,borderRadius:f,position:_="right",offset:h=6,open:j,onOpen:R,onClose:T,renderOpenComponent:q=$,renderCloseComponent:z=H,shouldCoverButton:G=!1,ariaDescribedBy:K,openButtonAriaLabel:N,closeButtonAriaLabel:U="close",containerAriaLabel:J,closeButtonDataProps:V,disableAnimation:X=!1,hasFullWidth:Y=!1}=n,Z=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}(n,["children","title","borderRadius","position","offset","open","onOpen","onClose","renderOpenComponent","renderCloseComponent","shouldCoverButton","ariaDescribedBy","openButtonAriaLabel","closeButtonAriaLabel","containerAriaLabel","closeButtonDataProps","disableAnimation","hasFullWidth"]);const ee=void 0!==j,[te,re]=o(!1),ne=i(null),oe=i(null),ie=i(null),ae=i(P()),le=i(null),se=m?`PopoverContainer_${ae.current}`:void 0,ce=ee?j:te,de=!b("screen and (prefers-reduced-motion: no-preference)"),pe=Q(G,"center"===_,h),{isInFlatTable:ue}=a(E),me=l((e=>{var t;ee||re(!1),null==T||T(e),ce&&(null===(t=oe.current)||void 0===t||t.focus())}),[ee,ce,T]),fe=l((e=>{!k.composedPath(e).find((e=>e instanceof HTMLElement&&"input"===e.getAttribute("data-element")&&"true"===e.getAttribute("aria-expanded")))&&ce&&k.isEscKey(e)&&me(e)}),[me,ce]);s((()=>(document.addEventListener("keydown",fe),()=>{document.removeEventListener("keydown",fe)})),[fe]),s((()=>{var e;!G&&ce&&(null===(e=le.current)||void 0===e||e.focus({preventScroll:!0}))}),[ce,G,le]),I(G?void 0:le,G?void 0:oe,me);const be=l((e=>{const t=Array.from(document.querySelectorAll(L)||[]).filter((e=>e===oe.current||-1!==Number(e.tabIndex))),r=t.indexOf(oe.current);t[r+1].focus(),me(e)}),[]),ve=(e,t)=>{var r;"next"===e&&be?be(t):"prev"===e&&(null===(r=oe.current)||void 0===r||r.focus())},_e={tabIndex:0,"aria-expanded":ce,"aria-haspopup":"dialog",isOpen:ce,"data-element":"popover-container-open-component",onClick:e=>{ee||re(!ce),ce?null==T||T(e):null==R||R(e)},ref:oe,"aria-label":N||m,id:ce?void 0:se,"data-popover-container-button":"true"},he={"data-element":"popover-container-close-component",tabIndex:0,onClick:e=>{me(e)},ref:ne,"aria-label":U,closeButtonDataProps:V},ye=w((e=>{ee||re(!1),ce&&(null==T||T(e))}),"mousedown"),[Oe,ge]=o(!1),{isWithinGlobalHeader:je}=S();c(d,(()=>({focusButton(){var e;null===(e=oe.current)||void 0===e||e.focus()}})),[]);const xe=()=>t(y,W(M({"data-element":"popover-container-content",role:"dialog","aria-labelledby":se,"aria-label":J,"aria-describedby":K,p:"16px 24px",$borderRadius:f,$popoverOffset:h,ref:le,tabIndex:-1,disableAnimation:X||de,zIndex:je?1e4:2e3},C(Z)),{children:e(F.Provider,{value:{inMenu:!1},children:[e(O,{children:[m&&t(g,{id:se,"data-element":"popover-container-title",children:m}),z(he)]}),u]})}));return e(v,W(M({onMouseDown:ye,hasFullWidth:Y},D("popover-container",Z)),{children:[t("div",{ref:ie,children:q(_e)}),t(p,{nodeRef:le,timeout:{exit:X?0:300},in:ce,unmountOnExit:!0,onEntered:G?()=>ge(!0):void 0,onExiting:G?()=>ge(!1):void 0,children:t(x,{reference:ie,placement:"center"===_?"bottom":"right"===_?"bottom-start":"bottom-end",popoverStrategy:X||de?"fixed":"absolute",middleware:pe,childRefOverride:le,disableBackgroundUI:ue,children:G?t(B.Provider,{value:{isAnimationComplete:Oe},children:t(A,{wrapperRef:le,isOpen:ce,children:xe()})}):e(r,{children:[t("div",{"data-element":"tab-guard-top",tabIndex:0,onFocus:e=>ve("prev",e)}),xe(),t("div",{"data-element":"tab-guard-bottom",tabIndex:0,onFocus:e=>ve("next",e)})]})})})]}))}));export{T as PopoverContainer,T as default,H as renderClose,$ as renderOpen};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as i,useContext as n,useCallback as o}from"react";import
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as i,useContext as n,useCallback as o}from"react";import a from"../../../../__internal__/input/input.component.js";import l from"../../../../__internal__/validation-message/__next__/validation-message.component.js";import"../../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../../style/utils/filter-styled-system-margin-props.js";import d from"../../../../style/utils/filter-out-styled-system-spacing-props.js";import p from"../../../../hooks/__internal__/useUniqueId/index.js";import c from"../../../../__internal__/utils/helpers/guid/index.js";import u from"../../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import m from"../../../../__internal__/error-border/error-border.style.js";import{StyledTextInput as b,LabelWrapper as f,InputWrapper as y}from"./text-input.style.js";import{HintText as _}from"../../../../__internal__/hint-text/hint-text.component.js";import h from"../../../../__internal__/label/label.component.js";import j from"../../../../hooks/__internal__/useRegisterValidationToTabs/useRegisterValidationToTabs.js";import g from"../../../../__internal__/utils/helpers/combine-refs/index.js";import O from"../../../../__internal__/fieldset-validation-context/fieldset-validation-context.js";import v from"../../../fieldset/__internal__/fieldset.context.js";function x(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function w(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){x(e,r,t[r])}))}return e}function I(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const P=t.forwardRef(((t,x)=>{var{autoFocus:P,"aria-describedby":$,"aria-labelledby":k,children:z,"data-component":C="text-input","data-element":D,"data-is-open":W,"data-role":T,disabled:q,error:E,id:S,inputHint:F,inputIcon:M,inputWidth:R,label:B,labelInline:V=!1,leftChildren:A,maxWidth:H,name:U,onChange:G,onClick:J,onMouseDown:K,placeholder:L,prefix:N,readOnly:Q,required:X,size:Y="medium",type:Z="text",validationMessagePositionTop:ee,value:re,warning:te}=t,ie=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)t=o[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["autoFocus","aria-describedby","aria-labelledby","children","data-component","data-element","data-is-open","data-role","disabled","error","id","inputHint","inputIcon","inputWidth","label","labelInline","leftChildren","maxWidth","name","onChange","onClick","onMouseDown","placeholder","prefix","readOnly","required","size","type","validationMessagePositionTop","value","warning"]);const ne=i(null),oe=g(x,ne),{disableErrorBorder:ae}=n(O),le={disabled:q,readOnly:Q},[se,de]=p(S,U),{labelId:pe,validationId:ce,ariaDescribedBy:ue}=u({id:se,validationRedesignOptIn:!0,error:E,warning:te,label:B}),me=i(c()),be=F?me.current:void 0,fe=N?`${se}-prefix`:void 0,{size:ye,hasError:_e,required:he}=n(v),je=ye||Y,ge=!!E||!!_e,Oe=null!=R?R:V?80:100,ve=[be,fe,ue,$].filter(Boolean).join(" "),xe=!(!E&&!te);j(!!E,!!te,se);const we=xe&&!ae&&r(l,{id:ce,size:je,error:E,warning:te}),Ie=xe&&!ae&&r(m,{"data-role":"error-border",$warning:!(E||!te)}),Pe=o((e=>{q||Q||null==K||K(e)}),[K,q,Q]),$e=o((e=>{q||Q||null==J||J(e)}),[J,q,Q]),ke=o((e=>{var r;q||Q||document.activeElement===ne.current||!e.currentTarget.contains(e.target)||null===(r=ne.current)||void 0===r||r.focus()}),[q,Q]);return e(b,I(w({"data-element":D,"data-role":T,"data-component":C,$size:je,$labelInline:V,$hasValidationFailure:V&&xe},s(ie)),{children:[B&&e(f,{"data-role":"label-wrapper",$labelInline:V,$size:je,$labelWrapperWidth:V&&"number"==typeof Oe?100-Oe:void 0,children:[r(h,I(w({id:pe,htmlFor:se,size:je,isRequired:X},le),{children:B})),F&&r(_,I(w({id:be,size:je},le),{children:F}))]}),e(y,{"data-role":"input-wrapper",$size:je,$maxWidth:H,$inputWidth:R,onClick:ke,"data-is-open":W,children:[ee&&we,r(a,I(w({id:se,name:de,"aria-invalid":ge,"aria-describedby":ve,"aria-labelledby":k,value:re,placeholder:q||Q?void 0:L,required:X||he,ref:oe,autoFocus:P,onMouseDown:Pe,onClick:$e,onChange:G,error:ge,inputIcon:M,size:je,prefix:N,prefixId:fe,leftChildren:A,type:Z,"data-is-open":W},le,d(ie)),{children:z})),!ee&&we,Ie]})]}))}));export{P as TextInput,P as default};
|