carbon-react 158.34.0 → 158.34.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__/fieldset/__next__/fieldset.component.d.ts +36 -0
- package/esm/__internal__/fieldset/__next__/fieldset.component.js +1 -0
- package/esm/__internal__/fieldset/__next__/fieldset.style.d.ts +18 -0
- package/esm/__internal__/fieldset/__next__/fieldset.style.js +1 -0
- package/esm/components/icon/icon.style.js +1 -1
- package/esm/components/portrait/portrait.component.d.ts +3 -1
- package/esm/components/portrait/portrait.component.js +1 -1
- package/esm/components/portrait/portrait.style.js +1 -1
- package/esm/components/profile/profile.style.d.ts +1 -1
- package/esm/components/text-editor/__internal__/__providers__/plugin-provider.d.ts +10 -0
- package/esm/components/text-editor/__internal__/__providers__/plugin-provider.js +1 -0
- package/esm/components/text-editor/__internal__/__ui__/Mentions/mentions-typeahead-menu-item.component.d.ts +1 -2
- package/esm/components/text-editor/__internal__/__ui__/Mentions/mentions-typeahead-menu-item.component.js +1 -1
- package/esm/components/text-editor/__internal__/__ui__/Mentions/mentions.component.js +1 -1
- package/esm/components/text-editor/__internal__/__ui__/Mentions/mentions.style.d.ts +4 -1
- package/esm/components/text-editor/__internal__/__ui__/Mentions/mentions.style.js +1 -1
- package/esm/components/text-editor/text-editor.component.js +1 -1
- package/lib/__internal__/fieldset/__next__/fieldset.component.d.ts +36 -0
- package/lib/__internal__/fieldset/__next__/fieldset.component.js +1 -0
- package/lib/__internal__/fieldset/__next__/fieldset.style.d.ts +18 -0
- package/lib/__internal__/fieldset/__next__/fieldset.style.js +1 -0
- package/lib/components/icon/icon.style.js +1 -1
- package/lib/components/portrait/portrait.component.d.ts +3 -1
- package/lib/components/portrait/portrait.component.js +1 -1
- package/lib/components/portrait/portrait.style.js +1 -1
- package/lib/components/profile/profile.style.d.ts +1 -1
- package/lib/components/text-editor/__internal__/__providers__/plugin-provider.d.ts +10 -0
- package/lib/components/text-editor/__internal__/__providers__/plugin-provider.js +1 -0
- package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions-typeahead-menu-item.component.d.ts +1 -2
- package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions-typeahead-menu-item.component.js +1 -1
- package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions.component.js +1 -1
- package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions.style.d.ts +4 -1
- package/lib/components/text-editor/__internal__/__ui__/Mentions/mentions.style.js +1 -1
- package/lib/components/text-editor/text-editor.component.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal Fieldset component used as base for any grouped inputs.
|
|
3
|
+
*
|
|
4
|
+
* @description Renders a fieldset element with an optional legend and hint text, and handles
|
|
5
|
+
* the display of validation messages for grouped inputs.
|
|
6
|
+
*/
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { MarginProps } from "styled-system";
|
|
9
|
+
export interface FieldsetProps extends MarginProps {
|
|
10
|
+
/** Inputs rendered within the fieldset. */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Set a name value on the fieldset. */
|
|
13
|
+
name?: string;
|
|
14
|
+
/** Set an id value on the fieldset. */
|
|
15
|
+
id?: string;
|
|
16
|
+
/** The content for the fieldset legend. */
|
|
17
|
+
legend?: string;
|
|
18
|
+
/** Content for an additional hint text below the legend */
|
|
19
|
+
legendHint?: React.ReactNode;
|
|
20
|
+
/** Text alignment of the legend */
|
|
21
|
+
legendAlign?: "left" | "right";
|
|
22
|
+
/** Error message to be displayed when validation fails */
|
|
23
|
+
error?: string;
|
|
24
|
+
/** Warning message to be displayed when validation warning occurs */
|
|
25
|
+
warning?: string;
|
|
26
|
+
/** If true, an asterisk will be added to the label */
|
|
27
|
+
isRequired?: boolean;
|
|
28
|
+
/** Apply disabled styling to the component */
|
|
29
|
+
isDisabled?: boolean;
|
|
30
|
+
/** Specifies whether the validation message should be displayed above the input */
|
|
31
|
+
validationMessagePositionTop?: boolean;
|
|
32
|
+
/** Set the size of the component */
|
|
33
|
+
size?: "small" | "medium" | "large";
|
|
34
|
+
}
|
|
35
|
+
declare const Fieldset: ({ children, name, id, legend, legendAlign, legendHint, error, warning, isRequired, isDisabled, validationMessagePositionTop, size, ...rest }: FieldsetProps) => React.JSX.Element;
|
|
36
|
+
export default Fieldset;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useRef as i}from"react";import{StyledFieldset as n,StyledLegend as o,StyledFieldsetContentWrapper as s}from"./fieldset.style.js";import l from"../../../components/textbox/textbox.style.js";import a from"../../validation-message/validation-message.component.js";import{HintText as c}from"../../hint-text/hint-text.component.js";import d from"../../utils/helpers/guid/index.js";import"../../../style/utils/filter-styled-system-padding-props.js";import p from"../../../style/utils/filter-styled-system-margin-props.js";function g(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,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:x,size:$="medium"}=m,D=function(e,t){if(null==e)return{};var r,i,n=function(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)r=o[i],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)r=o[i],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(m,["children","name","id","legend","legendAlign","legendHint","error","warning","isRequired","isDisabled","validationMessagePositionTop","size"]);const S=i(d()),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(r,{children:[t(a,{error:v,warning:h,validationId:q,isLarge:"large"===$}),t(l,{warning:!(v||!h)})]}):null;return e(n,(M=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(t){g(e,t,r[t])}))}return e}({"data-component":"fieldset",id:z,name:u,"aria-describedby":E,$validationMessagePositionTop:x,$size:$},p(D),D),R=null!=(R={children:[y&&t(o,{"data-element":"legend",$align:O,$isRequired:P,$isDisabled:w,$isLarge:"large"===$,children:y}),j&&t(c,{id:k,isDisabled:w,align:O,isLarge:"large"===$,marginBottom:"0",children:j}),e(s,{$size:$,children:[x&&L(),f,!x&&L()]})]})?R:{},Object.getOwnPropertyDescriptors?Object.defineProperties(M,Object.getOwnPropertyDescriptors(R)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(R)).forEach((function(e){Object.defineProperty(M,e,Object.getOwnPropertyDescriptor(R,e))})),M));var M,R};export{m as default};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
type StyledFieldsetProps = {
|
|
2
|
+
$validationMessagePositionTop?: boolean;
|
|
3
|
+
$size: "small" | "medium" | "large";
|
|
4
|
+
};
|
|
5
|
+
export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, {
|
|
6
|
+
theme: object;
|
|
7
|
+
} & StyledFieldsetProps, "theme">;
|
|
8
|
+
export type StyledLegendProps = {
|
|
9
|
+
$align?: "left" | "right";
|
|
10
|
+
$isRequired?: boolean;
|
|
11
|
+
$isDisabled?: boolean;
|
|
12
|
+
$isLarge?: boolean;
|
|
13
|
+
};
|
|
14
|
+
export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
|
|
15
|
+
export declare const StyledFieldsetContentWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
16
|
+
$size: "small" | "medium" | "large";
|
|
17
|
+
}, never>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import a,{css as e}from"styled-components";import{margin as t}from"styled-system";import i from"../../../style/themes/apply-base-theme.js";import l from"../../validation-message/validation-message.style.js";const o={small:{contentMargin:"var(--global-space-comp-xs)",validationMargin:"var(--global-space-comp-xs)"},medium:{contentMargin:"var(--global-space-comp-s)",validationMargin:"var(--global-space-comp-s)"},large:{contentMargin:"var(--global-space-comp-m)",validationMargin:"var(--global-space-comp-s)"}},n=a.fieldset.attrs(i).withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-daa668c3-0"})(["margin:0;margin-bottom:var(--fieldSpacing);"," border:none;padding:0;min-width:0;min-inline-size:0;width:fit-content;","{","}"],t,l,(({$validationMessagePositionTop:a,$size:t})=>e(["margin:0;margin-",":",";"],a?"bottom":"top",o[t].validationMargin))),s=a.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-daa668c3-1"})(["display:flex;align-items:center;padding:0;font:var(--global-font-static-comp-medium-s);color:var(--input-labelset-label-default);",""],(({$isLarge:a,$isDisabled:t,$isRequired:i,$align:l})=>e([""," "," "," ",""],a&&e(["font:var(--global-font-static-comp-medium-l);"]),i&&e(['::after{content:"*";font:var(--global-font-static-comp-medium-s);color:var(--input-labelset-label-required);margin-left:var(--global-space-comp-xs);position:relative;',"}"],a&&e(["font:var(--global-font-static-comp-medium-l);"])),t&&e(["color:var(--input-labelset-label-disabled);::after{color:var(--input-labelset-label-disabled);}"]),l&&e(["text-align:",";justify-content:",";"],l,"right"===l?"flex-end":"flex-start")))),r=a.div.withConfig({displayName:"fieldset.style__StyledFieldsetContentWrapper",componentId:"sc-daa668c3-2"})(["position:relative;",";"],(({$size:a})=>e(["margin-top:",";"],o[a].contentMargin)));export{n as StyledFieldset,r as StyledFieldsetContentWrapper,s as StyledLegend};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import i from"../../__internal__/utils/logger/index.js";import n from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import s from"../../style/utils/color.js";import{getWindow as l,getNavigator as a}from"../../__internal__/dom/globals.js";import c,{isSafari as m}from"../../__internal__/utils/helpers/browser-type-check/index.js";import d from"./icon-config.js";import f from"./icon-unicodes.js";import{StyledButton as g}from"../button/__next__/button.style.js";const p=o.span.attrs(n).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-
|
|
1
|
+
import o,{css as e}from"styled-components";import{margin as t}from"styled-system";import i from"../../__internal__/utils/logger/index.js";import n from"../../style/themes/apply-base-theme.js";import r from"../../style/utils/add-focus-styling.js";import s from"../../style/utils/color.js";import{getWindow as l,getNavigator as a}from"../../__internal__/dom/globals.js";import c,{isSafari as m}from"../../__internal__/utils/helpers/browser-type-check/index.js";import d from"./icon-config.js";import f from"./icon-unicodes.js";import{StyledButton as g}from"../button/__next__/button.style.js";const p=o.span.attrs(n).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-c60a91e8-0"})([""," "," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({theme:o,color:n,bg:g,isInteractive:p,bgSize:u,bgShape:h,type:b,fontSize:y,disabled:_,hasTooltip:z})=>{let S="var(--colorsYin090)",j="transparent";const v=l(),x=a(),k=function(o,e){const t={small:1,medium:2,large:3,"extra-large":4};return o&&e?t[e]<t[o]?(i.warn(`[WARNING - Icon] The "${e}" \`bgSize\` is smaller than "${o}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),d.backgroundSize[o]):d.backgroundSize[e]:e?d.backgroundSize[e]:void 0}(y,u);if(_)S="var(--colorsYin030)";else if(n){const{color:e}=s({color:n,theme:o});S=e}if(g){const{backgroundColor:e}=s({bg:g,theme:o});j=e}return e(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," ",""],S,j,k,k,h?`border-radius: ${d.backgroundShape[h]}`:"",p&&e(["&:not(:focus):hover{filter:brightness(0.9);}"]),f[b],y&&e(["font-size:",";line-height:",";"],d.iconSize[y],d.iconSize[y]),v&&"services"===b&&c(v)&&e(["margin-top:",";"],"small"===y?"-7px":"-8px"),x&&v&&"services"===b&&m(x)&&!c(v)&&e(["margin-top:-6px;"]),z&&`\n :focus {\n ${r()}\n }\n `,t)}),g);export{p as default};
|
|
@@ -5,6 +5,8 @@ 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
7
|
export interface PortraitProps extends MarginProps, TagProps {
|
|
8
|
+
/** @private @ignore */
|
|
9
|
+
className?: string;
|
|
8
10
|
/** A custom image URL. */
|
|
9
11
|
src?: string;
|
|
10
12
|
/** The size of the Portrait. */
|
|
@@ -44,5 +46,5 @@ export interface PortraitProps extends MarginProps, TagProps {
|
|
|
44
46
|
/** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
|
|
45
47
|
foregroundColor?: string;
|
|
46
48
|
}
|
|
47
|
-
export declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
|
|
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;
|
|
48
50
|
export default Portrait;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as o}from"react/jsx-runtime";import{useState as t,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
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{useState as t,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(o,t,e){return t in o?Object.defineProperty(o,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[t]=e,o}function u(o){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable})))),r.forEach((function(t){c(o,t,e[t])}))}return o}function f(o,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(t)):function(o){var t=Object.keys(o);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(o);t.push.apply(t,e)}return t}(Object(t)).forEach((function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(t,e))})),o}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:P,onClick:w,tooltipMessage:v,tooltipId:z,tooltipIsVisible:S,tooltipPosition:B,tooltipType:I,tooltipSize:V,tooltipBgColor:x,tooltipFontColor:D}=c,E=function(o,t){if(null==o)return{};var e,r,i=function(o,t){if(null==o)return{};var e,r,i={},n=Object.keys(o);for(r=0;r<n.length;r++)e=n[r],t.indexOf(e)>=0||(i[e]=o[e]);return i}(o,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(o);for(r=0;r<n.length;r++)e=n[r],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(o,e)&&(i[e]=o[e])}return i}(c,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor"]);const[N,T]=t(!1),_=Boolean(P)&&!N;e((()=>{T(!1)}),[P]);const M=i("portrait",E);return(()=>{let t=o(s,{type:j,size:h});return k&&(t=o(n,{size:h,"data-element":"initials",children:k.slice(0,3).toUpperCase()})),P&&!N&&(t=o(a,{src:P,alt:d||b||"","data-element":"user-image",onError:()=>T(!0)})),v?o(r,{message:v,id:z,position:B,type:I,size:V,isVisible:S,bgColor:x,fontColor:D,children:o(l,f(u(f(u({},p(E)),{onClick:w,className:y}),M),{hasValidImg:_,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,children:t}))}):o(l,f(u(f(u({},p(E)),{onClick:w,className:y}),M),{hasValidImg:_,darkBackground:O,size:h,shape:C,backgroundColor:g,foregroundColor:m,children:t}))})()};export{d as Portrait,d as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"react";import i from"styled-components";import{margin as t}from"styled-system";import
|
|
1
|
+
import"react";import i from"styled-components";import{margin as t}from"styled-system";import e from"../icon/icon.component.js";import o from"../profile/profile.config.js";import r from"../../style/themes/apply-base-theme.js";import{PORTRAIT_SIZE_PARAMS as n}from"./portrait.config.js";import s from"./__internal__/get-colors.js";const l=i.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-7cf94d65-0"})(["font-weight:500;font-size:",";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:i})=>o[i].initialSize)),m=i.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-7cf94d65-1"})(["height:inherit;min-width:inherit;"]),d=i(e).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-7cf94d65-2"})(["&&{color:inherit;height:inherit;min-width:inherit;::before{font-size:","px;}}"],(({size:i})=>n[i].iconDimensions)),a=i.div.attrs(r).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-7cf94d65-3"})(["",";"," min-width:","px;height:","px;overflow:hidden;border-radius:",";border:1px solid var(--colorsUtilityReadOnly600);display:inline-block;"," "," .mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({darkBackground:i,backgroundColor:t,size:e,foregroundColor:o})=>s(t,i,!["XS","S"].includes(e),!0,o)),(({hasValidImg:i,size:t})=>i&&`max-width: ${n[t].dimensions}px;`),(({size:i})=>n[i].dimensions),(({size:i})=>n[i].dimensions),(({shape:i})=>"square"===i?"0px":"var(--borderRadiusCircle)"),(({onClick:i})=>i&&"cursor: pointer"),t);export{m as StyledCustomImg,d as StyledIcon,a as StyledPortraitContainer,l 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, 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, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
|
|
15
15
|
export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface PluginProviderProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
parentRef: HTMLElement | null;
|
|
5
|
+
}
|
|
6
|
+
export declare const PluginProvider: ({ children, parentRef, }: PluginProviderProps) => React.JSX.Element;
|
|
7
|
+
export declare const usePluginContext: () => {
|
|
8
|
+
getParentRef: () => HTMLElement | undefined;
|
|
9
|
+
};
|
|
10
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useContext as r,createContext as t}from"react";const o=t({getParentRef:()=>{}}),i=({children:r,parentRef:t})=>e(o.Provider,{value:{getParentRef:()=>t||void 0},children:r}),n=()=>r(o);export{i as PluginProvider,n as usePluginContext};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import MentionTypeaheadOption from "./mention-typeahead-option.class";
|
|
3
|
-
export declare const MentionsTypeaheadMenuItem: ({ index, isSelected,
|
|
3
|
+
export declare const MentionsTypeaheadMenuItem: ({ index, isSelected, onClick, onMouseEnter, option, currentQueryString, ...rest }: {
|
|
4
4
|
index: number;
|
|
5
5
|
isSelected: boolean;
|
|
6
|
-
namespace: string;
|
|
7
6
|
onClick: () => void;
|
|
8
7
|
onMouseEnter: () => void;
|
|
9
8
|
option: MentionTypeaheadOption;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{MentionsListItem as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{MentionsListItem as r}from"./mentions.style.js";import{Portrait as n}from"../../../../portrait/portrait.component.js";function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const i=({text:r,query:n})=>{if(!n)return t("span",{children:r});const o=r.toLowerCase(),i=n.toLowerCase(),c=o.indexOf(i);if(-1===c)return t("span",{children:r});const l=r.slice(0,c),s=r.slice(c,c+n.length),a=r.slice(c+n.length);return e("span",{className:"text",children:[l,t("strong",{children:s}),a]})},c=c=>{var l,s,{index:a,isSelected:p,onClick:u,onMouseEnter:f,option:y,currentQueryString:b}=c,O=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}(c,["index","isSelected","onClick","onMouseEnter","option","currentQueryString"]);return e(r,(l=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){o(e,t,r[t])}))}return e}({tabIndex:-1,className:"item mentions-list-item"+(p?" selected":""),ref:y.setRefElement,role:"option","aria-selected":p,id:`typeahead-item-${a}`,onMouseEnter:f,onClick:u,onKeyDown:u,"aria-label":y.name},O),s=null!=(s={children:[t(n,{initials:y.initials,src:y.src,iconType:y.iconType||"individual",size:"XS",shape:"circle"}),t(i,{text:y.name,query:b})]})?s:{},Object.getOwnPropertyDescriptors?Object.defineProperties(l,Object.getOwnPropertyDescriptors(s)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(s)).forEach((function(e){Object.defineProperty(l,e,Object.getOwnPropertyDescriptor(s,e))})),l),y.id)};export{c as MentionsTypeaheadMenuItem,c as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{LexicalTypeaheadMenuPlugin as n}from"@lexical/react/LexicalTypeaheadMenuPlugin";import{$isTextNode as o,$createTextNode as r,KEY_BACKSPACE_COMMAND as i,$getSelection as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{LexicalTypeaheadMenuPlugin as n}from"@lexical/react/LexicalTypeaheadMenuPlugin";import{$isTextNode as o,$createTextNode as r,KEY_BACKSPACE_COMMAND as i,$getSelection as l,$isRangeSelection as s,TextNode as a,COMMAND_PRIORITY_LOW as m}from"lexical";import{useState as c,useMemo as p,useCallback as d,useEffect as u}from"react";import f from"react-dom";import{SUGGESTION_LIST_LENGTH_LIMIT as g}from"./constants.js";import{getPossibleQueryMatch as x}from"./helpers.js";import{MentionsTypeaheadMenuItem as h}from"./mentions-typeahead-menu-item.component.js";import{MentionTypeaheadOption as v}from"./mention-typeahead-option.class.js";import{$createMentionNode as C,$isMentionNode as _}from"../../__nodes__/mention.node.js";import j from"../../../../../hooks/__internal__/useLocale/useLocale.js";import{TypeaheadPopover as b,MentionsList as y}from"./mentions.style.js";import{usePluginContext as L}from"../../__providers__/plugin-provider.js";const A=({namespace:A,searchOptions:O})=>{const[T]=t(),[$,w]=c(null),S=p((()=>$?O.filter((e=>e.name.toLowerCase().includes($.toLowerCase()))):[]),[$,O]),k=j(),I=p((()=>S.map((e=>new v(e.id,e.name,e.initials,e.iconType,e.src))).slice(0,g)),[S]),N=d(((e,t,n)=>{T.update((()=>{const i=C(`@${e.name}`);t&&t.replace(i);const l=i.getNextSibling();if(o(l)&&l.getTextContent().startsWith(" "))l.select(1,1);else{const e=r(" ");i.insertAfter(e),e.select()}n()}))}),[T]);u((()=>T.registerCommand(i,(()=>{const e=l();if(!s(e)||!e.isCollapsed())return!1;const{anchor:t}=e,n=t.getNode();if(_(n)){const e=new a(n.getTextContent());return n.replace(e),!0}return!1}),m)),[T]);const{getParentRef:P}=L(),R=P(),E=null==R?void 0:R.getBoundingClientRect();var F;const M=null!==(F=null==E?void 0:E.left)&&void 0!==F?F:0;var Q;const B=null!==(Q=null==E?void 0:E.top)&&void 0!==Q?Q:0;return e(n,{onQueryChange:w,onSelectOption:N,triggerFn:e=>x(e),options:I,parent:R,menuRenderFn:(t,{selectedIndex:n,selectOptionAndCleanUp:o,setHighlightedIndex:r})=>{const i=t.current;return i&&0!==S.length?(i.setAttribute("aria-label",k.textEditor.mentions.listAriaLabel()),f.createPortal(e(b,{className:"carbon-portal-mentions",id:`${A}-mentions-menu`,parentOffsetLeft:M,parentOffsetTop:B,children:e(y,{"data-role":"mention-list",id:`${A}-mention-list`,role:"group",tabIndex:0,children:I.map(((t,i)=>{var l,s;const a=null!==(s=null!==(l=t.key)&&void 0!==l?l:t.id)&&void 0!==s?s:`${A}-${i}`;return e(h,{index:i,isSelected:n===i,onClick:()=>{r(i),o(t)},onMouseEnter:()=>{r(i)},option:t,currentQueryString:null!=$?$:void 0},a)}))})}),i)):(null==i||i.removeAttribute("aria-label"),null)}})};export{A as MentionsPlugin,A as default};
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
export declare const TypeaheadPopover: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const TypeaheadPopover: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
parentOffsetLeft: number;
|
|
3
|
+
parentOffsetTop: number;
|
|
4
|
+
}, never>;
|
|
2
5
|
export declare const MentionsList: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
3
6
|
export declare const MentionsListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o from"styled-components";const e=o.div.withConfig({displayName:"mentions.style__TypeaheadPopover",componentId:"sc-
|
|
1
|
+
import o from"styled-components";const e=o.div.withConfig({displayName:"mentions.style__TypeaheadPopover",componentId:"sc-17cb70da-0"})(["background:var(--popover-bg-default);box-shadow:var(--global-depth-lvl1);border-radius:var(--global-radius-action-m);position:relative;top:","px;left:","px;width:250px;"],(({parentOffsetTop:o})=>-o),(({parentOffsetLeft:o})=>-o)),r=o.ul.withConfig({displayName:"mentions.style__MentionsList",componentId:"sc-17cb70da-1"})(["padding:var(--global-space-comp-s) 0;list-style:none;margin:0;border-radius:var(--global-radius-container-m);max-height:200px;overflow-y:scroll;&::-webkit-scrollbar{display:none;}-ms-overflow-style:none;scrollbar-width:none;"]),a=o.li.withConfig({displayName:"mentions.style__MentionsListItem",componentId:"sc-17cb70da-2"})(['padding:var(--global-space-comp-s) var(--global-space-comp-xl);color:var(--input-dropdown-label-default);cursor:pointer;font:var(--global-font-static-comp-regular-m);display:flex;align-content:center;flex-direction:row;flex-shrink:0;background-color:var(--popover-bg-default);border-radius:0;border:0;&:hover{color:var(--popover-label-hover);border-radius:0;}}&.selected{background:var(--popover-bg-hover);color:var(--popover-label-hover);}.text{display:flex;font:var(--global-font-static-comp-regular-m);flex-grow:1;min-width:150px;margin-left:var(--global-space-comp-xs);align-items:center;margin-top:-1px;white-space:pre;}div[data-component="portrait"]{color:var(--input-dropdown-label-default);font:var(--profile-font-initials-xs);min-width:var(--profile-size-outside-xs);height:var(--profile-size-outside-xs);overflow:hidden;border-radius:var(--global-radius-container-circle);border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;[data-element="initials"],[data-component="icon"]{color:var(--input-dropdown-label-default);}}']);export{r as MentionsList,a as MentionsListItem,e as TypeaheadPopover};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as s}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as c}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as
|
|
1
|
+
import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as s}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as c}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as p}from"@lexical/react/LexicalListPlugin";import{OnChangePlugin as d}from"@lexical/react/LexicalOnChangePlugin";import{PluginProvider as _}from"./__internal__/__providers__/plugin-provider.js";import{$getRoot as u}from"lexical";import{forwardRef as m,useRef as f,useState as g,useImperativeHandle as h,useEffect as v,useMemo as b,useCallback as x}from"react";import y from"../../__internal__/label/label.component.js";import j from"../../hooks/__internal__/useLocale/useLocale.js";import w from"../../__internal__/utils/logger/index.js";import{COMPONENT_PREFIX as O,MARKDOWN_NODES as P}from"./__internal__/__utils__/constants.js";import L from"./__internal__/__plugins__/AutoLinker/auto-link.component.js";import C from"./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js";import E from"./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js";import"./__internal__/__plugins__/useCursorAtEnd/index.js";import T from"./text-editor.context.js";import{StyledTextEditorWrapper as k,StyledWrapper as S,StyledEditorToolbarWrapper as M,StyledHeaderWrapper as $,StyledTextEditor as B,StyledFooterWrapper as F}from"./text-editor.style.js";import{createEmpty as H,SerializeLexical as z,validateUrl as A}from"./__internal__/__utils__/helpers.js";import{HintText as R}from"../../__internal__/hint-text/hint-text.component.js";import q from"../../__internal__/validation-message/validation-message.component.js";import D from"../textbox/textbox.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import I from"../../style/utils/filter-styled-system-margin-props.js";import V from"../../__internal__/utils/helpers/tags/tags.js";import U from"./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js";import{getTheme as G}from"./__internal__/__utils__/theme.js";import J from"./__internal__/__ui__/CharacterCounter/character-counter.component.js";import K from"./__internal__/__ui__/ContentEditor/content-editor.component.js";import"./__internal__/__ui__/LinkPreviewer/link-previewer.style.js";import"@lexical/react/LexicalComposerContext";import"@lexical/react/LexicalTypeaheadMenuPlugin";import"react-dom";import"./__internal__/__ui__/Mentions/constants.js";import"./__internal__/__ui__/Mentions/mentions.style.js";import"../tooltip/tooltip.component.js";import"../portrait/portrait.style.js";import N from"./__internal__/__ui__/Placeholder/placeholder.component.js";import Q from"./__internal__/__ui__/Toolbar/toolbar.component.js";function W(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function X(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){W(e,r,t[r])}))}return e}let Y=!1,Z=!1,ee=!1;const re=m(((m,W)=>{var re,te,ne,{characterLimit:oe=3e3,error:ie,footer:ae,header:le,inputHint:se,labelText:ce,namespace:pe=O,id:de,onBlur:_e,onCancel:ue,onChange:me,onFocus:fe,onLinkAdded:ge,onSave:he,placeholder:ve,previews:be=[],readOnly:xe=!1,required:ye=!1,rows:je,size:we="medium",warning:Oe,customPlugins:Pe,validationMessagePositionTop:Le=!1,toolbarControls:Ce}=m,Ee=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(m,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!Y&&Ee.value&&(Y=!0,w.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!Z&&ue&&(Z=!0,w.deprecate("`onCancel` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.")),!ee&&he&&(ee=!0,w.deprecate("`onSave` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality."));const Te=f(null!==(ne=null!==(te=Ee.initialValue)&&void 0!==te?te:Ee.value)&&void 0!==ne?ne:H()),ke=j(),[Se,Me]=g(void 0),$e=f(null),[Be,Fe]=g(null),[He,ze]=g(!1);h(W,(()=>({focus(){var e;null===(e=$e.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==$e?void 0:$e.current,r=()=>{ze(!0)},t=()=>{ze(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[$e]);const Ae=b((()=>({namespace:pe,nodes:P,onError:e=>w.error(e.message),theme:G(),editorState:Te.current,editable:!xe})),[pe,xe]),Re=x(((e,r)=>{const t=e.read((()=>u().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(me){const e=z(r);null==me||me(t,e)}if(oe>0){const e=oe-t.length;Me(e<0?ke.textEditor.characterLimit(Math.abs(e)):void 0)}}),[oe,ke.textEditor,me]),qe=x((e=>{if(!e.isEditable())return;if(!ue)return;const r=e.parseEditorState(Te.current);e.setEditorState(r),ue()}),[ue]),De=b((()=>({namespace:pe,onCancel:ue?qe:void 0,onSave:he,toolbarControls:Ce})),[qe,pe,ue,he,Ce]),Ie=Oe||Se,Ve=()=>{switch(we){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e(k,(Ue=X({"data-role":`${pe}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==_e||_e(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==fe||fe(e)}},I(Ee),V("text-editor",Ee)),Ge={children:r(T.Provider,{value:{onLinkAdded:ge},children:[e(y,{onClick:()=>{var e;return null===(e=$e.current)||void 0===e?void 0:e.focus()},isRequired:ye,labelId:`${pe}-label`,children:ce}),se&&!xe&&e(R,{id:`${pe}-input-hint`,marginBottom:Ve(),children:se}),e(n,{initialConfig:Ae,children:r(S,{"data-role":`${pe}-wrapper`,ref:Fe,children:[Le&&r(t,{children:[e(q,{error:ie,warning:Ie,validationId:`${pe}-validation-message`,"data-role":`${pe}-validation-message`,validationMessagePositionTop:Le}),(ie||Ie)&&e(D,{warning:!(ie||!Ie)})]}),r(M,{"data-role":`${pe}-editor-toolbar-wrapper`,error:!!ie,id:`${pe}-editor-toolbar-wrapper`,children:[le&&e($,{"data-role":`${pe}-header-wrapper`,children:le}),xe?e(U,{"aria-label":ce,initialValue:(null===(re=$e.current)||void 0===re?void 0:re.innerHTML)||Te.current,size:we}):r(t,{children:[e(Q,X({contentEditorRef:$e,hasHeader:Boolean(le),size:we},De)),r(B,{"data-role":`${pe}-editor`,error:!!ie,children:[e(s,{contentEditable:e(K,{id:de,ref:$e,inputHint:se,isFocused:He,namespace:pe,previews:be,rows:je,readOnly:xe,required:ye,error:!!ie,warning:!!Oe||!!Se,validationMessagePositionTop:Le,size:we}),placeholder:e(N,{namespace:pe,text:ve}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(d,{onChange:Re,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e(c,{validateUrl:A}),e(o,{newTab:!0}),e(L,{}),e(E,{}),e(_,{parentRef:Be,children:Pe})]})]}),ae&&e(F,{"data-role":`${pe}-footer-wrapper`,size:we,children:ae}),e(C,{})]}),!Le&&r(t,{children:[e(q,{error:ie,warning:Ie,validationId:`${pe}-validation-message`,"data-role":`${pe}-validation-message`,validationMessagePositionTop:Le}),(ie||Ie)&&e(D,{warning:!(ie||!Ie)})]}),oe>0&&!xe&&e(J,{isFocused:He,maxChars:oe,namespace:pe,marginTop:Ve()})]})})]})},Ge=null!=Ge?Ge:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ue,Object.getOwnPropertyDescriptors(Ge)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Ge)).forEach((function(e){Object.defineProperty(Ue,e,Object.getOwnPropertyDescriptor(Ge,e))})),Ue));var Ue,Ge}));export{re as TextEditor,re as default};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal Fieldset component used as base for any grouped inputs.
|
|
3
|
+
*
|
|
4
|
+
* @description Renders a fieldset element with an optional legend and hint text, and handles
|
|
5
|
+
* the display of validation messages for grouped inputs.
|
|
6
|
+
*/
|
|
7
|
+
import React from "react";
|
|
8
|
+
import { MarginProps } from "styled-system";
|
|
9
|
+
export interface FieldsetProps extends MarginProps {
|
|
10
|
+
/** Inputs rendered within the fieldset. */
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
/** Set a name value on the fieldset. */
|
|
13
|
+
name?: string;
|
|
14
|
+
/** Set an id value on the fieldset. */
|
|
15
|
+
id?: string;
|
|
16
|
+
/** The content for the fieldset legend. */
|
|
17
|
+
legend?: string;
|
|
18
|
+
/** Content for an additional hint text below the legend */
|
|
19
|
+
legendHint?: React.ReactNode;
|
|
20
|
+
/** Text alignment of the legend */
|
|
21
|
+
legendAlign?: "left" | "right";
|
|
22
|
+
/** Error message to be displayed when validation fails */
|
|
23
|
+
error?: string;
|
|
24
|
+
/** Warning message to be displayed when validation warning occurs */
|
|
25
|
+
warning?: string;
|
|
26
|
+
/** If true, an asterisk will be added to the label */
|
|
27
|
+
isRequired?: boolean;
|
|
28
|
+
/** Apply disabled styling to the component */
|
|
29
|
+
isDisabled?: boolean;
|
|
30
|
+
/** Specifies whether the validation message should be displayed above the input */
|
|
31
|
+
validationMessagePositionTop?: boolean;
|
|
32
|
+
/** Set the size of the component */
|
|
33
|
+
size?: "small" | "medium" | "large";
|
|
34
|
+
}
|
|
35
|
+
declare const Fieldset: ({ children, name, id, legend, legendAlign, legendHint, error, warning, isRequired, isDisabled, validationMessagePositionTop, size, ...rest }: FieldsetProps) => React.JSX.Element;
|
|
36
|
+
export default Fieldset;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./fieldset.style.js"),i=require("../../../components/textbox/textbox.style.js"),n=require("../../validation-message/validation-message.component.js"),s=require("../../hint-text/hint-text.component.js"),l=require("../../utils/helpers/guid/index.js");require("../../../style/utils/filter-styled-system-padding-props.js");var o=require("../../../style/utils/filter-styled-system-margin-props.js");function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}exports.default=d=>{var{children:u,name:c,id:g,legend:p,legendAlign:b,legendHint:f,error:y,warning:j,isRequired:O,isDisabled:m,validationMessagePositionTop:v,size:x="medium"}=d,h=function(e,r){if(null==e)return{};var t,i,n=function(e,r){if(null==e)return{};var t,i,n={},s=Object.keys(e);for(i=0;i<s.length;i++)t=s[i],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(i=0;i<s.length;i++)t=s[i],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(d,["children","name","id","legend","legendAlign","legendHint","error","warning","isRequired","isDisabled","validationMessagePositionTop","size"]);const P=r.useRef(l.default()),w=g||P.current,q=f?`${w}-hint`:void 0,S=(y||j)&&`${w}-validation-message`,$=[q,S].filter(Boolean).join(" "),D=()=>y||j?e.jsxs(e.Fragment,{children:[e.jsx(n.default,{error:y,warning:j,validationId:S,isLarge:"large"===x}),e.jsx(i.default,{warning:!(y||!j)})]}):null;return e.jsxs(t.StyledFieldset,(z=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){a(e,r,t[r])}))}return e}({"data-component":"fieldset",id:w,name:c,"aria-describedby":$,$validationMessagePositionTop:v,$size:x},o.default(h),h),L=null!=(L={children:[p&&e.jsx(t.StyledLegend,{"data-element":"legend",$align:b,$isRequired:O,$isDisabled:m,$isLarge:"large"===x,children:p}),f&&e.jsx(s.HintText,{id:q,isDisabled:m,align:b,isLarge:"large"===x,marginBottom:"0",children:f}),e.jsxs(t.StyledFieldsetContentWrapper,{$size:x,children:[v&&D(),u,!v&&D()]})]})?L:{},Object.getOwnPropertyDescriptors?Object.defineProperties(z,Object.getOwnPropertyDescriptors(L)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(L)).forEach((function(e){Object.defineProperty(z,e,Object.getOwnPropertyDescriptor(L,e))})),z));var z,L};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
type StyledFieldsetProps = {
|
|
2
|
+
$validationMessagePositionTop?: boolean;
|
|
3
|
+
$size: "small" | "medium" | "large";
|
|
4
|
+
};
|
|
5
|
+
export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, {
|
|
6
|
+
theme: object;
|
|
7
|
+
} & StyledFieldsetProps, "theme">;
|
|
8
|
+
export type StyledLegendProps = {
|
|
9
|
+
$align?: "left" | "right";
|
|
10
|
+
$isRequired?: boolean;
|
|
11
|
+
$isDisabled?: boolean;
|
|
12
|
+
$isLarge?: boolean;
|
|
13
|
+
};
|
|
14
|
+
export declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
|
|
15
|
+
export declare const StyledFieldsetContentWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
16
|
+
$size: "small" | "medium" | "large";
|
|
17
|
+
}, never>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("styled-components"),a=require("styled-system"),t=require("../../../style/themes/apply-base-theme.js"),i=require("../../validation-message/validation-message.style.js");function l(e){return e&&e.__esModule?e:{default:e}}var s=l(e);const n={small:{contentMargin:"var(--global-space-comp-xs)",validationMargin:"var(--global-space-comp-xs)"},medium:{contentMargin:"var(--global-space-comp-s)",validationMargin:"var(--global-space-comp-s)"},large:{contentMargin:"var(--global-space-comp-m)",validationMargin:"var(--global-space-comp-s)"}},o=s.default.fieldset.attrs(t.default).withConfig({displayName:"fieldset.style__StyledFieldset",componentId:"sc-daa668c3-0"})(["margin:0;margin-bottom:var(--fieldSpacing);"," border:none;padding:0;min-width:0;min-inline-size:0;width:fit-content;","{","}"],a.margin,i.default,(({$validationMessagePositionTop:a,$size:t})=>e.css(["margin:0;margin-",":",";"],a?"bottom":"top",n[t].validationMargin))),r=s.default.legend.withConfig({displayName:"fieldset.style__StyledLegend",componentId:"sc-daa668c3-1"})(["display:flex;align-items:center;padding:0;font:var(--global-font-static-comp-medium-s);color:var(--input-labelset-label-default);",""],(({$isLarge:a,$isDisabled:t,$isRequired:i,$align:l})=>e.css([""," "," "," ",""],a&&e.css(["font:var(--global-font-static-comp-medium-l);"]),i&&e.css(['::after{content:"*";font:var(--global-font-static-comp-medium-s);color:var(--input-labelset-label-required);margin-left:var(--global-space-comp-xs);position:relative;',"}"],a&&e.css(["font:var(--global-font-static-comp-medium-l);"])),t&&e.css(["color:var(--input-labelset-label-disabled);::after{color:var(--input-labelset-label-disabled);}"]),l&&e.css(["text-align:",";justify-content:",";"],l,"right"===l?"flex-end":"flex-start")))),d=s.default.div.withConfig({displayName:"fieldset.style__StyledFieldsetContentWrapper",componentId:"sc-daa668c3-2"})(["position:relative;",";"],(({$size:a})=>e.css(["margin-top:",";"],n[a].contentMargin)));exports.StyledFieldset=o,exports.StyledFieldsetContentWrapper=d,exports.StyledLegend=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../__internal__/utils/logger/index.js"),i=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),n=require("../../style/utils/color.js"),s=require("../../__internal__/dom/globals.js"),l=require("../../__internal__/utils/helpers/browser-type-check/index.js"),a=require("./icon-config.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../__internal__/utils/logger/index.js"),i=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),n=require("../../style/utils/color.js"),s=require("../../__internal__/dom/globals.js"),l=require("../../__internal__/utils/helpers/browser-type-check/index.js"),a=require("./icon-config.js"),c=require("./icon-unicodes.js"),u=require("../button/__next__/button.style.js");function d(e){return e&&e.__esModule?e:{default:e}}const f=d(e).default.span.attrs(i.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-c60a91e8-0"})([""," "," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({theme:i,color:u,bg:d,isInteractive:f,bgSize:g,bgShape:m,type:b,fontSize:h,disabled:p,hasTooltip:y})=>{let _="var(--colorsYin090)",S="transparent";const v=s.getWindow(),z=s.getNavigator(),j=function(e,t){const i={small:1,medium:2,large:3,"extra-large":4};return e&&t?i[t]<i[e]?(o.default.warn(`[WARNING - Icon] The "${t}" \`bgSize\` is smaller than "${e}" \`fontSize\`, the \`bgSize\` has been auto adjusted to a larger size.`),a.default.backgroundSize[e]):a.default.backgroundSize[t]:t?a.default.backgroundSize[t]:void 0}(h,g);if(p)_="var(--colorsYin030)";else if(u){const{color:e}=n.default({color:u,theme:i});_=e}if(d){const{backgroundColor:e}=n.default({bg:d,theme:i});S=e}return e.css(["position:relative;color:",";background-color:",";vertical-align:middle;align-items:center;display:inline-flex;justify-content:center;height:",";width:",";",";",' &::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:CarbonIcons;content:"','";font-style:normal;font-weight:normal;vertical-align:middle;'," "," "," display:block;}"," ",""],_,S,j,j,m?`border-radius: ${a.default.backgroundShape[m]}`:"",f&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),c.default[b],h&&e.css(["font-size:",";line-height:",";"],a.default.iconSize[h],a.default.iconSize[h]),v&&"services"===b&&l.default(v)&&e.css(["margin-top:",";"],"small"===h?"-7px":"-8px"),z&&v&&"services"===b&&l.isSafari(z)&&!l.default(v)&&e.css(["margin-top:-6px;"]),y&&`\n :focus {\n ${r.default()}\n }\n `,t.margin)}),u.StyledButton);exports.default=f;
|
|
@@ -5,6 +5,8 @@ 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
7
|
export interface PortraitProps extends MarginProps, TagProps {
|
|
8
|
+
/** @private @ignore */
|
|
9
|
+
className?: string;
|
|
8
10
|
/** A custom image URL. */
|
|
9
11
|
src?: string;
|
|
10
12
|
/** The size of the Portrait. */
|
|
@@ -44,5 +46,5 @@ export interface PortraitProps extends MarginProps, TagProps {
|
|
|
44
46
|
/** The hex code of the foreground colour. This will only take effect if use in conjunction with `backgroundColor` */
|
|
45
47
|
foregroundColor?: string;
|
|
46
48
|
}
|
|
47
|
-
export declare const Portrait: ({ alt, backgroundColor, foregroundColor, name, darkBackground, iconType, initials, shape, size, src, onClick, tooltipMessage, tooltipId, tooltipIsVisible, tooltipPosition, tooltipType, tooltipSize, tooltipBgColor, tooltipFontColor, ...rest }: PortraitProps) => React.JSX.Element;
|
|
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;
|
|
48
50
|
export default Portrait;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../tooltip/tooltip.component.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("./portrait.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../tooltip/tooltip.component.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),i=require("./portrait.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var l=require("../../style/utils/filter-styled-system-margin-props.js");function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}function a(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 c=n=>{var{alt:c,backgroundColor:p,foregroundColor:u,className:d,name:y,darkBackground:f=!1,iconType:g="individual",initials:b,shape:j="circle",size:O="M",src:m,onClick:C,tooltipMessage:P,tooltipId:k,tooltipIsVisible:h,tooltipPosition:S,tooltipType:v,tooltipSize:x,tooltipBgColor:w,tooltipFontColor:I}=n,z=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},l=Object.keys(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(n,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor"]);const[q,B]=t.useState(!1),_=Boolean(m)&&!q;t.useEffect((()=>{B(!1)}),[m]);const E=o.default("portrait",z);return(()=>{let t=e.jsx(i.StyledIcon,{type:g,size:O});return b&&(t=e.jsx(i.StyledPortraitInitials,{size:O,"data-element":"initials",children:b.slice(0,3).toUpperCase()})),m&&!q&&(t=e.jsx(i.StyledCustomImg,{src:m,alt:c||y||"","data-element":"user-image",onError:()=>B(!0)})),P?e.jsx(r.Tooltip,{message:P,id:k,position:S,type:v,size:x,isVisible:h,bgColor:w,fontColor:I,children:e.jsx(i.StyledPortraitContainer,a(s(a(s({},l.default(z)),{onClick:C,className:d}),E),{hasValidImg:_,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,children:t}))}):e.jsx(i.StyledPortraitContainer,a(s(a(s({},l.default(z)),{onClick:C,className:d}),E),{hasValidImg:_,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,children:t}))})()};exports.Portrait=c,exports.default=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require("react");var e=require("styled-components"),i=require("styled-system"),t=require("../icon/icon.component.js"),
|
|
1
|
+
"use strict";require("react");var e=require("styled-components"),i=require("styled-system"),t=require("../icon/icon.component.js"),o=require("../profile/profile.config.js"),r=require("../../style/themes/apply-base-theme.js"),n=require("./portrait.config.js"),s=require("./__internal__/get-colors.js");function l(e){return e&&e.__esModule?e:{default:e}}var d=l(e);const a=d.default.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-7cf94d65-0"})(["font-weight:500;font-size:",";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:e})=>o.default[e].initialSize)),c=d.default.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-7cf94d65-1"})(["height:inherit;min-width:inherit;"]),m=d.default(t.default).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-7cf94d65-2"})(["&&{color:inherit;height:inherit;min-width:inherit;::before{font-size:","px;}}"],(({size:e})=>n.PORTRAIT_SIZE_PARAMS[e].iconDimensions)),p=d.default.div.attrs(r.default).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-7cf94d65-3"})(["",";"," min-width:","px;height:","px;overflow:hidden;border-radius:",";border:1px solid var(--colorsUtilityReadOnly600);display:inline-block;"," "," .mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}"],(({darkBackground:e,backgroundColor:i,size:t,foregroundColor:o})=>s.default(i,e,!["XS","S"].includes(t),!0,o)),(({hasValidImg:e,size:i})=>e&&`max-width: ${n.PORTRAIT_SIZE_PARAMS[i].dimensions}px;`),(({size:e})=>n.PORTRAIT_SIZE_PARAMS[e].dimensions),(({size:e})=>n.PORTRAIT_SIZE_PARAMS[e].dimensions),(({shape:e})=>"square"===e?"0px":"var(--borderRadiusCircle)"),(({onClick:e})=>e&&"cursor: pointer"),i.margin);exports.StyledCustomImg=c,exports.StyledIcon=m,exports.StyledPortraitContainer=p,exports.StyledPortraitInitials=a;
|
|
@@ -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, 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, ...rest }: import("../portrait").PortraitProps) => import("react").JSX.Element, any, {}, never>;
|
|
15
15
|
export { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle, ProfileTextStyle, };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface PluginProviderProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
parentRef: HTMLElement | null;
|
|
5
|
+
}
|
|
6
|
+
export declare const PluginProvider: ({ children, parentRef, }: PluginProviderProps) => React.JSX.Element;
|
|
7
|
+
export declare const usePluginContext: () => {
|
|
8
|
+
getParentRef: () => HTMLElement | undefined;
|
|
9
|
+
};
|
|
10
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react");const t=r.createContext({getParentRef:()=>{}});exports.PluginProvider=({children:r,parentRef:n})=>e.jsx(t.Provider,{value:{getParentRef:()=>n||void 0},children:r}),exports.usePluginContext=()=>r.useContext(t);
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import MentionTypeaheadOption from "./mention-typeahead-option.class";
|
|
3
|
-
export declare const MentionsTypeaheadMenuItem: ({ index, isSelected,
|
|
3
|
+
export declare const MentionsTypeaheadMenuItem: ({ index, isSelected, onClick, onMouseEnter, option, currentQueryString, ...rest }: {
|
|
4
4
|
index: number;
|
|
5
5
|
isSelected: boolean;
|
|
6
|
-
namespace: string;
|
|
7
6
|
onClick: () => void;
|
|
8
7
|
onMouseEnter: () => void;
|
|
9
8
|
option: MentionTypeaheadOption;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("./mentions.style.js"),r=require("../../../../portrait/portrait.component.js");
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("./mentions.style.js"),r=require("../../../../portrait/portrait.component.js");function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const i=({text:t,query:r})=>{if(!r)return e.jsx("span",{children:t});const n=t.toLowerCase(),i=r.toLowerCase(),o=n.indexOf(i);if(-1===o)return e.jsx("span",{children:t});const s=t.slice(0,o),c=t.slice(o,o+r.length),l=t.slice(o+r.length);return e.jsxs("span",{className:"text",children:[s,e.jsx("strong",{children:c}),l]})},o=o=>{var{index:s,isSelected:c,onClick:l,onMouseEnter:a,option:u,currentQueryString:p}=o,y=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(o,["index","isSelected","onClick","onMouseEnter","option","currentQueryString"]);const f="item mentions-list-item"+(c?" selected":"");return e.jsxs(t.MentionsListItem,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(t){n(e,t,r[t])}))}return e}({tabIndex:-1,className:f,ref:u.setRefElement,role:"option","aria-selected":c,id:`typeahead-item-${s}`,onMouseEnter:a,onClick:l,onKeyDown:l,"aria-label":u.name},y),O=null!=(O={children:[e.jsx(r.Portrait,{initials:u.initials,src:u.src,iconType:u.iconType||"individual",size:"XS",shape:"circle"}),e.jsx(i,{text:u.name,query:p})]})?O:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(O)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(O)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(O,e))})),b),u.id);var b,O};exports.MentionsTypeaheadMenuItem=o,exports.default=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalTypeaheadMenuPlugin"),r=require("lexical"),i=require("react"),o=require("react-dom"),s=require("./constants.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/react/LexicalTypeaheadMenuPlugin"),r=require("lexical"),i=require("react"),o=require("react-dom"),s=require("./constants.js"),l=require("./helpers.js"),a=require("./mentions-typeahead-menu-item.component.js"),u=require("./mention-typeahead-option.class.js"),c=require("../../__nodes__/mention.node.js"),d=require("../../../../../hooks/__internal__/useLocale/useLocale.js"),p=require("./mentions.style.js"),m=require("../../__providers__/plugin-provider.js");function x(e){return e&&e.__esModule?e:{default:e}}var g=x(o);const _=({namespace:o,searchOptions:x})=>{const[_]=t.useLexicalComposerContext(),[f,C]=i.useState(null),M=i.useMemo((()=>f?x.filter((e=>e.name.toLowerCase().includes(f.toLowerCase()))):[]),[f,x]),h=d.default(),v=i.useMemo((()=>M.map((e=>new u.MentionTypeaheadOption(e.id,e.name,e.initials,e.iconType,e.src))).slice(0,s.SUGGESTION_LIST_LENGTH_LIMIT)),[M]),T=i.useCallback(((e,t,n)=>{_.update((()=>{const i=c.$createMentionNode(`@${e.name}`);t&&t.replace(i);const o=i.getNextSibling();if(r.$isTextNode(o)&&o.getTextContent().startsWith(" "))o.select(1,1);else{const e=r.$createTextNode(" ");i.insertAfter(e),e.select()}n()}))}),[_]);i.useEffect((()=>_.registerCommand(r.KEY_BACKSPACE_COMMAND,(()=>{const e=r.$getSelection();if(!r.$isRangeSelection(e)||!e.isCollapsed())return!1;const{anchor:t}=e,n=t.getNode();if(c.$isMentionNode(n)){const e=new r.TextNode(n.getTextContent());return n.replace(e),!0}return!1}),r.COMMAND_PRIORITY_LOW)),[_]);const{getParentRef:L}=m.usePluginContext(),j=L(),q=null==j?void 0:j.getBoundingClientRect();var y;const N=null!==(y=null==q?void 0:q.left)&&void 0!==y?y:0;var O;const b=null!==(O=null==q?void 0:q.top)&&void 0!==O?O:0;return e.jsx(n.LexicalTypeaheadMenuPlugin,{onQueryChange:C,onSelectOption:T,triggerFn:e=>l.getPossibleQueryMatch(e),options:v,parent:j,menuRenderFn:(t,{selectedIndex:n,selectOptionAndCleanUp:r,setHighlightedIndex:i})=>{const s=t.current;return s&&0!==M.length?(s.setAttribute("aria-label",h.textEditor.mentions.listAriaLabel()),g.default.createPortal(e.jsx(p.TypeaheadPopover,{className:"carbon-portal-mentions",id:`${o}-mentions-menu`,parentOffsetLeft:N,parentOffsetTop:b,children:e.jsx(p.MentionsList,{"data-role":"mention-list",id:`${o}-mention-list`,role:"group",tabIndex:0,children:v.map(((t,s)=>{var l,u;const c=null!==(u=null!==(l=t.key)&&void 0!==l?l:t.id)&&void 0!==u?u:`${o}-${s}`;return e.jsx(a.MentionsTypeaheadMenuItem,{index:s,isSelected:n===s,onClick:()=>{i(s),r(t)},onMouseEnter:()=>{i(s)},option:t,currentQueryString:null!=f?f:void 0},c)}))})}),s)):(null==s||s.removeAttribute("aria-label"),null)}})};exports.MentionsPlugin=_,exports.default=_;
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
-
export declare const TypeaheadPopover: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const TypeaheadPopover: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
parentOffsetLeft: number;
|
|
3
|
+
parentOffsetTop: number;
|
|
4
|
+
}, never>;
|
|
2
5
|
export declare const MentionsList: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
3
6
|
export declare const MentionsListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function
|
|
1
|
+
"use strict";function o(o){return o&&o.__esModule?o:{default:o}}var e=o(require("styled-components"));const r=e.default.div.withConfig({displayName:"mentions.style__TypeaheadPopover",componentId:"sc-17cb70da-0"})(["background:var(--popover-bg-default);box-shadow:var(--global-depth-lvl1);border-radius:var(--global-radius-action-m);position:relative;top:","px;left:","px;width:250px;"],(({parentOffsetTop:o})=>-o),(({parentOffsetLeft:o})=>-o)),a=e.default.ul.withConfig({displayName:"mentions.style__MentionsList",componentId:"sc-17cb70da-1"})(["padding:var(--global-space-comp-s) 0;list-style:none;margin:0;border-radius:var(--global-radius-container-m);max-height:200px;overflow-y:scroll;&::-webkit-scrollbar{display:none;}-ms-overflow-style:none;scrollbar-width:none;"]),t=e.default.li.withConfig({displayName:"mentions.style__MentionsListItem",componentId:"sc-17cb70da-2"})(['padding:var(--global-space-comp-s) var(--global-space-comp-xl);color:var(--input-dropdown-label-default);cursor:pointer;font:var(--global-font-static-comp-regular-m);display:flex;align-content:center;flex-direction:row;flex-shrink:0;background-color:var(--popover-bg-default);border-radius:0;border:0;&:hover{color:var(--popover-label-hover);border-radius:0;}}&.selected{background:var(--popover-bg-hover);color:var(--popover-label-hover);}.text{display:flex;font:var(--global-font-static-comp-regular-m);flex-grow:1;min-width:150px;margin-left:var(--global-space-comp-xs);align-items:center;margin-top:-1px;white-space:pre;}div[data-component="portrait"]{color:var(--input-dropdown-label-default);font:var(--profile-font-initials-xs);min-width:var(--profile-size-outside-xs);height:var(--profile-size-outside-xs);overflow:hidden;border-radius:var(--global-radius-container-circle);border:var(--global-borderwidth-xs) solid var(--profile-border-default);display:inline-block;[data-element="initials"],[data-component="icon"]{color:var(--input-dropdown-label-default);}}']);exports.MentionsList=a,exports.MentionsListItem=t,exports.TypeaheadPopover=r;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalComposer"),t=require("@lexical/react/LexicalClickableLinkPlugin"),n=require("@lexical/react/LexicalErrorBoundary"),i=require("@lexical/react/LexicalHistoryPlugin"),a=require("@lexical/react/LexicalMarkdownShortcutPlugin"),l=require("@lexical/react/LexicalRichTextPlugin"),o=require("@lexical/react/LexicalLinkPlugin"),s=require("@lexical/react/LexicalListPlugin"),u=require("@lexical/react/LexicalOnChangePlugin"),d=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@lexical/react/LexicalComposer"),t=require("@lexical/react/LexicalClickableLinkPlugin"),n=require("@lexical/react/LexicalErrorBoundary"),i=require("@lexical/react/LexicalHistoryPlugin"),a=require("@lexical/react/LexicalMarkdownShortcutPlugin"),l=require("@lexical/react/LexicalRichTextPlugin"),o=require("@lexical/react/LexicalLinkPlugin"),s=require("@lexical/react/LexicalListPlugin"),u=require("@lexical/react/LexicalOnChangePlugin"),d=require("./__internal__/__providers__/plugin-provider.js"),c=require("lexical"),_=require("react"),p=require("../../__internal__/label/label.component.js"),x=require("../../hooks/__internal__/useLocale/useLocale.js"),g=require("../../__internal__/utils/logger/index.js"),j=require("./__internal__/__utils__/constants.js"),f=require("./__internal__/__plugins__/AutoLinker/auto-link.component.js"),m=require("./__internal__/__plugins__/LinkMonitor/link-monitor.plugin.js"),v=require("./__internal__/__plugins__/StyledSpanEnter/styled-span-enter.plugin.js");require("./__internal__/__plugins__/useCursorAtEnd/index.js");var h=require("./text-editor.context.js"),b=require("./text-editor.style.js"),y=require("./__internal__/__utils__/helpers.js"),q=require("../../__internal__/hint-text/hint-text.component.js"),P=require("../../__internal__/validation-message/validation-message.component.js"),w=require("../textbox/textbox.style.js");require("../../style/utils/filter-styled-system-padding-props.js");var O=require("../../style/utils/filter-styled-system-margin-props.js"),E=require("../../__internal__/utils/helpers/tags/tags.js"),L=require("./__internal__/__ui__/ReadOnlyEditor/read-only-rte.component.js"),C=require("./__internal__/__utils__/theme.js"),T=require("./__internal__/__ui__/CharacterCounter/character-counter.component.js"),S=require("./__internal__/__ui__/ContentEditor/content-editor.component.js");require("./__internal__/__ui__/LinkPreviewer/link-previewer.style.js"),require("@lexical/react/LexicalComposerContext"),require("@lexical/react/LexicalTypeaheadMenuPlugin"),require("react-dom"),require("./__internal__/__ui__/Mentions/constants.js"),require("./__internal__/__ui__/Mentions/mentions.style.js"),require("../tooltip/tooltip.component.js"),require("../portrait/portrait.style.js");var k=require("./__internal__/__ui__/Placeholder/placeholder.component.js"),M=require("./__internal__/__ui__/Toolbar/toolbar.component.js");function $(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function F(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){$(e,r,t[r])}))}return e}let R=!1,H=!1,B=!1;const z=_.forwardRef((($,z)=>{var A,D,I,{characterLimit:W=3e3,error:N,footer:V,header:U,inputHint:K,labelText:X,namespace:G=j.COMPONENT_PREFIX,id:J,onBlur:Q,onCancel:Y,onChange:Z,onFocus:ee,onLinkAdded:re,onSave:te,placeholder:ne,previews:ie=[],readOnly:ae=!1,required:le=!1,rows:oe,size:se="medium",warning:ue,customPlugins:de,validationMessagePositionTop:ce=!1,toolbarControls:_e}=$,pe=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},a=Object.keys(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(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)&&(i[t]=e[t])}return i}($,["characterLimit","error","footer","header","inputHint","labelText","namespace","id","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","size","warning","customPlugins","validationMessagePositionTop","toolbarControls"]);!R&&pe.value&&(R=!0,g.default.deprecate("`value` is deprecated in TextEditor and support will soon be removed. Please use `initialValue` instead.")),!H&&Y&&(H=!0,g.default.deprecate("`onCancel` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the cancel functionality.")),!B&&te&&(B=!0,g.default.deprecate("`onSave` is deprecated in TextEditor and support will soon be removed. Please ensure that `TextEditor` is used as a part of a `Form` component, which will handle the save functionality."));const xe=_.useRef(null!==(I=null!==(D=pe.initialValue)&&void 0!==D?D:pe.value)&&void 0!==I?I:y.createEmpty()),ge=x.default(),[je,fe]=_.useState(void 0),me=_.useRef(null),[ve,he]=_.useState(null),[be,ye]=_.useState(!1);_.useImperativeHandle(z,(()=>({focus(){var e;null===(e=me.current)||void 0===e||e.focus()}})),[]),_.useEffect((()=>{const e=null==me?void 0:me.current,r=()=>{ye(!0)},t=()=>{ye(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[me]);const qe=_.useMemo((()=>({namespace:G,nodes:j.MARKDOWN_NODES,onError:e=>g.default.error(e.message),theme:C.getTheme(),editorState:xe.current,editable:!ae})),[G,ae]),Pe=_.useCallback(((e,r)=>{const t=e.read((()=>c.$getRoot().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(Z){const e=y.SerializeLexical(r);null==Z||Z(t,e)}if(W>0){const e=W-t.length;fe(e<0?ge.textEditor.characterLimit(Math.abs(e)):void 0)}}),[W,ge.textEditor,Z]),we=_.useCallback((e=>{if(!e.isEditable())return;if(!Y)return;const r=e.parseEditorState(xe.current);e.setEditorState(r),Y()}),[Y]),Oe=_.useMemo((()=>({namespace:G,onCancel:Y?we:void 0,onSave:te,toolbarControls:_e})),[we,G,Y,te,_e]),Ee=ue||je,Le=()=>{switch(se){case"large":return"var(--spacing150)";case"small":return"var(--spacing050)";default:return"var(--spacing100)"}};return e.jsx(b.StyledTextEditorWrapper,(Ce=F({"data-role":`${G}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==Q||Q(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==ee||ee(e)}},O.default(pe),E.default("text-editor",pe)),Te={children:e.jsxs(h.default.Provider,{value:{onLinkAdded:re},children:[e.jsx(p.default,{onClick:()=>{var e;return null===(e=me.current)||void 0===e?void 0:e.focus()},isRequired:le,labelId:`${G}-label`,children:X}),K&&!ae&&e.jsx(q.HintText,{id:`${G}-input-hint`,marginBottom:Le(),children:K}),e.jsx(r.LexicalComposer,{initialConfig:qe,children:e.jsxs(b.StyledWrapper,{"data-role":`${G}-wrapper`,ref:he,children:[ce&&e.jsxs(e.Fragment,{children:[e.jsx(P.default,{error:N,warning:Ee,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N||Ee)&&e.jsx(w.default,{warning:!(N||!Ee)})]}),e.jsxs(b.StyledEditorToolbarWrapper,{"data-role":`${G}-editor-toolbar-wrapper`,error:!!N,id:`${G}-editor-toolbar-wrapper`,children:[U&&e.jsx(b.StyledHeaderWrapper,{"data-role":`${G}-header-wrapper`,children:U}),ae?e.jsx(L.default,{"aria-label":X,initialValue:(null===(A=me.current)||void 0===A?void 0:A.innerHTML)||xe.current,size:se}):e.jsxs(e.Fragment,{children:[e.jsx(M.default,F({contentEditorRef:me,hasHeader:Boolean(U),size:se},Oe)),e.jsxs(b.StyledTextEditor,{"data-role":`${G}-editor`,error:!!N,children:[e.jsx(l.RichTextPlugin,{contentEditable:e.jsx(S.default,{id:J,ref:me,inputHint:K,isFocused:be,namespace:G,previews:ie,rows:oe,readOnly:ae,required:le,error:!!N,warning:!!ue||!!je,validationMessagePositionTop:ce,size:se}),placeholder:e.jsx(k.default,{namespace:G,text:ne}),ErrorBoundary:n.LexicalErrorBoundary}),e.jsx(s.ListPlugin,{}),e.jsx(i.HistoryPlugin,{}),e.jsx(a.MarkdownShortcutPlugin,{}),e.jsx(u.OnChangePlugin,{onChange:Pe,ignoreHistoryMergeTagChange:!0,ignoreSelectionChange:!0}),e.jsx(o.LinkPlugin,{validateUrl:y.validateUrl}),e.jsx(t.ClickableLinkPlugin,{newTab:!0}),e.jsx(f.default,{}),e.jsx(v.default,{}),e.jsx(d.PluginProvider,{parentRef:ve,children:de})]})]}),V&&e.jsx(b.StyledFooterWrapper,{"data-role":`${G}-footer-wrapper`,size:se,children:V}),e.jsx(m.default,{})]}),!ce&&e.jsxs(e.Fragment,{children:[e.jsx(P.default,{error:N,warning:Ee,validationId:`${G}-validation-message`,"data-role":`${G}-validation-message`,validationMessagePositionTop:ce}),(N||Ee)&&e.jsx(w.default,{warning:!(N||!Ee)})]}),W>0&&!ae&&e.jsx(T.default,{isFocused:be,maxChars:W,namespace:G,marginTop:Le()})]})})]})},Te=null!=Te?Te:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ce,Object.getOwnPropertyDescriptors(Te)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Te)).forEach((function(e){Object.defineProperty(Ce,e,Object.getOwnPropertyDescriptor(Te,e))})),Ce));var Ce,Te}));exports.TextEditor=z,exports.default=z;
|