carbon-react 159.3.0 → 159.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/__internal__/fieldset/__next__/fieldset.component.js +1 -1
- package/esm/__internal__/fieldset/fieldset.component.js +1 -1
- package/esm/__internal__/fieldset/fieldset.style.js +1 -1
- package/esm/__internal__/hint-text/hint-text.component.js +1 -1
- package/esm/__internal__/label/label.component.js +1 -1
- package/esm/__internal__/legacy-hint-text/hint-text.component.js +1 -1
- package/esm/__internal__/legacy-hint-text/hint-text.style.js +1 -1
- package/esm/__internal__/legacy-label/label.component.js +1 -1
- package/esm/__internal__/legacy-label/label.style.js +1 -1
- package/esm/components/breadcrumbs/crumb/crumb.component.js +1 -1
- package/esm/components/breadcrumbs/crumb/crumb.style.d.ts +2 -2
- package/esm/components/breadcrumbs/crumb/crumb.style.js +1 -1
- package/esm/components/button-toggle/button-toggle-group/button-toggle-group.style.js +1 -1
- package/esm/components/button-toggle/button-toggle.style.js +1 -1
- package/esm/components/dialog/dialog.component.js +1 -1
- package/esm/components/link/link.component.d.ts +21 -1
- package/esm/components/link/link.component.js +1 -1
- package/esm/components/link/link.style.d.ts +12 -12
- package/esm/components/link/link.style.js +1 -1
- package/esm/components/portrait/__internal__/get-properties.d.ts +22 -0
- package/esm/components/portrait/__internal__/get-properties.js +1 -0
- package/esm/components/portrait/portrait.component.d.ts +37 -12
- package/esm/components/portrait/portrait.component.js +1 -1
- package/esm/components/portrait/portrait.config.d.ts +0 -6
- package/esm/components/portrait/portrait.config.js +1 -1
- package/esm/components/portrait/portrait.style.d.ts +4 -3
- package/esm/components/portrait/portrait.style.js +1 -1
- package/esm/components/profile/profile.style.d.ts +1 -1
- package/esm/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/esm/components/textbox/textbox.component.js +1 -1
- package/lib/__internal__/fieldset/__next__/fieldset.component.js +1 -1
- package/lib/__internal__/fieldset/fieldset.component.js +1 -1
- package/lib/__internal__/fieldset/fieldset.style.js +1 -1
- package/lib/__internal__/hint-text/hint-text.component.js +1 -1
- package/lib/__internal__/label/label.component.js +1 -1
- package/lib/__internal__/legacy-hint-text/hint-text.component.js +1 -1
- package/lib/__internal__/legacy-hint-text/hint-text.style.js +1 -1
- package/lib/__internal__/legacy-label/label.component.js +1 -1
- package/lib/__internal__/legacy-label/label.style.js +1 -1
- package/lib/components/breadcrumbs/crumb/crumb.component.js +1 -1
- package/lib/components/breadcrumbs/crumb/crumb.style.d.ts +2 -2
- package/lib/components/breadcrumbs/crumb/crumb.style.js +1 -1
- package/lib/components/button-toggle/button-toggle-group/button-toggle-group.style.js +1 -1
- package/lib/components/button-toggle/button-toggle.style.js +1 -1
- package/lib/components/dialog/dialog.component.js +1 -1
- package/lib/components/link/link.component.d.ts +21 -1
- package/lib/components/link/link.component.js +1 -1
- package/lib/components/link/link.style.d.ts +12 -12
- package/lib/components/link/link.style.js +1 -1
- package/lib/components/portrait/__internal__/get-properties.d.ts +22 -0
- package/lib/components/portrait/__internal__/get-properties.js +1 -0
- package/lib/components/portrait/portrait.component.d.ts +37 -12
- package/lib/components/portrait/portrait.component.js +1 -1
- package/lib/components/portrait/portrait.config.d.ts +0 -6
- package/lib/components/portrait/portrait.config.js +1 -1
- package/lib/components/portrait/portrait.style.d.ts +4 -3
- package/lib/components/portrait/portrait.style.js +1 -1
- package/lib/components/profile/profile.style.d.ts +1 -1
- package/lib/components/select/__internal__/select-textbox/select-textbox.component.js +1 -1
- package/lib/components/textbox/textbox.component.js +1 -1
- package/package.json +3 -3
- package/esm/components/portrait/__internal__/get-colors.d.ts +0 -8
- package/esm/components/portrait/__internal__/get-colors.js +0 -1
- package/lib/components/portrait/__internal__/get-colors.d.ts +0 -8
- package/lib/components/portrait/__internal__/get-colors.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useRef as i}from"react";import{StyledFieldset as n,StyledLegend as o,StyledFieldsetContentWrapper as l}from"./fieldset.style.js";import s from"../../legacy-error-border/error-border.style.js";import a from"../../validation-message/validation-message.component.js";import{HintText as
|
|
1
|
+
import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useRef as i}from"react";import{StyledFieldset as n,StyledLegend as o,StyledFieldsetContentWrapper as l}from"./fieldset.style.js";import s from"../../legacy-error-border/error-border.style.js";import a from"../../validation-message/validation-message.component.js";import{HintText as d}from"../../legacy-hint-text/hint-text.component.js";import c from"../../utils/helpers/guid/index.js";import"../../../style/utils/filter-styled-system-padding-props.js";import g from"../../../style/utils/filter-styled-system-margin-props.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const m=m=>{var{children:f,name:u,id:b,legend:y,legendAlign:O,legendHint:j,error:v,warning:h,isRequired:P,isDisabled:w,validationMessagePositionTop:$,size:D="medium"}=m,x=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}(m,["children","name","id","legend","legendAlign","legendHint","error","warning","isRequired","isDisabled","validationMessagePositionTop","size"]);const S=i(c()),z=b||S.current,k=j?`${z}-hint`:void 0,q=(v||h)&&`${z}-validation-message`,E=[k,q].filter(Boolean).join(" "),L=()=>v||h?e(t,{children:[r(a,{error:v,warning:h,validationId:q,isLarge:"large"===D}),r(s,{warning:!(v||!h)})]}):null;return e(n,(M=function(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){p(e,r,t[r])}))}return e}({"data-component":"fieldset",id:z,name:u,"aria-describedby":E,$validationMessagePositionTop:$,$size:D},g(x),x),R=null!=(R={children:[y&&r(o,{"aria-disabled":w||void 0,"data-element":"legend",$align:O,$isRequired:P,$isDisabled:w,$isLarge:"large"===D,children:y}),j&&r(d,{id:k,isDisabled:w,align:O,isLarge:"large"===D,marginBottom:"0",children:j}),e(l,{$size:D,children:[$&&L(),f,!$&&L()]})]})?R:{},Object.getOwnPropertyDescriptors?Object.defineProperties(M,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(e){Object.defineProperty(M,e,Object.getOwnPropertyDescriptor(R,e))})),M));var M,R};export{m as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as r}from"react/jsx-runtime";import{useContext as n,useState as t,useRef as o,useEffect as l}from"react";import{StyledFieldset as a,StyledLegend as d,StyledIconWrapper as s}from"./fieldset.style.js";import{ValidationIcon as p}from"../validations/validation-icon.component.js";import c from"../../components/carbon-provider/__internal__/new-validation.context.js";import{InputGroupBehaviour as u,InputGroupContext as m}from"../input-behaviour/input-group-behaviour.component.js";import{Help as f}from"../../components/help/help.component.js";import{Typography as g}from"../../components/typography/typography.component.js";import{Box as b}from"../../components/box/box.component.js";import y from"../legacy-error-border/error-border.style.js";import h from"../validation-message/validation-message.component.js";import{HintText as v}from"../legacy-hint-text/hint-text.component.js";import{FieldHelp as j}from"../field-help/field-help.component.js";import O from"../utils/helpers/guid/index.js";import w from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";function x(e,i,r){return i in e?Object.defineProperty(e,i,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[i]=r,e}function D(e){for(var i=1;i<arguments.length;i++){var r=null!=arguments[i]?arguments[i]:{},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(i){x(e,i,r[i])}))}return e}function M(e,i){return i=null!=i?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);i.push.apply(i,r)}return i}(Object(i)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(i,r))})),e}const S=x=>{var{legend:S,children:H,inline:I=!1,legendWidth:_,legendAlign:k,legendSpacing:A=2,error:R,warning:q,info:B,isRequired:E,blockGroupBehaviour:L,legendMargin:F={},isDisabled:G,labelHelp:T,fieldHelp:z,inputHint:N,validationMessagePositionTop:V,applyNewValidation:W=!1,id:C,size:$}=x,J=function(e,i){if(null==e)return{};var r,n,t=function(e,i){if(null==e)return{};var r,n,t={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],i.indexOf(r)>=0||(t[r]=e[r]);return t}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],i.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}(x,["legend","children","inline","legendWidth","legendAlign","legendSpacing","error","warning","info","isRequired","blockGroupBehaviour","legendMargin","isDisabled","labelHelp","fieldHelp","inputHint","validationMessagePositionTop","applyNewValidation","id","size"]);const{validationRedesignOptIn:K}=n(c),Q=P(J),[U,X]=t(null),[Y,Z]=t(!1),ee=o(O()),ie=C||ee.current,re=N?`${ie}-hint`:void 0;l((()=>{U&&E&&Array.from(U.querySelectorAll("input")||[]).forEach((e=>{e.setAttribute("required","")}))}),[U,E]);let ne;ne=I&&!k?"right":k||"left";const{validationId:te,fieldHelpId:oe,ariaDescribedBy:le}=w({id:ie,validationRedesignOptIn:!0,error:R,warning:q,info:B,fieldHelp:z}),ae=(V?[le,re]:[re,le]).filter(Boolean).join(" "),de=()=>R||q?e(r,{children:[i(h,{error:R,warning:q,validationId:te,validationMessagePositionTop:V,isLarge:"large"===$}),i(y,{warning:!(R||!q)})]}):null;return W?e(a,M(D({ref:X,"data-component":"fieldset",id:ie,"aria-describedby":ae||void 0},J,Q),{children:[S&&i(d,{align:ne,isRequired:E,isDisabled:G,"aria-disabled":G||void 0,"data-element":"legend","data-role":"legend",isLarge:"large"===$,children:S}),N&&i(v,{id:re,isDisabled:G,"aria-disabled":G||void 0,align:ne,isLarge:"large"===$,children:N}),e(b,{position:"relative",mt:1,children:[V&&de(),H,!V&&de()]})]})):i(u,{blockGroupBehaviour:L,children:e(a,M(D({ref:X,"data-component":"fieldset",id:ie,"aria-describedby":le||void 0},J,Q),{children:[S&&i(m.Consumer,{children:({onMouseEnter:r,onMouseLeave:n})=>e(d,M(D({onMouseEnter:r,onMouseLeave:n,inline:I,width:_,align:ne,rightPadding:A},F),{"aria-disabled":G||void 0,"data-element":"legend","data-role":"legend",isRequired:E,isDisabled:G,children:[S,!K&&(R||q||B?i(s,{"aria-hidden":"true",children:i(p,{error:R,warning:q,info:B,tooltipFlipOverrides:["top","bottom"]})}):T?i(s,M(D({},{onFocus:()=>Z(!0),onBlur:()=>Z(!1)}),{children:i(f,{isFocused:Y,children:T})})):null)]}))}),!K&&i(g,{screenReaderOnly:!0,id:te,children:R||q||B}),e(b,{display:"flex",flexDirection:"column",mt:I?0:1,children:[H,z&&i(j,{id:oe,children:z})]})]}))})};export{S as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
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 a=e.fieldset.attrs(n).withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-602f140c-0"})(["margin:0;margin-bottom:var(--fieldSpacing);"," border:none;padding:0;min-width:0;min-inline-size:0;",""],t,(({width:e})=>e&&`width: ${e};`)),l=e.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-602f140c-1"})(["display:flex;align-items:center;padding:0;line-height:24px;font-weight:var(--fontWeights500);color:var(--colorsUtilityYin090);"," "," "," ",";"," ",""],(({isLarge:e})=>e&&i(["font-size:var(--fontSizes200);"])),(({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(--input-labelset-label-disabled);::after{color:var(--input-labelset-label-disabled);}"])),(({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),o=e.div.withConfig({displayName:"fieldset.style__StyledIconWrapper",componentId:"sc-602f140c-2"})(["margin-left:var(--spacing050);"]);export{a as StyledFieldset,o as StyledIconWrapper,l as StyledLegend};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import"react";import e from"./hint-text.style.js";const i=({children:i,id:
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import"react";import e from"./hint-text.style.js";const i=({children:i,id:d,size:a,disabled:r})=>t(e,{"data-element":"input-hint","data-role":"hint-text",id:d,$size:a,$disabled:r,"aria-disabled":r||void 0,children:i});export{i as HintText,i as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import a from"react";import r from"./label.style.js";const i=({children:a,id:i,htmlFor:l,size:d,isRequired:t,disabled:o,readOnly:m})=>e(r,{id:i,htmlFor:l,$size:d,$isRequired:t,$disabled:o,$readOnly:m,"data-component":"label","data-element":"label","aria-disabled":o||void 0,children:a});var l=a.memo(i);export{i as Label,l as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as i}from"react/jsx-runtime";import{useContext as t}from"react";import n from"./hint-text.style.js";import a from"../../components/carbon-provider/__internal__/new-validation.context.js";const r=({align:r,children:o,fontWeight:e,id:
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{useContext as t}from"react";import n from"./hint-text.style.js";import a from"../../components/carbon-provider/__internal__/new-validation.context.js";const r=({align:r,children:o,fontWeight:e,id:s,isComponentInline:d=!1,isDarkBackground:m=!1,isDisabled:l=!1,marginBottom:g="var(--spacing100)",marginTop:p="var(--spacing000)",maxWidth:c,isLarge:h})=>{const{validationRedesignOptIn:f}=t(a);return d&&!f?null:i(n,{align:r,"aria-disabled":l||void 0,"data-element":"input-hint","data-role":"hint-text",fontWeight:e,id:s,isDarkBackground:m,isDisabled:l,marginBottom:g,marginTop:p,maxWidth:c,isLarge:h,children:o})};export{r as HintText,r as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as i}from"styled-components";const
|
|
1
|
+
import t,{css as i}from"styled-components";const e=t.div.withConfig({displayName:"hint-text.style__StyledHintText",componentId:"sc-88bb91cf-0"})(["display:flex;align-items:center;font-size:14px;"," "," margin-bottom:",";margin-top:",";"," "," ",' ::after{content:" ";}'],(({isLarge:t})=>t&&i(["font-size:var(--fontSizes200);"])),(({align:t})=>i(["justify-content:",";"],"right"!==t?"flex-start":"flex-end")),(({marginBottom:t})=>t),(({marginTop:t})=>t),(({isDarkBackground:t,isDisabled:e})=>i(["color:",";"],((t,i)=>t?"var(--colorsUtilityYang080)":i?"var(--input-labelset-label-disabled)":"var(--colorsUtilityYin055)")(t,e))),(({fontWeight:t})=>t&&i(["font-weight:",";"],t)),(({maxWidth:t})=>t&&i(["max-width:",";"],t)));export{e as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useState as n,useContext as t,useRef as i}from"react";import{Help as l}from"../../components/help/help.component.js";import a,{StyledLabelContainer as c}from"./label.style.js";import{ValidationIcon as s}from"../validations/validation-icon.component.js";import p from"./icon-wrapper.style.js";import{InputContext as u}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o,{useState as n,useContext as t,useRef as i}from"react";import{Help as l}from"../../components/help/help.component.js";import a,{StyledLabelContainer as c}from"./label.style.js";import{ValidationIcon as s}from"../validations/validation-icon.component.js";import p from"./icon-wrapper.style.js";import{InputContext as u}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as d}from"../input-behaviour/input-group-behaviour.component.js";import b from"../utils/helpers/guid/index.js";function m(e,r,o){return r in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function f(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter((function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable})))),n.forEach((function(r){m(e,r,o[r])}))}return e}function g(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r.push.apply(r,o)}return r}(Object(r)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(r,o))})),e}const h=({align:o,as:m="label",children:h,disabled:O,error:j,help:y,helpIcon:v,htmlFor:w,info:P,inline:k,isDarkBackground:I=!1,isRequired:D,labelId:L,pr:M,pl:E,tooltipId:F,useValidationIcon:S=!0,validationIconId:x,warning:B,width:q=30,className:C,onClick:N,"aria-label":R,isLarge:V})=>{const[$,z]=n(!1),{onMouseEnter:A,onMouseLeave:G}=t(u),{onMouseEnter:H,onMouseLeave:J}=t(d),K=i(b());let Q;return Q=k&&!o?"right":o||"left",e(c,{"data-role":"label-container",id:`label-container-${null!=L?L:K.current}`,align:Q,inline:k,width:q,pr:M,pl:E,className:C,onClick:N,children:[r(a,g(f({"aria-disabled":O||void 0,"data-element":"label",disabled:O,id:L},"label"===m?{htmlFor:w}:{}),{onMouseEnter:()=>{A&&A(),H&&H()},onMouseLeave:()=>{G&&G(),J&&J()},isRequired:D,as:m,"aria-label":R,isDarkBackground:I,isLarge:V,children:h})),(()=>{const e={onFocus:()=>z(!0),onBlur:()=>z(!1)};if(S&&(({error:e,warning:r,info:o,disabled:n})=>!n&&"string"==typeof(e||r||o))({error:j,warning:B,info:P,disabled:O})){const e=(({error:e,warning:r,info:o,inline:n})=>(e||r||o)&&n?"top":"right")({error:j,warning:B,info:P,inline:k});return r(p,{children:r(s,{tooltipId:x,error:j,warning:B,info:P,tooltipPosition:e,tooltipFlipOverrides:["top","bottom"]})})}return y&&r(p,g(f({},e),{children:r(l,{tooltipId:F,type:v,isFocused:$,children:y})}))})()]})};var O=o.memo(h);export{h as Label,O as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import i,{css as t}from"styled-components";const e=i.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-
|
|
1
|
+
import i,{css as t}from"styled-components";const e=i.label.withConfig({displayName:"label.style__StyledLabel",componentId:"sc-ef9321a8-0"})([""," display:block;font-weight:var(--fontWeights500);"," "," ",""],(({isDarkBackground:i})=>t(["color:",";"],i?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)")),(({isLarge:i})=>i&&t(["font-size:var(--fontSizes200);"])),(({isRequired:i})=>i&&t(['::after{content:"*";color:var(--colorsSemanticNegative500);font-weight:var(--fontWeights500);margin-left:var(--spacing050);}'])),(({disabled:i})=>i&&t(["color:var(--input-labelset-label-disabled);"]))),a=i.div.withConfig({displayName:"label.style__StyledLabelContainer",componentId:"sc-ef9321a8-1"})(["display:flex;align-items:center;margin-bottom:8px;"," ",""],(({align:i})=>t(["justify-content:",";"],"right"!==i?"flex-start":"flex-end")),(({inline:i,pr:e,pl:a,width:n})=>i&&t(["box-sizing:border-box;margin-bottom:0;",";",";width:","%;"],e&&t(["padding-right:var(",");"],1===e?"--spacing100":"--spacing200"),a&&t(["padding-left:var(",");"],1===a?"--spacing100":"--spacing200"),n)));export{a as StyledLabelContainer,e as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as r,jsxs as e}from"react/jsx-runtime";import t from"react";import{Link as n}from"../../link/link.component.js";import o from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledCrumbCurrent as i,Divider as c}from"./crumb.style.js";import{useBreadcrumbsContext as l}from"../__internal__/breadcrumbs.context.js";function u(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function f(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),n.forEach((function(e){u(r,e,t[e])}))}return r}function s(r,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(e)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})),r}const a=t.forwardRef(((t,u)=>{var{href:a,isCurrent:b,children:p,onClick:m}=t,O=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},i=Object.keys(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(t,["href","isCurrent","children","onClick"]);const{inverse:y}=l();return b?r("li",{children:r(i,s(f({ref:u,"aria-current":"page"
|
|
1
|
+
import{jsx as r,jsxs as e}from"react/jsx-runtime";import t from"react";import{Link as n}from"../../link/link.component.js";import o from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledCrumbCurrent as i,Divider as c}from"./crumb.style.js";import{useBreadcrumbsContext as l}from"../__internal__/breadcrumbs.context.js";function u(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function f(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),n.forEach((function(e){u(r,e,t[e])}))}return r}function s(r,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(e)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})),r}const a=t.forwardRef(((t,u)=>{var{href:a,isCurrent:b,children:p,onClick:m}=t,O=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},i=Object.keys(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(r);for(n=0;n<i.length;n++)t=i[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(t,["href","isCurrent","children","onClick"]);const{inverse:y}=l();return b?r("li",{children:r(i,s(f({ref:u,"aria-current":"page",$inverse:y},O,o("crumb",O)),{children:p}))}):e("li",{children:[r(n,s(f({ref:u,inverse:y,href:a,onClick:m},O,o("crumb",O)),{children:p})),r(c,{"data-role":"crumb-divider","aria-hidden":"true",$inverse:y})]})}));a.displayName="Crumb";export{a as Crumb,a as default};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
interface StyledCrumbProps extends
|
|
1
|
+
import { StyledLinkProps } from "../../link/link.style";
|
|
2
|
+
interface StyledCrumbProps extends StyledLinkProps {
|
|
3
3
|
$isCurrent?: boolean;
|
|
4
4
|
}
|
|
5
5
|
export declare const StyledCrumbCurrent: import("styled-components").StyledComponent<"span", any, StyledCrumbProps, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as
|
|
1
|
+
import t,{css as r}from"styled-components";const a=t=>t?"var(--container-standard-inverse-txt-alt)":"var(--container-standard-txt-alt)",o=t.span.withConfig({displayName:"crumb.style__StyledCrumbCurrent",componentId:"sc-37b8525-0"})(["",""],(({$inverse:t})=>r(["font:var(--global-font-static-comp-regular-m);cursor:text;color:",";"],a(t)))),e=t.span.withConfig({displayName:"crumb.style__Divider",componentId:"sc-37b8525-1"})(['::after{content:"/";margin-left:var(--global-space-comp-s);font:var(--global-font-static-comp-regular-m);',"}"],(({$inverse:t})=>r(["color:",";"],a(t))));var n={Divider:e};export{e as Divider,o as StyledCrumbCurrent,n as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import t,{css as o}from"styled-components";import{margin as e}from"styled-system";import
|
|
1
|
+
import t,{css as o}from"styled-components";import{margin as e}from"styled-system";import p from"../../../style/themes/apply-base-theme.js";import{StyledButtonToggle as i,StyledButtonToggleWrapper as r}from"../button-toggle.style.js";const s=t.div.attrs(p).attrs({type:"button"}).withConfig({displayName:"button-toggle-group.style__StyledButtonToggleGroup",componentId:"sc-e2730b28-0"})([""," display:flex;box-shadow:inset 0px 0px 0px 1px var(--colorsActionMinor500);border-radius:var(--borderRadius100);padding:4px;gap:4px;width:fit-content;height:fit-content;flex-wrap:",";"," "," ",""],e,(({labelInline:t})=>t?"nowrap":"wrap"),(({disabled:t})=>t&&o(["cursor:not-allowed;box-shadow:inset 0px 0px 0px 1px var(--button-typical-toggle-border-disabled);"])),(({fullWidth:t})=>t&&o(["width:100%;","{width:100%;}","{flex:auto;}"],i,r)),(({inputWidth:t})=>t&&o(["width:",";"],`${t}%`)));export{s as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as i}from"styled-components";import
|
|
1
|
+
import o,{css as i}from"styled-components";import t from"../icon/icon.style.js";import r from"../../style/themes/apply-base-theme.js";import n from"../../style/utils/add-focus-styling.js";const e={small:24,medium:32,large:40},a={small:14,medium:14,large:16},l={small:8,medium:8,large:12},s={small:72,medium:88,large:120},c={small:"var(--spacing100)",medium:"var(--spacing100) var(--spacing150) var(--spacing000)",large:"var(--spacing100) var(--spacing300)"},g=o.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleContentWrapper",componentId:"sc-d02b9d63-0"})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;flex-flow:wrap;"]),d=o.button.attrs(r).withConfig({displayName:"button-toggle.style__StyledButtonToggle",componentId:"sc-d02b9d63-1"})(["display:inline-flex;justify-content:center;align-items:center;position:relative;box-sizing:border-box;max-width:100%;font-weight:500;background-color:transparent;cursor:pointer;text-align:center;color:var(--colorsActionMinor500);border:none;","{color:var(--colorsActionMinor500);height:var(--sizing250);width:var(--sizing250);}"," "," &:focus{"," z-index:100;}&:not(:disabled):hover{background-color:var(--colorsActionMinor600);color:var(--colorsActionMinorYang100);",'{color:var(--colorsActionMinorYang100);}}&[aria-pressed="true"]{background-color:var(--colorsActionMinor850);color:var(--colorsActionMinorYang100);',"{color:var(--colorsActionMinorYang100);}","}",""],t,(({size:o})=>i(["min-height:","px;padding:0 ","px;font-size:","px;"],e[o],l[o],a[o])),(({buttonIcon:o,buttonIconSize:t,size:r})=>o&&"large"===t&&i(["min-height:","px;padding:",";flex-direction:column;"],s[r],c[r])),n(),t,t,(({allowDeselect:o})=>!o&&i(["cursor:auto;"])),(({disabled:o})=>o&&i(["cursor:not-allowed;&{color:var(--button-typical-toggle-label-disabled);",'{color:var(--button-typical-toggle-label-disabled);}}&[aria-pressed="true"]{cursor:not-allowed;background-color:var(--colorsActionMinorYin030);}'],t))),m=o.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleIcon",componentId:"sc-d02b9d63-2"})([""," ",""],(({hasContent:o})=>o&&"margin-right: 8px;"),(({buttonIconSize:o})=>"large"===o&&i(["margin-right:0;","{margin-left:0;margin-right:0;margin-bottom:8px;height:var(--sizing400);width:var(--sizing400);}","::before{font-size:var(--sizing400);line-height:var(--sizing400);}.carbon-icon__svg--credit-card-slash{margin-left:6px;}"],t,t))),p=o.div.withConfig({displayName:"button-toggle.style__StyledButtonToggleWrapper",componentId:"sc-d02b9d63-3"})(["display:inline-block;vertical-align:middle;&&&&{","{border-radius:var(--borderRadius050);}}"],d);export{d as StyledButtonToggle,g as StyledButtonToggleContentWrapper,m as StyledButtonToggleIcon,p as StyledButtonToggleWrapper,a as fontSizeConfig,e as heightConfig,l as paddingConfig};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Dialog as t}from"./__internal__/__next__/dialog.component.js";import a from"../../__internal__/utils/logger/index.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let n=!1,l=!1,
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{forwardRef as r}from"react";import{Dialog as t}from"./__internal__/__next__/dialog.component.js";import a from"../../__internal__/utils/logger/index.js";function i(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}let n=!1,l=!1,s=!1,o=!1,d=!1;const c=r(((r,c)=>{var{disableClose:u,pagesStyling:g,fullscreen:p,highlightVariant:f,disableContentPadding:m,size:b="medium",gradientKeyLine:y}=r,h=function(e,r){if(null==e)return{};var t,a,i=function(e,r){if(null==e)return{};var t,a,i={},n=Object.keys(e);for(a=0;a<n.length;a++)t=n[a],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a<n.length;a++)t=n[a],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(r,["disableClose","pagesStyling","fullscreen","highlightVariant","disableContentPadding","size","gradientKeyLine"]);n||void 0===p||(n=!0,a.deprecate('The fullscreen prop in Dialog is deprecated. Please use size="fullscreen" instead.')),l||void 0===f||(l=!0,a.deprecate("The highlightVariant prop is deprecated. Please use gradientKeyLine instead.")),s||void 0===u||(s=!0,a.deprecate("The disableClose prop in Dialog is deprecated and will soon be removed.")),o||void 0===g||(o=!0,a.deprecate("The pagesStyling prop in Dialog is deprecated and will soon be removed.")),d||"auto"!==b||(d=!0,a.deprecate('The `size="auto"` prop in Dialog is deprecated and has been defaulted to `size="large"`. Please use a specific size value instead.'));const O=((e,r)=>{if(r)return"fullscreen";switch(e){case"extra-small":case"small":return"small";case"medium-small":case"medium":default:return"medium";case"medium-large":case"large":case"extra-large":case"auto":return"large";case"fullscreen":case"maximise":return"fullscreen"}})(b,p),v=((e,r)=>void 0!==r?r:"ai"===e)(f,y);return e(t,function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},a=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),a.forEach((function(r){i(e,r,t[r])}))}return e}({ref:c,size:O,gradientKeyLine:v,disableContentPadding:m,pagesStyling:g},h))}));c.displayName="Dialog";export{c as Dialog,c as default};
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { IconType } from "../icon";
|
|
3
3
|
import { StyledLinkProps } from "./link.style";
|
|
4
4
|
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
5
|
-
export interface LinkProps extends
|
|
5
|
+
export interface LinkProps extends React.AriaAttributes, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "download">, TagProps {
|
|
6
6
|
/** An href for an anchor tag. */
|
|
7
7
|
href?: string;
|
|
8
8
|
/** An icon to display next to the link. */
|
|
@@ -35,6 +35,26 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes, Pick<R
|
|
|
35
35
|
/** [Legacy] Positions the tooltip with the link.
|
|
36
36
|
* @deprecated The tooltipPosition prop in Link is deprecated and will soon be removed. */
|
|
37
37
|
tooltipPosition?: "bottom" | "left" | "right" | "top";
|
|
38
|
+
/** @deprecated The disabled state of the link. This prop is deprecated and will soon be removed. */
|
|
39
|
+
disabled?: boolean;
|
|
40
|
+
/** Specifies when the link underline should be displayed. */
|
|
41
|
+
underline?: "always" | "hover" | "never";
|
|
42
|
+
/** Which side of the link to the render the link. */
|
|
43
|
+
iconAlign?: "left" | "right";
|
|
44
|
+
/** Allows to create skip link */
|
|
45
|
+
isSkipLink?: boolean;
|
|
46
|
+
/** Allows link styling to be updated for light or dark backgrounds */
|
|
47
|
+
variant?: Variants;
|
|
48
|
+
hasFocus?: boolean;
|
|
49
|
+
/** Sets the correct link size */
|
|
50
|
+
linkSize?: "medium" | "large";
|
|
51
|
+
/** Sets the colour styling when component is rendered on a dark background */
|
|
52
|
+
inverse?: boolean;
|
|
53
|
+
/** @deprecated The 'isDarkBackground' prop in Link is deprecated and will soon be removed. Please use 'inverse' prop instead. */
|
|
54
|
+
isDarkBackground?: boolean;
|
|
55
|
+
/** Sets the link style to bold */
|
|
56
|
+
bold?: boolean;
|
|
38
57
|
}
|
|
58
|
+
type Variants = Exclude<StyledLinkProps["$variant"], undefined>;
|
|
39
59
|
export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
40
60
|
export default Link;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useState as o,useContext as i,useRef as l,useCallback as a,useMemo as s,useEffect as c}from"react";import p from"../icon/icon.component.js";import u from"../menu/__internal__/menu.context.js";import{StyledLink as d,StyledContent as b}from"./link.style.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import y from"../batch-selection/__internal__/batch-selection.context.js";import k from"../../__internal__/utils/logger/index.js";function v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},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(n){v(e,n,t[n])}))}return e}function g(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}let h=!1,j=!1,w=!1,_=!1;const P={default:!1,neutral:!1},L={default:"typical",neutral:"subtle"},D=r.forwardRef(((v,D)=>{var{children:S,onKeyDown:M,
|
|
1
|
+
import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import r,{useState as o,useContext as i,useRef as l,useCallback as a,useMemo as s,useEffect as c}from"react";import p from"../icon/icon.component.js";import u from"../menu/__internal__/menu.context.js";import{StyledLink as d,StyledContent as b}from"./link.style.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../hooks/__internal__/useLocale/useLocale.js";import y from"../batch-selection/__internal__/batch-selection.context.js";import k from"../../__internal__/utils/logger/index.js";function v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function O(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},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(n){v(e,n,t[n])}))}return e}function g(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n.push.apply(n,t)}return n}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}let h=!1,j=!1,w=!1,_=!1;const P={default:!1,neutral:!1},L={default:"typical",neutral:"subtle"},D=r.forwardRef(((v,D)=>{var{children:S,onKeyDown:$,href:M,onClick:x,onMouseDown:A,icon:B,iconAlign:T="left",isSkipLink:C,disabled:E=!1,underline:I="always",ariaLabel:N,rel:z,tooltipMessage:K,tooltipPosition:F,target:R,variant:W="typical",isDarkBackground:q,inverse:G,removeAriaLabelOnIcon:H,className:J,linkSize:Q="medium",download:U,bold:V=!1}=v,X=function(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(v,["children","onKeyDown","href","onClick","onMouseDown","icon","iconAlign","isSkipLink","disabled","underline","ariaLabel","rel","tooltipMessage","tooltipPosition","target","variant","isDarkBackground","inverse","removeAriaLabelOnIcon","className","linkSize","download","bold"]);const[Y,Z]=o(!1),ee=m(),{inMenu:ne}=i(u),{batchSelectionDisabled:te}=i(y),re=E||te,oe=l(null);!h&&E&&(h=!0,k.deprecate("The 'disabled' prop in Link is deprecated and will soon be removed.")),!w&&K&&(w=!0,k.deprecate("The 'tooltipMessage' prop in Link is deprecated and will soon be removed.")),!j&&F&&(j=!0,k.deprecate("The 'tooltipPosition' prop in Link is deprecated and will soon be removed.")),!_&&q&&(_=!0,k.deprecate("The 'isDarkBackground' prop in Link is deprecated and will soon be removed. Please use 'inverse' prop instead.")),!P[W]&&L[W]&&(P[W]=!0,k.deprecate(`The value '${W}' for the variant prop is deprecated and will soon be removed. Please use value '${L[W]}' instead.`));const ie=null!=G?G:q;var le;const ae=null!==(le=L[W])&&void 0!==le?le:W,se=a((e=>{oe.current=e,D&&("function"!=typeof D?"object"!=typeof D||(D.current=e):D(e))}),[D]),ce=a((e=>{var n,t;null===(t=oe.current)||void 0===t||null===(n=t.focus)||void 0===n||n.call(t,{preventScroll:!0}),null==x||x(e)}),[x]),pe=(n="left")=>B&&T===n?e(p,{type:B,disabled:re,ariaLabel:H?void 0:N,tooltipMessage:K,tooltipPosition:F}):null,ue=s((()=>{const e=X;return Object.keys(e).filter((e=>e.startsWith("aria"))).reduce(((n,t)=>(n[t]=e[t],n)),{})}),[X]),de=g(O({onKeyDown:$,onMouseDown:A,onClick:ce,disabled:re,target:R,ref:se,href:M,rel:z,"aria-label":N},ue),{onFocus:()=>Z(!0),onBlur:()=>Z(!1)}),be={type:"button"};return c((()=>{(E||!M&&!x)&&Z(!1)}),[E,M,x]),e(d,g(O({$isSkipLink:C,$disabled:re,$underline:I,$iconAlign:T,className:J,$hasContent:Boolean(S),$variant:ae,$inverse:ie,$isMenuItem:ne},f("link",X),C&&{"data-element":"skip-link"}),{$hasFocus:Y,$linkSize:Q,$bold:V,children:(()=>{let o="a";return x&&!M&&(o="button"),r.createElement(o,"button"===o?O({},de,be):g(O({},de),{download:U,"data-role":"link-anchor"}),n(t,{children:[pe(),e(b,{children:C?ee.link.skipLinkLabel():S}),pe("right")]}))})()}))}));D.displayName="Link";export{D as Link,D as default};
|
|
@@ -5,28 +5,28 @@ type DeprecatedNeutralVariant = "neutral";
|
|
|
5
5
|
type Variants = "typical" | "negative" | "subtle" | DeprecatedDefaultVariant | DeprecatedNeutralVariant;
|
|
6
6
|
export interface StyledLinkProps {
|
|
7
7
|
/** @deprecated The disabled state of the link. This prop is deprecated and will soon be removed. */
|
|
8
|
-
disabled?: boolean;
|
|
8
|
+
$disabled?: boolean;
|
|
9
9
|
/** Specifies when the link underline should be displayed. */
|
|
10
|
-
underline?: "always" | "hover" | "never";
|
|
10
|
+
$underline?: "always" | "hover" | "never";
|
|
11
11
|
/** Which side of the link to the render the link. */
|
|
12
|
-
iconAlign?: "left" | "right";
|
|
12
|
+
$iconAlign?: "left" | "right";
|
|
13
13
|
/** Allows to create skip link */
|
|
14
|
-
isSkipLink?: boolean;
|
|
14
|
+
$isSkipLink?: boolean;
|
|
15
15
|
/** Allows link styling to be updated for light or dark backgrounds */
|
|
16
|
-
variant?: Variants;
|
|
17
|
-
hasFocus?: boolean;
|
|
16
|
+
$variant?: Variants;
|
|
17
|
+
$hasFocus?: boolean;
|
|
18
18
|
/** Sets the correct link size */
|
|
19
|
-
linkSize?: "medium" | "large";
|
|
19
|
+
$linkSize?: "medium" | "large";
|
|
20
20
|
/** Sets the colour styling when component is rendered on a dark background */
|
|
21
|
-
inverse?: boolean;
|
|
21
|
+
$inverse?: boolean;
|
|
22
22
|
/** @deprecated The 'isDarkBackground' prop in Link is deprecated and will soon be removed. Please use 'inverse' prop instead. */
|
|
23
|
-
isDarkBackground?: boolean;
|
|
23
|
+
$isDarkBackground?: boolean;
|
|
24
24
|
/** Sets the link style to bold */
|
|
25
|
-
bold?: boolean;
|
|
25
|
+
$bold?: boolean;
|
|
26
26
|
}
|
|
27
27
|
interface PrivateStyledLinkProps {
|
|
28
|
-
hasContent: boolean;
|
|
29
|
-
isMenuItem?: boolean;
|
|
28
|
+
$hasContent: boolean;
|
|
29
|
+
$isMenuItem?: boolean;
|
|
30
30
|
}
|
|
31
31
|
declare const StyledLink: import("styled-components").StyledComponent<"span", any, {
|
|
32
32
|
theme: object;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as e}from"styled-components";import l from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import a from"../icon/icon.style.js";import t from"../button/button.style.js";const i={light:o=>{let e="var(--link-typical-label-default)",l="var(--link-typical-label-hover)";return"negative"===o?(e="var(--link-destructive-label-default)",l="var(--link-destructive-label-hover)"):"subtle"===o&&(e="var(--link-subtle-label-default)",l="var(--link-subtle-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-label)",focusBgColor:"var(--focus-bg)",focusBoxShadowColor:"var(--focus-borderalt)"}},dark:o=>{let e="var(--link-typical-inverse-label-default)",l="var(--link-typical-inverse-label-hover)";return"negative"===o?(e="var(--link-destructive-inverse-label-default)",l="var(--link-destructive-inverse-label-hover)"):"subtle"===o&&(e="var(--link-subtle-inverse-label-default)",l="var(--link-subtle-inverse-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-inverse-label)",focusBgColor:"var(--focus-inverse-bg)",focusBoxShadowColor:"var(--focus-inverse-borderalt)"}}},n=o.span.attrs(l).withConfig({displayName:"link.style__StyledLink",componentId:"sc-
|
|
1
|
+
import o,{css as e}from"styled-components";import l from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import a from"../icon/icon.style.js";import t from"../button/button.style.js";const i={light:o=>{let e="var(--link-typical-label-default)",l="var(--link-typical-label-hover)";return"negative"===o?(e="var(--link-destructive-label-default)",l="var(--link-destructive-label-hover)"):"subtle"===o&&(e="var(--link-subtle-label-default)",l="var(--link-subtle-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-label)",focusBgColor:"var(--focus-bg)",focusBoxShadowColor:"var(--focus-borderalt)"}},dark:o=>{let e="var(--link-typical-inverse-label-default)",l="var(--link-typical-inverse-label-hover)";return"negative"===o?(e="var(--link-destructive-inverse-label-default)",l="var(--link-destructive-inverse-label-hover)"):"subtle"===o&&(e="var(--link-subtle-inverse-label-default)",l="var(--link-subtle-inverse-label-hover)"),{color:e,hoverColor:l,focusColor:"var(--focus-inverse-label)",focusBgColor:"var(--focus-inverse-bg)",focusBoxShadowColor:"var(--focus-inverse-borderalt)"}}},n=o.span.attrs(l).withConfig({displayName:"link.style__StyledLink",componentId:"sc-3fa28815-0"})(["",""],(({$isSkipLink:o,theme:l,$iconAlign:n,$hasContent:s,$disabled:c,$underline:u,$variant:d,$inverse:b,$isMenuItem:v,$hasFocus:g,$linkSize:f,$bold:p})=>{const m=b?"dark":"light",{color:h,hoverColor:k,focusColor:x,focusBgColor:y,focusBoxShadowColor:C}=i[m](d);return e([""," "," "," > a,> button{"," > ","{display:",";position:relative;vertical-align:middle;}&:focus{outline:none;}}"," > button,",":not(.search-button){background-color:transparent;border:none;padding:0;}"],o&&e(["a{position:absolute;box-sizing:border-box;display:inline-flex;min-height:var(--global-size-m);padding:var(--global-space-comp-m) var(--global-space-comp-xl);flex-direction:column;justify-content:center;align-items:flex-start;left:-999em;z-index:",";border:var(--global-borderwidth-s) solid var(--focus-borderalt);box-shadow:var(--global-depth-lvl1);border-radius:0 var(--global-radius-action-m) var(--global-radius-action-m) 0;background-color:var(--focus-bg);font:var(--global-font-static-comp-regular-m);color:var(--link-subtle-label-default);text-decoration:underline;outline:none;&:focus{top:var(--global-space-comp-s);left:0;}}"],l.zIndex.aboveAll),!o&&!v&&e(["> a,> button{"," text-decoration:",";"," ","}"],((o,l)=>{let r;return r="large"===o?l?"--global-font-static-comp-lined-medium-l":"--global-font-static-comp-regular-l":l?"--global-font-static-comp-lined-medium-m":"--global-font-static-comp-regular-m",e(["font:var(",");"],r)})(f,p),s&&"always"===u?"underline":"none",!c&&e(["color:",";","{width:20px;height:20px;color:",";::before{font-size:18px;line-height:18px;}"," ","}&:hover{color:",";text-decoration:",";> ","{color:",";}}&:not(:has(img,svg,picture)):focus{color:",";text-decoration:none;","{color:",";}}&:has(img,svg,picture){display:inline-block;vertical-align:middle;}&:has(img,svg,picture):focus{"," border-radius:var(--global-radius-action-xs);outline:default;}"],h,a,h,"left"===n&&e(["margin-right:",";"],s?"var(--global-space-comp-s)":0),"right"===n&&e(["margin-right:0;margin-left:",";"],s?"var(--global-space-comp-s)":0),k,!s||"hover"!==u&&"always"!==u?"none":"underline",a,k,x,a,x,r()),c&&e(["color:var(--colorsActionMajorYin030);&:hover,&:focus{cursor:not-allowed;color:var(--colorsActionMajorYin030);}"])),!c&&e(["> a:any-link:hover,> button:hover{cursor:pointer;}"]),v&&"display: inline-block;",a,s?"inline-block":"inline",!o&&!v&&!c&&g&&e(["max-width:fit-content;&:not(:has(img,svg,picture)){border-radius:var(--global-radius-action-xs);background-color:",";box-shadow:0 var(--global-size-5-xs) 0 0 ",';}&:has([data-popover-container-button="true"]){border-bottom-left-radius:0;border-bottom-right-radius:0;}'],y,C),t)})),s=o.span.withConfig({displayName:"link.style__StyledContent",componentId:"sc-3fa28815-1"})([""]);export{s as StyledContent,n as StyledLink};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { PortraitSizes, PortraitShapes, PortraitVariant } from "../portrait.component";
|
|
2
|
+
type GetPortraitColors = {
|
|
3
|
+
backgroundColor: string;
|
|
4
|
+
color: string;
|
|
5
|
+
};
|
|
6
|
+
type GetPortraitDimensions = {
|
|
7
|
+
height: string;
|
|
8
|
+
width: string;
|
|
9
|
+
};
|
|
10
|
+
declare const getColoursForPortrait: (backgroundColour: string | undefined, darkBackground?: boolean, largeText?: boolean,
|
|
11
|
+
/**
|
|
12
|
+
* Whether to use strict contrast (i.e., WCAG AAA). If this is false, it uses WCAG AA contrast
|
|
13
|
+
* ratios (4.5:1 for normal text, 3:1 for large text). If true, it uses 7:1 for normal text and
|
|
14
|
+
* 4.5:1 for large text.
|
|
15
|
+
*/
|
|
16
|
+
strict?: boolean, foregroundColor?: string | undefined) => string;
|
|
17
|
+
export declare const getPortraitBorderRadius: (shape?: PortraitShapes, size?: PortraitSizes) => string;
|
|
18
|
+
export declare const getPortraitColors: (variant?: PortraitVariant) => GetPortraitColors;
|
|
19
|
+
export declare const getPortraitDimensions: (size: PortraitSizes) => GetPortraitDimensions;
|
|
20
|
+
export declare const getPortraitFontSize: (size: PortraitSizes) => string;
|
|
21
|
+
export declare const getPortraitIconFontSize: (size: PortraitSizes) => string;
|
|
22
|
+
export default getColoursForPortrait;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import r from"../../../style/utils/get-accessible-foreground-color.js";const e=(e,i=!1,o=!1,a=!1,l=void 0)=>{let s="var(--colorsUtilityYin090)",t="var(--colorsUtilityReadOnly400)";return!i||e||l||(t="var(--colorsUtilityYin090)",s="var(--colorsUtilityReadOnly600)"),e&&(t=e,s=r(e,o,a)),l&&(s=l),`background-color: ${t}; color: ${s};`},i=(r,e)=>"square"===r?"XS"===e||"S"===e?"var(--global-radius-container-xs)":"M"===e||"ML"===e||"L"===e?"var(--global-radius-container-m)":"var(--global-radius-container-l)":"var(--global-radius-container-circle)",o=r=>{const e={backgroundColor:"inherit",color:"inherit"};return"black"===r?(e.backgroundColor="var(--profile-bg-def)",e.color="var(--profile-label-default)"):(e.backgroundColor=`var(--profile-swatches-${r}-bg-default)`,e.color=`var(--profile-swatches-${r}-label-default)`),e},a=r=>({height:`var(--profile-size-outside-${r.toLowerCase()})`,width:`var(--profile-size-outside-${r.toLowerCase()})`}),l=r=>`var(--profile-font-initials-${r.toLowerCase()})`,s=r=>{switch(r){case"XS":return"var(--profile-size-inside-xs)";case"S":return"var(--profile-size-inside-s)";case"ML":return"var(--profile-size-inside-ml)";case"L":return"var(--profile-size-inside-l)";case"XL":return"var(--profile-size-inside-xl)";case"XXL":return"var(--profile-size-inside-xxl)";default:return"var(--profile-size-inside-m)"}};export{e as default,i as getPortraitBorderRadius,o as getPortraitColors,a as getPortraitDimensions,l as getPortraitFontSize,s as getPortraitIconFontSize};
|
|
@@ -4,6 +4,7 @@ import { IconType } from "../icon";
|
|
|
4
4
|
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
5
5
|
export type PortraitShapes = "circle" | "square";
|
|
6
6
|
export type PortraitSizes = "XS" | "S" | "M" | "ML" | "L" | "XL" | "XXL";
|
|
7
|
+
export type PortraitVariant = "black" | "blue" | "teal" | "green" | "lime" | "orange" | "red" | "pink" | "purple" | "slate" | "gray";
|
|
7
8
|
export interface PortraitProps extends MarginProps, TagProps {
|
|
8
9
|
/** @private @ignore */
|
|
9
10
|
className?: string;
|
|
@@ -21,30 +22,54 @@ export interface PortraitProps extends MarginProps, TagProps {
|
|
|
21
22
|
iconType?: IconType;
|
|
22
23
|
/** The initials to render in the Portrait. */
|
|
23
24
|
initials?: string;
|
|
24
|
-
/** Use a dark background.
|
|
25
|
+
/** Use a dark background.
|
|
26
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
27
|
+
*/
|
|
25
28
|
darkBackground?: boolean;
|
|
26
29
|
/** Prop for `onClick` events. */
|
|
27
30
|
onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
28
|
-
/** [Legacy] The message to be displayed within the tooltip
|
|
31
|
+
/** [Legacy] The message to be displayed within the tooltip
|
|
32
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
33
|
+
*/
|
|
29
34
|
tooltipMessage?: React.ReactNode;
|
|
30
|
-
/** [Legacy] The id attribute to use for the tooltip
|
|
35
|
+
/** [Legacy] The id attribute to use for the tooltip
|
|
36
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
37
|
+
*/
|
|
31
38
|
tooltipId?: string;
|
|
32
|
-
/** [Legacy] Whether to to show the Tooltip
|
|
39
|
+
/** [Legacy] Whether to to show the Tooltip
|
|
40
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
41
|
+
*/
|
|
33
42
|
tooltipIsVisible?: boolean;
|
|
34
|
-
/** [Legacy] Sets position of the tooltip
|
|
43
|
+
/** [Legacy] Sets position of the tooltip
|
|
44
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
45
|
+
*/
|
|
35
46
|
tooltipPosition?: "top" | "bottom" | "left" | "right";
|
|
36
|
-
/** [Legacy] Defines the message type
|
|
47
|
+
/** [Legacy] Defines the message type
|
|
48
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
49
|
+
*/
|
|
37
50
|
tooltipType?: string;
|
|
38
|
-
/** [Legacy] Defines the size of the tooltip content
|
|
51
|
+
/** [Legacy] Defines the size of the tooltip content
|
|
52
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
53
|
+
*/
|
|
39
54
|
tooltipSize?: "medium" | "large";
|
|
40
|
-
/** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value.
|
|
55
|
+
/** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value.
|
|
56
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
57
|
+
*/
|
|
41
58
|
tooltipBgColor?: string;
|
|
42
|
-
/** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value.
|
|
59
|
+
/** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value.
|
|
60
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
61
|
+
*/
|
|
43
62
|
tooltipFontColor?: string;
|
|
44
|
-
/** The hex code of the background colour
|
|
63
|
+
/** The hex code of the background colour
|
|
64
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
65
|
+
*/
|
|
45
66
|
backgroundColor?: string;
|
|
46
|
-
/** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor`
|
|
67
|
+
/** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor`
|
|
68
|
+
* @deprecated This prop is deprecated and will be removed in a future release.
|
|
69
|
+
*/
|
|
47
70
|
foregroundColor?: string;
|
|
71
|
+
/** Color variant*/
|
|
72
|
+
variant?: PortraitVariant;
|
|
48
73
|
}
|
|
49
|
-
export declare const Portrait: ({ alt, backgroundColor, foregroundColor, className, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
|
|
74
|
+
export declare const Portrait: ({ alt, backgroundColor, foregroundColor, className, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, variant, ...rest }: PortraitProps) => React.JSX.Element;
|
|
50
75
|
export default Portrait;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as e}from"react";import{Tooltip as r}from"../tooltip/tooltip.component.js";import i from"../../__internal__/utils/helpers/tags/tags.js";import{StyledPortraitInitials as n,StyledPortraitContainer as l,StyledIcon as s,StyledCustomImg as a}from"./portrait.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";function c(t,o,e){return o in t?Object.defineProperty(t,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[o]=e,t}function u(t){for(var o=1;o<arguments.length;o++){var e=null!=arguments[o]?arguments[o]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})))),r.forEach((function(o){c(t,o,e[o])}))}return t}function f(t,o){return o=null!=o?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):function(t){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(t);o.push.apply(o,e)}return o}(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})),t}const d=c=>{var{alt:d,backgroundColor:g,foregroundColor:m,className:y,name:b,darkBackground:O=!1,iconType:j="individual",initials:k,shape:C="circle",size:h="M",src:v,onClick:P,tooltipMessage:w,tooltipId:z,tooltipIsVisible:S,tooltipPosition:B,tooltipType:I,tooltipSize:V,tooltipBgColor:x,tooltipFontColor:D,variant:E}=c,N=function(t,o){if(null==t)return{};var e,r,i=function(t,o){if(null==t)return{};var e,r,i={},n=Object.keys(t);for(r=0;r<n.length;r++)e=n[r],o.indexOf(e)>=0||(i[e]=t[e]);return i}(t,o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(r=0;r<n.length;r++)e=n[r],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(i[e]=t[e])}return i}(c,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor","variant"]);const[T,_]=o(!1),M=Boolean(v)&&!T;e((()=>{_(!1)}),[v]);const F=i("portrait",N);return(()=>{let o=t(s,{type:j,size:h,variant:E});return k&&(o=t(n,{size:h,"data-element":"initials",variant:E,children:k.slice(0,3).toUpperCase()})),v&&!T&&(o=t(a,{src:v,alt:d||b||"","data-element":"user-image",onError:()=>_(!0)})),w?t(r,{message:w,id:z,position:B,type:I,size:V,isVisible:S,bgColor:x,fontColor:D,children:t(l,f(u(f(u({},p(N)),{onClick:P,className:y}),F),{hasValidImg:M,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,variant:E,children:o}))}):t(l,f(u(f(u({},p(N)),{onClick:P,className:y}),F),{hasValidImg:M,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,variant:E,children:o}))})()};export{d as Portrait,d as default};
|
|
@@ -1,9 +1,3 @@
|
|
|
1
1
|
import { PortraitShapes, PortraitSizes } from "./portrait.component";
|
|
2
2
|
export declare const PORTRAIT_SHAPES: PortraitShapes[];
|
|
3
3
|
export declare const PORTRAIT_SIZES: PortraitSizes[];
|
|
4
|
-
type PortraitSizeParams = Record<PortraitSizes, {
|
|
5
|
-
dimensions: number;
|
|
6
|
-
iconDimensions: number;
|
|
7
|
-
}>;
|
|
8
|
-
export declare const PORTRAIT_SIZE_PARAMS: PortraitSizeParams;
|
|
9
|
-
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const
|
|
1
|
+
const L=["circle","square"],X=["XS","S","M","ML","L","XL","XXL"];export{L as PORTRAIT_SHAPES,X as PORTRAIT_SIZES};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
|
-
import { PortraitSizes, PortraitShapes } from "./portrait.component";
|
|
3
|
+
import { PortraitSizes, PortraitShapes, PortraitVariant } from "./portrait.component";
|
|
4
4
|
type StyledPortraitProps = {
|
|
5
5
|
backgroundColor?: string;
|
|
6
6
|
foregroundColor?: string;
|
|
@@ -9,10 +9,11 @@ type StyledPortraitProps = {
|
|
|
9
9
|
shape?: PortraitShapes;
|
|
10
10
|
hasValidImg?: boolean;
|
|
11
11
|
onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
12
|
+
variant?: PortraitVariant;
|
|
12
13
|
};
|
|
13
|
-
export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size">, never>;
|
|
14
|
+
export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size" | "variant">, never>;
|
|
14
15
|
export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
|
|
15
|
-
export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, Pick<StyledPortraitProps, "size">, never>;
|
|
16
|
+
export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, Pick<StyledPortraitProps, "size" | "variant">, never>;
|
|
16
17
|
export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {
|
|
17
18
|
theme: object;
|
|
18
19
|
} & StyledPortraitProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"react";import
|
|
1
|
+
import"react";import t from"styled-components";import{margin as e}from"styled-system";import i from"../icon/icon.component.js";import o from"../../style/themes/apply-base-theme.js";import r,{getPortraitFontSize as n,getPortraitColors as s,getPortraitDimensions as l,getPortraitIconFontSize as a,getPortraitBorderRadius as d}from"./__internal__/get-properties.js";const m=t.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-fbaa2f3e-0"})(["font:",";display:flex;white-space:nowrap;align-items:center;justify-content:center;height:inherit;width:inherit;.mentions-list-item &&{color:var(--input-dropdown-label-default);}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:var(--popover-label-hover);}"],(({size:t})=>n(t))),c=t.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-fbaa2f3e-1"})(["height:inherit;min-width:inherit;"]),h=t(i).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-fbaa2f3e-2"})(["&&{color:",";height:",";min-width:",";::before{font-size:",";}}"],(({variant:t})=>s(t).color),(({size:t})=>l(t).height),(({size:t})=>l(t).width),(({size:t})=>a(t))),p=t.div.attrs(o).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-fbaa2f3e-3"})([""," ",";"," min-width:",";height:",";overflow:hidden;border-radius:",";border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;"," "," .mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({variant:t})=>`\n background-color: ${s(t).backgroundColor};\n color: ${s(t).color};\n `),(({darkBackground:t,backgroundColor:e,size:i,foregroundColor:o,variant:n})=>!n&&r(e,t,!["XS","S"].includes(i),!0,o)),(({hasValidImg:t,size:e})=>t&&`max-width: ${l(e).width};`),(({size:t})=>l(t).width),(({size:t})=>l(t).height),(({shape:t,size:e})=>d(t,e)),(({onClick:t})=>t&&"cursor: pointer"),e);export{c as StyledCustomImg,h as StyledIcon,p as StyledPortraitContainer,m as StyledPortraitInitials};
|
|
@@ -11,5 +11,5 @@ declare const ProfileStyle: import("styled-components").StyledComponent<"div", a
|
|
|
11
11
|
theme: object;
|
|
12
12
|
} & Pick<ProfileSProps, "darkBackground" | "hasSrc">, "theme">;
|
|
13
13
|
declare const ProfileDetailsStyle: import("styled-components").StyledComponent<"div", any, Pick<ProfileSProps, "size" | "hasSrc">, never>;
|
|
14
|
-
declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, backgroundColor, foregroundColor, className, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
|
|
14
|
+
declare const ProfileAvatarStyle: import("styled-components").StyledComponent<({ alt, backgroundColor, foregroundColor, className, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, variant, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
|
|
15
15
|
export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t,{useRef as r}from"react";import{StyledSelectText as n,StyledSelectTextChildrenWrapper as a}from"./select-textbox.style.js";import{Textbox as l}from"../../../textbox/textbox.component.js";import o from"../../../../hooks/__internal__/useLocale/useLocale.js";import i from"../../../../__internal__/utils/helpers/combine-refs/index.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(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){c(e,t,r[t])}))}return e}function d(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}function b(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}const u=t.forwardRef(((t,c)=>{var{ariaLabel:u,ariaLabelledby:p,accessibilityLabelId:f,labelId:y,"aria-controls":m,disabled:O=!1,isOpen:h,id:j,readOnly:
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t,{useRef as r}from"react";import{StyledSelectText as n,StyledSelectTextChildrenWrapper as a}from"./select-textbox.style.js";import{Textbox as l}from"../../../textbox/textbox.component.js";import o from"../../../../hooks/__internal__/useLocale/useLocale.js";import i from"../../../../__internal__/utils/helpers/combine-refs/index.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(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){c(e,t,r[t])}))}return e}function d(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}function b(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}const u=t.forwardRef(((t,c)=>{var{ariaLabel:u,ariaLabelledby:p,accessibilityLabelId:f,labelId:y,"aria-controls":m,disabled:O=!1,isOpen:h,id:j,readOnly:v=!1,placeholder:x,size:g="medium",onClick:w,onFocus:P,onBlur:$,formattedValue:C="",selectedValue:D,required:I,selectType:k,transparent:L=!1,activeDescendantId:_,onKeyDown:S,onChange:V}=t,z=b(t,["ariaLabel","ariaLabelledby","accessibilityLabelId","labelId","aria-controls","disabled","isOpen","id","readOnly","placeholder","size","onClick","onFocus","onBlur","formattedValue","selectedValue","required","selectType","transparent","activeDescendantId","onKeyDown","onChange"]);const B=o(),E=r(null),q=x||B.select.placeholder(),F=!O&&!v&&!C,K="filterable"===k||"multi"===k,N=i(c,E);function T(e){O||(E.current&&document.activeElement!==E.current&&E.current.focus(),v||null==w||w(e))}const A=s({disabled:O,id:j,readOnly:v,required:I,onClick:T,onFocus:function(e){O||v||null==P||P(e)},onBlur:$,labelId:y,type:"text",ref:N,onKeyDown:S},z),{"aria-describedby":R,leftChildren:G}=z,H=b(z,["aria-describedby","leftChildren"]),J={"aria-expanded":v?void 0:h,"aria-labelledby":f?`${p||y} ${f}`:p,"aria-activedescendant":_,"aria-controls":m,"aria-autocomplete":"filterable"===k||"multi"===k?"both":void 0,role:v?void 0:"combobox"},M="string"==typeof D||Array.isArray(D)&&"string"==typeof D[0],Q=[K?"select-allows-typing":void 0].filter(Boolean).join(" ");return e(l,d(s({"aria-describedby":R,"aria-label":u,"data-element":`${null!=k?k:""}-select-input`,"data-role":"select-textbox",inputIcon:"dropdown",autoComplete:"off",size:g,formattedValue:C,placeholder:K?q:void 0},J,A),{className:Q,"data-is-transparent":L,"data-is-open":h,onChange:V,value:M?D:void 0,my:0,leftChildren:K?G:e(n,d(s({"aria-hidden":!0,"aria-disabled":O||void 0,"data-element":"select-text","data-role":"select-text",$disabled:O,$hasPlaceholder:F,onClick:T,$readOnly:v,$size:g,$transparent:L,className:`select-text ${O?"disabled":""} ${v?"read-only":""}`},H),{children:e(a,{$isDisabled:O,$readOnly:v,children:F?q:C})}))}))}));u.displayName="SelectTextbox";export{u as default};
|