carbon-react 159.6.0 → 159.7.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__/legacy-input/input-presentation.style.d.ts +1 -1
- package/esm/__internal__/validations/validation-icon.component.js +1 -1
- package/esm/components/advanced-color-picker/advanced-color-picker.style.js +1 -1
- package/esm/components/batch-selection/batch-selection.style.d.ts +1 -1
- package/esm/components/button/button.component.d.ts +8 -4
- package/esm/components/button/button.component.js +1 -1
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts +1 -1
- package/esm/components/help/help.component.js +1 -1
- package/esm/components/icon/icon-config.js +1 -1
- package/esm/components/icon/icon.component.d.ts +55 -10
- package/esm/components/icon/icon.component.js +1 -1
- package/esm/components/icon/icon.style.d.ts +4 -1
- package/esm/components/icon/icon.style.js +1 -1
- package/esm/components/image/image.style.d.ts +1 -1
- package/esm/components/portrait/portrait.component.js +1 -1
- package/esm/components/portrait/portrait.config.d.ts +6 -0
- package/esm/components/portrait/portrait.config.js +1 -1
- package/esm/components/portrait/portrait.style.d.ts +4 -1
- package/esm/components/portrait/portrait.style.js +1 -1
- package/esm/components/progress-tracker/progress-tracker.style.d.ts +1 -1
- package/esm/components/tabs/__next__/tabs.context.js +1 -1
- package/esm/components/tile/tile.style.d.ts +1 -1
- package/esm/components/tooltip/tooltip.style.d.ts +1 -1
- package/lib/__internal__/legacy-input/input-presentation.style.d.ts +1 -1
- package/lib/__internal__/validations/validation-icon.component.js +1 -1
- package/lib/components/advanced-color-picker/advanced-color-picker.style.js +1 -1
- package/lib/components/batch-selection/batch-selection.style.d.ts +1 -1
- package/lib/components/button/button.component.d.ts +8 -4
- package/lib/components/button/button.component.js +1 -1
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts +1 -1
- package/lib/components/help/help.component.js +1 -1
- package/lib/components/icon/icon-config.js +1 -1
- package/lib/components/icon/icon.component.d.ts +55 -10
- package/lib/components/icon/icon.component.js +1 -1
- package/lib/components/icon/icon.style.d.ts +4 -1
- package/lib/components/icon/icon.style.js +1 -1
- package/lib/components/image/image.style.d.ts +1 -1
- package/lib/components/portrait/portrait.component.js +1 -1
- package/lib/components/portrait/portrait.config.d.ts +6 -0
- package/lib/components/portrait/portrait.config.js +1 -1
- package/lib/components/portrait/portrait.style.d.ts +4 -1
- package/lib/components/portrait/portrait.style.js +1 -1
- package/lib/components/progress-tracker/progress-tracker.style.d.ts +1 -1
- package/lib/components/tile/tile.style.d.ts +1 -1
- package/lib/components/tooltip/tooltip.style.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
|
|
|
2
2
|
import { InputContextProps } from "../input-behaviour";
|
|
3
3
|
import { CarbonProviderProps } from "../../components/carbon-provider";
|
|
4
4
|
export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
|
|
5
|
-
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "
|
|
5
|
+
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "size" | "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
|
|
6
6
|
export default InputPresentationStyle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{useRef as o,useContext as r,useState as e}from"react";import n from"invariant";import i from"../utils/helpers/guid/index.js";import p from"../../components/icon/icon.component.js";import s from"./validation-icon.style.js";import{InputContext as
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{useRef as o,useContext as r,useState as e}from"react";import n from"invariant";import i from"../utils/helpers/guid/index.js";import p from"../../components/icon/icon.component.js";import{Tooltip as s}from"../../components/tooltip/tooltip.component.js";import l from"./validation-icon.style.js";import{InputContext as a}from"../input-behaviour/input-behaviour.component.js";import{InputGroupContext as c}from"../input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";import{TooltipContext as f}from"../tooltip-provider/index.js";function m(t,o,r){return o in t?Object.defineProperty(t,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[o]=r,t}const b=b=>{var{error:O,warning:y,info:d,size:g,onFocus:j,onBlur:v,iconId:h,tooltipId:P,isPartOfInput:w,tabIndex:I=-1,onClick:x,tooltipPosition:F="right",tooltipFlipOverrides:S}=b,k=function(t,o){if(null==t)return{};var r,e,n=function(t,o){if(null==t)return{};var r,e,n={},i=Object.keys(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||(n[r]=t[r]);return n}(t,o);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(e=0;e<i.length;e++)r=i[e],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(b,["error","warning","info","size","onFocus","onBlur","iconId","tooltipId","isPartOfInput","tabIndex","onClick","tooltipPosition","tooltipFlipOverrides"]);const z=o(P||i()),D=Array.isArray(S)&&S.every((t=>["bottom","left","right","top"].includes(t)));S&&n(D,'The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].');const{hasFocus:M,hasMouseOver:B}=r(a),{hasFocus:C,hasMouseOver:E}=r(c),{tooltipPosition:A}=r(f),[T,V]=e(!1),$=null!=A?A:F,L=(({error:t,warning:o,info:r})=>t?"error":o?"warning":r?"info":null)({error:O,warning:y,info:d}),q=O||y||d;return"string"==typeof q&&L?t(l,(G=function(t){for(var o=1;o<arguments.length;o++){var r=null!=arguments[o]?arguments[o]:{},e=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),e.forEach((function(o){m(t,o,r[o])}))}return t}({validationType:L,onClick:x,onMouseOver:()=>V(!0),onMouseLeave:()=>V(!1),onFocus:t=>{V(!0),j&&j(t)},onBlur:t=>{V(!1),v&&v(t)},isPartOfInput:w,"data-role":"validation-icon-wrapper"},u(k)),H=null!=(H={children:t(s,{message:q,isVisible:M||B||C||E||T,position:$,id:z.current,flipOverrides:w&&!S?["top","bottom"]:S,isPartOfInput:w,inputSize:g,children:t(p,{"aria-describedby":z.current,type:L,tabIndex:I,isPartOfInput:w,inputSize:g,id:h,focusable:-1!==I,"data-role":`icon-${L}`},`${L}-icon`)})})?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(G,Object.getOwnPropertyDescriptors(H)):function(t){var o=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);o.push.apply(o,r)}return o}(Object(H)).forEach((function(t){Object.defineProperty(G,t,Object.getOwnPropertyDescriptor(H,t))})),G)):null;var G,H};export{b as ValidationIcon,b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as
|
|
1
|
+
import o,{css as i}from"styled-components";import{margin as e}from"styled-system";export{default as StyledAdvancedColorPickerCell}from"./advanced-color-picker-cell.style.js";import{StyledColorOptions as r}from"../simple-color-picker/simple-color-picker.style.js";import{StyledSimpleColor as t}from"../simple-color-picker/simple-color/simple-color.style.js";import{StyledDialogContent as l}from"../dialog/__internal__/__next__/dialog.style.js";import{Dialog as n}from"../dialog/dialog.component.js";import a from"../simple-color-picker/simple-color/checker-board.svg";import d from"../../style/utils/visually-hidden.js";import s from"../definition-list/dl.component.js";import"../definition-list/dt/dt.component.js";import"../definition-list/dd/dd.component.js";import c from"../../style/themes/apply-base-theme.js";const p=o.div.attrs(c).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-40bdb977-0"})([""," display:inline-block;"],e),m=o(s).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-40bdb977-1"})(["",""],d),g=o.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-40bdb977-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&i(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&i(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],a))),y=o(n).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-40bdb977-3"})(['[data-component="dialog"]{max-width:fit-content;}','{padding:var(--spacing200);}[data-element="close"]{position:absolute;top:var(--spacing200);right:var(--spacing200);[data-component="icon"]{position:static;}}',"{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}",'{border:none;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l,r,t,r);export{y as DialogStyle,m as HiddenCurrentColorList,g as StyledAdvancedColorPickerPreview,p as StyledAdvancedColorPickerWrapper};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { BatchSelectionProps } from ".";
|
|
2
|
-
declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "
|
|
2
|
+
declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "hidden" | "disabled" | "colorTheme">, never>;
|
|
3
3
|
declare const StyledSelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
4
4
|
export { StyledBatchSelection, StyledSelectionCount };
|
|
@@ -42,12 +42,16 @@ export interface ButtonProps extends SpaceProps, TagProps {
|
|
|
42
42
|
href?: string;
|
|
43
43
|
/** Defines an Icon position related to the children: "before" | "after" */
|
|
44
44
|
iconPosition?: ButtonIconPosition;
|
|
45
|
-
/** [Legacy] Provides a tooltip message when the icon is hovered. */
|
|
46
|
-
iconTooltipMessage?: string;
|
|
47
|
-
/** [Legacy] Provides positioning when the tooltip is displayed. */
|
|
48
|
-
iconTooltipPosition?: TooltipPositions;
|
|
49
45
|
/** Defines an Icon type within the button */
|
|
50
46
|
iconType?: IconType;
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated [Legacy] Provides a tooltip message when the icon is hovered.
|
|
49
|
+
* */
|
|
50
|
+
iconTooltipMessage?: string;
|
|
51
|
+
/**
|
|
52
|
+
* @deprecated [Legacy] Provides positioning when the tooltip is displayed.
|
|
53
|
+
* */
|
|
54
|
+
iconTooltipPosition?: TooltipPositions;
|
|
51
55
|
/** id attribute */
|
|
52
56
|
id?: string;
|
|
53
57
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import n,{useContext as o,useState as i,useCallback as l}from"react";import a from"invariant";import c from"../icon/icon.component.js";import s,{StyledButtonMainText as b,StyledButtonSubtext as u}from"./button.style.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import d from"../button-bar/__internal__/button-bar.context.js";import f from"../split-button/__internal__/split-button.context.js";import y from"../batch-selection/__internal__/batch-selection.context.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(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){m(e,t,r[t])}))}return e}function O({iconType:n,iconPosition:o,size:i,subtext:l,children:a,disabled:s,buttonType:p}){const d={"aria-hidden":!0,disabled:s,color:"primary"===p?"--colorsActionMajorYang100":p.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},f=void 0!==a&&!1!==a;return t(r,{children:[n&&"before"===o&&f&&e(c,h({type:n},d)),f&&t("span",{children:[e(b,{"data-element":"main-text",children:a}),"large"===i&&e(u,{"data-element":"subtext","data-role":"subtext",children:l})]}),n&&!f&&e(c,h({type:n},d)),n&&"after"===o&&a&&e(c,h({type:n},d))]})}const g=n.forwardRef(((t,r)=>{var{"aria-describedby":n,"aria-label":c,"aria-labelledby":b,buttonType:u="secondary",children:m,destructive:g=!1,disabled:j=!1,isWhite:v=!1,fullWidth:P=!1,href:x,iconPosition:_="before",iconType:w,m:T=0,noWrap:k,onClick:W,px:S,rel:D,size:z="medium",subtext:C="",target:E}=t,A=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(t,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:B,size:M,iconPosition:Y,fullWidth:I}=o(d),{batchSelectionDisabled:K}=o(y),N=B||u,R=M||z,q=Y||_,F=I||P,G=j||K;a(void 0!==m||!!w,"Either prop `iconType` must be defined or this node must have children."),C&&a("large"===R,"subtext prop has no effect unless the button is large.");const[H,J]=i(null),{inSplitButton:L,onChildButtonClick:Q}=o(f);let U;switch(R){case"small":U=2;break;case"large":U=4;break;default:U=3}const V=l((e=>{J(e),r&&("object"==typeof r&&(r.current=e),"function"==typeof r&&r(e))}),[r]),X=void 0!==m&&!1!==m;return e(s,function(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}(h({"aria-label":!X&&w?c||w:c,"aria-labelledby":b,"aria-describedby":n,as:!G&&x?"a":"button",onKeyDown:x?e=>{" "===e.key&&(e.preventDefault(),null==H||H.click())}:void 0,onClick:e=>{var t;null==H||H.focus({preventScroll:!0}),L?null==Q||null===(t=Q(W))||void 0===t||t(e):W&&W(e)},draggable:!1,buttonType:N,disabled:G,destructive:g,isWhite:v,type:x?void 0:"button",iconType:w,size:R,px:null!=S?S:U,m:T,noWrap:k,iconOnly:!X&&!!w,iconPosition:q,target:E,rel:D,fullWidth:F},p("button",A),A,x&&{href:x}),{ref:V,children:O({iconType:w,iconPosition:q,size:R,subtext:C,children:m,disabled:G,buttonType:N})}))}));g.displayName="Button";export{g as default};
|
|
@@ -2,7 +2,7 @@ import { FlatTableRowHeaderProps } from "./flat-table-row-header.component";
|
|
|
2
2
|
declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, {
|
|
3
3
|
theme: object;
|
|
4
4
|
} & {
|
|
5
|
-
"data-sticky-align": "
|
|
5
|
+
"data-sticky-align": "right" | "left" | undefined;
|
|
6
6
|
} & FlatTableRowHeaderProps & {
|
|
7
7
|
expandable?: boolean;
|
|
8
8
|
leftPosition?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as r,useContext as o,useEffect as n}from"react";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"../icon/icon.component.js";import p from"./help.style.js";import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as r,useContext as o,useEffect as n}from"react";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"../icon/icon.component.js";import{Tooltip as s}from"../tooltip/tooltip.component.js";import p from"./help.style.js";import c from"../../__internal__/utils/helpers/events/events.js";import{TooltipContext as a}from"../../__internal__/tooltip-provider/index.js";import"../../style/utils/filter-styled-system-padding-props.js";import u from"../../style/utils/filter-styled-system-margin-props.js";import f from"../../__internal__/utils/helpers/guid/index.js";function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const b=b=>{var{as:m,ariaLabel:y="help",children:O,href:j,helpId:v,isFocused:h,tabIndex:g=0,tooltipBgColor:_,tooltipFontColor:P,tooltipFlipOverrides:w,tooltipId:x,tooltipPosition:I="top",type:k="help"}=b,C=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(b,["as","ariaLabel","children","href","helpId","isFocused","tabIndex","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","tooltipPosition","type"]);const F=t(f()),E=t(null),[L,S]=r(!1),{helpAriaLabel:D}=o(a);n((()=>{function e(e){var t;c.isEscKey(e)&&(null==E||null===(t=E.current)||void 0===t||t.blur(),S(!1))}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}));const B=m||j&&"a"||"div";function M(e){return()=>{S(e)}}return e(p,(A=function(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){d(e,t,r[t])}))}return e}({"aria-describedby":h||L?x||F.current:void 0,"aria-label":D||y,as:B,href:j,id:v,ref:E,onClick:()=>{var e;null==E||null===(e=E.current)||void 0===e||e.focus()},onFocus:M(!0),onBlur:M(!1),onMouseOver:M(!0),onMouseLeave:M(!1),tabIndex:g},j?{target:"_blank",rel:"noopener noreferrer"}:{role:"button"},u(C),C,i("help",C)),H=null!=(H={children:O?e(s,{message:O,isVisible:h||L,position:I,id:x||F.current,bgColor:_,fontColor:P,flipOverrides:w,children:e(l,{"aria-hidden":!0,type:k,focusable:!1})}):e(l,{"aria-hidden":!0,type:k,focusable:!1})})?H:{},Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors(H)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(H)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor(H,e))})),A));var A,H};b.displayName="Help";export{b as Help,b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const e={backgroundSize:{"extra-small":"
|
|
1
|
+
const e={backgroundSize:{"extra-small":"var(--global-size-2-xs)",small:"var(--global-size-xs)",medium:"var(--global-size-s)",large:"var(--global-size-m)","extra-large":"var(--global-size-m)"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--global-size-2-xs)",medium:"var(--global-size-xs)",large:"var(--global-size-s)","extra-large":"var(--global-size-s)"}},r=["bottom","left","right","top"],a=["circle","rounded-rect","square"],t=["small","medium","large","extra-large"],l=["small","medium","large","extra-large"],o=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"];export{o as ICONS,l as ICON_FONT_SIZES,a as ICON_SHAPES,t as ICON_SIZES,r as ICON_TOOLTIP_POSITIONS,e as default};
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
4
|
-
import { StyledIconProps } from "./icon.style";
|
|
4
|
+
import { BackgroundShape, BgSize, FontSize, StyledIconProps } from "./icon.style";
|
|
5
5
|
import { IconType } from "./icon-type";
|
|
6
6
|
import { TooltipPositions } from "../tooltip/tooltip.config";
|
|
7
7
|
export type LegacyIconTypes = "help" | "maintenance" | "new" | "success" | "messages";
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* The size of the Icon.
|
|
10
|
+
*/
|
|
11
|
+
export type IconSize = "small" | "medium" | "large";
|
|
12
|
+
export interface IconProps extends Pick<StyledIconProps, "className" | "inverse">, MarginProps, TagProps {
|
|
9
13
|
/** Set whether icon should be recognised by assistive technologies */
|
|
10
14
|
"aria-hidden"?: boolean;
|
|
11
15
|
/** Aria label for accessibility purposes */
|
|
@@ -14,22 +18,38 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
|
|
|
14
18
|
id?: string;
|
|
15
19
|
/** The ARIA role to be applied to the Icon */
|
|
16
20
|
role?: string;
|
|
17
|
-
/**
|
|
21
|
+
/**
|
|
22
|
+
* @deprecated Tooltip support has been removed from `Icon` and the use of tooltips
|
|
23
|
+
* is discouraged. This prop no longer has any effect.
|
|
24
|
+
*/
|
|
18
25
|
tooltipMessage?: React.ReactNode;
|
|
19
|
-
/**
|
|
26
|
+
/** @deprecated */
|
|
20
27
|
tooltipPosition?: TooltipPositions;
|
|
21
|
-
/**
|
|
28
|
+
/** @deprecated */
|
|
22
29
|
tooltipVisible?: boolean;
|
|
23
|
-
/**
|
|
30
|
+
/** @deprecated */
|
|
24
31
|
tooltipBgColor?: string;
|
|
25
|
-
/**
|
|
32
|
+
/** @deprecated */
|
|
26
33
|
tooltipFontColor?: string;
|
|
27
|
-
/**
|
|
34
|
+
/** @deprecated */
|
|
28
35
|
tooltipFlipOverrides?: TooltipPositions[];
|
|
29
|
-
/**
|
|
36
|
+
/** @deprecated */
|
|
30
37
|
tooltipId?: string;
|
|
31
38
|
/**
|
|
32
|
-
* Icon type
|
|
39
|
+
* Icon type.
|
|
40
|
+
*
|
|
41
|
+
* Icons use a `snake_case` naming convention and are organised into the following categories:
|
|
42
|
+
*
|
|
43
|
+
* - **Navigation** — `arrow_*`, `chevron_*`, `caret_*`, `caret_large_*`
|
|
44
|
+
* - **Actions** — `add`, `bin`, `close`, `copy`, `create`, `delete`, `drag`, `download`,
|
|
45
|
+
* `edit`, `export`, `filter`, `link`, `search`, `settings`, `upload`, and more.
|
|
46
|
+
* - **Status** — `alert`, `blocked`, `double_tick`, `error`, `error_square`, `info`,
|
|
47
|
+
* `tick`, `warning`, and more.
|
|
48
|
+
* - **Communication** — `call`, `chat`, `email`, `fax`, `message`, and more.
|
|
49
|
+
* - **Finance** — `bank`, `cash`, `coins`, `credit_card`, `euro`, `receipt`, and more.
|
|
50
|
+
* - **Social / App** — `app_facebook`, `app_instagram`, `app_tiktok`, `app_twitter`, `app_youtube`.
|
|
51
|
+
* - **Documents & Files** — `attach`, `document_*`, `file_*`, and more.
|
|
52
|
+
* - **Charts** — `chart_bar`, `chart_bar_arrow_up`, `chart_line`, `chart_pie`.
|
|
33
53
|
*
|
|
34
54
|
* The full list of types can be seen [here](https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons).
|
|
35
55
|
*/
|
|
@@ -42,6 +62,31 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
|
|
|
42
62
|
inputSize?: "small" | "medium" | "large";
|
|
43
63
|
/** @ignore @private */
|
|
44
64
|
tabIndex?: number;
|
|
65
|
+
/**
|
|
66
|
+
* Size of the Icon.
|
|
67
|
+
*
|
|
68
|
+
* - `small` — 24px (default)
|
|
69
|
+
* - `medium` — 32px
|
|
70
|
+
* - `large` — 40px
|
|
71
|
+
*/
|
|
72
|
+
size?: IconSize;
|
|
73
|
+
/** Renders the Icon in a light colour, suitable for use on dark backgrounds. */
|
|
74
|
+
inverse?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* @deprecated Use the `size` prop instead. The `extra-large` value is no longer
|
|
77
|
+
* supported and will be mapped to `large`.
|
|
78
|
+
*/
|
|
79
|
+
fontSize?: FontSize;
|
|
80
|
+
/** @deprecated Use CSS or a wrapper element to apply a background colour. */
|
|
81
|
+
bg?: string;
|
|
82
|
+
/** @deprecated Use CSS or a wrapper element to apply a background shape. */
|
|
83
|
+
bgShape?: BackgroundShape;
|
|
84
|
+
/** @deprecated Use CSS or a wrapper element to control background size. */
|
|
85
|
+
bgSize?: BgSize;
|
|
86
|
+
/** @deprecated Use CSS or a wrapper element to control icon colour. */
|
|
87
|
+
color?: string;
|
|
88
|
+
/** @deprecated Applies disabled styling to the icon. */
|
|
89
|
+
disabled?: boolean;
|
|
45
90
|
}
|
|
46
91
|
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
|
|
47
92
|
export default Icon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t,{useMemo as r}from"react";import o from"../../__internal__/utils/logger/index.js";import"../../style/utils/filter-styled-system-padding-props.js";import i from"../../style/utils/filter-styled-system-margin-props.js";import n from"./icon.style.js";function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(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){a(e,t,r[t])}))}return e}const s=t.forwardRef(((t,a)=>{var{"aria-hidden":s,ariaLabel:p,bg:c,bgShape:u,bgSize:d,className:b,color:f,"data-element":m,"data-role":g,disabled:y,focusable:O,fontSize:S,id:h,inputSize:j,isPartOfInput:v,inverse:z,size:w="small",tabIndex:x,tooltipMessage:I,tooltipPosition:P,tooltipVisible:C,tooltipBgColor:F,tooltipFontColor:N,tooltipFlipOverrides:_,tooltipId:k,type:B,role:E}=t,L=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(t,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","inverse","size","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const M=r((()=>{switch(B){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return B}}),[B]),V=r((()=>S?"extra-large"===S?(o.warn('[Icon] The `fontSize` value "extra-large" is no longer supported and has been mapped to "large".'),"large"):S:w),[S,w]),q=l({"aria-hidden":s,"aria-label":p,bg:c,bgSize:d||V,bgShape:u,className:b||void 0,color:f,"data-component":"icon","data-element":null!=m?m:M,"data-role":null!=g?g:"icon",disabled:y,fontSize:V,id:h,inverse:z,ref:a,role:E,tabIndex:x,type:M},i(L));return e(n,l({},q))}));s.displayName="Icon";export{s as default};
|
|
@@ -28,10 +28,13 @@ export interface StyledIconProps {
|
|
|
28
28
|
* The full list of types can be seen [here](https://github.com/Sage/carbon/blob/master/src/components/icon/icon-config.js).
|
|
29
29
|
*/
|
|
30
30
|
type: IconType;
|
|
31
|
+
/**
|
|
32
|
+
* Renders the Icon using the inverse colour token, suitable for use on dark backgrounds.
|
|
33
|
+
*/
|
|
34
|
+
inverse?: boolean;
|
|
31
35
|
}
|
|
32
36
|
export interface StyledIconInternalProps {
|
|
33
37
|
isInteractive?: boolean;
|
|
34
|
-
hasTooltip?: boolean;
|
|
35
38
|
theme?: ThemeObject;
|
|
36
39
|
}
|
|
37
40
|
declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import o,{css as
|
|
1
|
+
import o,{css as t}from"styled-components";import{margin as e}from"styled-system";import r from"../../style/themes/apply-base-theme.js";import i from"../../style/utils/add-focus-styling.js";import n from"../../style/utils/color.js";import{getWindow as s,getNavigator as l}from"../../__internal__/dom/globals.js";import c,{isSafari as a}from"../../__internal__/utils/helpers/browser-type-check/index.js";import m from"./icon-config.js";import d from"./icon-unicodes.js";import{StyledButton as f}from"../button/__next__/button.style.js";const p=t([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}"],f),g=o.span.attrs(r).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-88df3881-0"})(["",""],(({theme:o,color:r,bg:f,isInteractive:g,bgSize:h,bgShape:b,type:u,fontSize:y,disabled:v,tabIndex:_,inverse:j})=>{let k=j?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",x="transparent";const S=s(),z=l(),w=h?m.backgroundSize[h]:void 0;if(v)k="var(--colorsYin030)";else if(r){const{color:t}=n({color:r,theme:o});k=t}if(f){const{backgroundColor:t}=n({bg:f,theme:o});x=t}return t(["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;}"," "," ",""],k,x,w,w,b?`border-radius: ${m.backgroundShape[b]}`:"",g&&t(["&:not(:focus):hover{filter:brightness(0.9);}"]),d[u],y&&t(["font-size:",";line-height:",";"],m.iconSize[y],m.iconSize[y]),S&&"services"===u&&c(S)&&t(["margin-top:",";"],"small"===y?"-7px":"-8px"),z&&S&&"services"===u&&a(z)&&!c(S)&&t(["margin-top:-6px;"]),void 0!==_&&`\n :focus {\n ${i()}\n }\n `,e,p)}));export{g as default};
|
|
@@ -38,5 +38,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
|
|
|
38
38
|
backgroundPosition: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
|
|
39
39
|
backgroundRepeat: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
|
|
40
40
|
backgroundSize: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
|
|
41
|
-
} & StyledImageProps, "
|
|
41
|
+
} & StyledImageProps, "position" | "top" | "right" | "bottom" | "left" | "hidden" | "theme" | "children" | "as" | "src" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
|
|
42
42
|
export { StyledImage };
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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,$portraitSize:h});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,3 +1,9 @@
|
|
|
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 i=["circle","square"],n=["XS","S","M","ML","L","XL","XXL"],s={XS:{dimensions:32,iconDimensions:16},S:{dimensions:32,iconDimensions:20},M:{dimensions:40,iconDimensions:24},ML:{dimensions:56,iconDimensions:32},L:{dimensions:72,iconDimensions:40},XL:{dimensions:104,iconDimensions:56},XXL:{dimensions:128,iconDimensions:64}};export{i as PORTRAIT_SHAPES,n as PORTRAIT_SIZES,s as PORTRAIT_SIZE_PARAMS};
|
|
@@ -13,7 +13,10 @@ type StyledPortraitProps = {
|
|
|
13
13
|
};
|
|
14
14
|
export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size" | "variant">, never>;
|
|
15
15
|
export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
|
|
16
|
-
export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any,
|
|
16
|
+
export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, {
|
|
17
|
+
$portraitSize: PortraitSizes;
|
|
18
|
+
variant?: PortraitVariant;
|
|
19
|
+
}, never>;
|
|
17
20
|
export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {
|
|
18
21
|
theme: object;
|
|
19
22
|
} & StyledPortraitProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"react";import t from"styled-components";import{margin as
|
|
1
|
+
import"react";import t from"styled-components";import{margin as i}from"styled-system";import o from"../icon/icon.component.js";import e 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-67607789-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-67607789-1"})(["height:inherit;min-width:inherit;"]),p=t(o).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-67607789-2"})(["&&{color:",";height:",";min-width:",";::before{font-size:",";}}"],(({variant:t})=>s(t).color),(({$portraitSize:t})=>l(t).height),(({$portraitSize:t})=>l(t).width),(({$portraitSize:t})=>a(t))),h=t.div.attrs(e).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-67607789-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:i,size:o,foregroundColor:e,variant:n})=>!n&&r(i,t,!["XS","S"].includes(o),!0,e)),(({hasValidImg:t,size:i})=>t&&`max-width: ${l(i).width};`),(({size:t})=>l(t).width),(({size:t})=>l(t).height),(({shape:t,size:i})=>d(t,i)),(({onClick:t})=>t&&"cursor: pointer"),i);export{c as StyledCustomImg,p as StyledIcon,h as StyledPortraitContainer,m as StyledPortraitInitials};
|
|
@@ -8,5 +8,5 @@ declare const StyledProgressBar: import("styled-components").StyledComponent<"sp
|
|
|
8
8
|
declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
9
9
|
declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
10
10
|
declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "size" | "labelWidth" | "labelsPosition">, never>;
|
|
11
|
-
declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "
|
|
11
|
+
declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "size" | "error" | "progress">>, never>;
|
|
12
12
|
export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{createContext as r,useState as t,useCallback as n,useEffect as o,useContext as s}from"react";import i from"../../../hooks/__internal__/usePrevious/index.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}function c(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){a(e,r,t[r])}))}return e}const b=r({activeTab:"",currentTabId:"",focusIndex:"",isInTab:!1,labelledBy:"",orientation:"horizontal",selectedTabId:"",setActiveTab:()=>{},setFocusIndex:()=>{},setCurrentTabId:()=>{},setErrors:()=>{},setWarnings:()=>{},size:"medium",errors:{},warnings:{},infos:{},setInfos:()=>{}}),l=()=>s(b),u=({children:r,isInTab:s=!0,labelledBy:a,orientation:l,selectedTabId:u="",size:d})=>{const[f,I]=t(u),[m,T]=t(u),[y,p]=t(""),[v,g]=t({}),[O,j]=t({}),[x,h]=t({}),w=n(((e,r,t)=>{const n={[r]:{[e]:t}};g((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),P=n(((e,r,t)=>{const n={[r]:{[e]:t}};j((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),z=n(((e,r,t)=>{const n={[r]:{[e]:t}};h((o=>(o[r]||(o[r]={}),o[r][e]!==t?c({},o,n):o)))}),[]),_=i(u);return o((()=>{u&&u!==_&&(I(u),T(u))}),[u,_]),e(b.Provider,{value:{activeTab:f,currentTabId:m,focusIndex:y,isInTab:s,labelledBy:a,orientation:l,setActiveTab:I,setCurrentTabId:T,setFocusIndex:p,setErrors:w,setWarnings:P,size:d,errors:v,warnings:O,infos:x,setInfos:z},children:r})};export{b as TabsContext,u as TabsProvider,l as useTabs};
|
|
@@ -2,7 +2,7 @@ import { SpaceProps } from "styled-system";
|
|
|
2
2
|
import { TileProps } from "./tile.component";
|
|
3
3
|
declare const StyledTile: import("styled-components").StyledComponent<"div", any, {
|
|
4
4
|
theme: object;
|
|
5
|
-
} & Pick<TileProps, "
|
|
5
|
+
} & Pick<TileProps, "width" | "height" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
|
|
6
6
|
isHorizontal?: boolean;
|
|
7
7
|
} & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "theme">;
|
|
8
8
|
export default StyledTile;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TooltipProps } from "./tooltip.component";
|
|
2
2
|
declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
|
|
3
3
|
theme: object;
|
|
4
|
-
} & Pick<TooltipProps, "
|
|
4
|
+
} & Pick<TooltipProps, "size" | "type" | "bgColor" | "fontColor">, "theme">;
|
|
5
5
|
export default StyledTooltip;
|
|
@@ -2,5 +2,5 @@ import { CommonInputPresentationProps } from "./input-presentation.component";
|
|
|
2
2
|
import { InputContextProps } from "../input-behaviour";
|
|
3
3
|
import { CarbonProviderProps } from "../../components/carbon-provider";
|
|
4
4
|
export declare const StyledInputPresentationContainer: import("styled-components").StyledComponent<"div", any, Pick<CommonInputPresentationProps, "maxWidth" | "inputWidth">, never>;
|
|
5
|
-
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "
|
|
5
|
+
declare const InputPresentationStyle: import("styled-components").StyledComponent<"div", any, Pick<InputContextProps, "hasFocus"> & Pick<CommonInputPresentationProps, "size" | "disabled" | "error" | "info" | "warning" | "align" | "readOnly" | "borderRadius" | "hasIcon" | "hideBorders"> & Pick<CarbonProviderProps, "validationRedesignOptIn">, never>;
|
|
6
6
|
export default InputPresentationStyle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),o=require("../utils/helpers/guid/index.js"),n=require("../../components/icon/icon.component.js"),i=require("./validation-icon.style.js"),u=require("../input-behaviour/input-behaviour.component.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),o=require("../utils/helpers/guid/index.js"),n=require("../../components/icon/icon.component.js"),i=require("../../components/tooltip/tooltip.component.js"),s=require("./validation-icon.style.js"),u=require("../input-behaviour/input-behaviour.component.js"),l=require("../input-behaviour/input-group-behaviour.component.js");require("../../style/utils/filter-styled-system-padding-props.js");var p=require("../../style/utils/filter-styled-system-margin-props.js"),a=require("../tooltip-provider/index.js");function c(e){return e&&e.__esModule?e:{default:e}}var f=c(r);function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const b=r=>{var{error:c,warning:b,info:O,size:y,onFocus:j,onBlur:v,iconId:g,tooltipId:m,isPartOfInput:P,tabIndex:h=-1,onClick:x,tooltipPosition:w="right",tooltipFlipOverrides:I}=r,q=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,["error","warning","info","size","onFocus","onBlur","iconId","tooltipId","isPartOfInput","tabIndex","onClick","tooltipPosition","tooltipFlipOverrides"]);const C=t.useRef(m||o.default()),S=Array.isArray(I)&&I.every((e=>["bottom","left","right","top"].includes(e)));I&&f.default(S,'The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].');const{hasFocus:F,hasMouseOver:k}=t.useContext(u.InputContext),{hasFocus:M,hasMouseOver:z}=t.useContext(l.InputGroupContext),{tooltipPosition:D}=t.useContext(a.TooltipContext),[T,_]=t.useState(!1),B=null!=D?D:w,E=(({error:e,warning:t,info:r})=>e?"error":t?"warning":r?"info":null)({error:c,warning:b,info:O}),V=c||b||O;return"string"==typeof V&&E?e.jsx(s.default,(A=function(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){d(e,t,r[t])}))}return e}({validationType:E,onClick:x,onMouseOver:()=>_(!0),onMouseLeave:()=>_(!1),onFocus:e=>{_(!0),j&&j(e)},onBlur:e=>{_(!1),v&&v(e)},isPartOfInput:P,"data-role":"validation-icon-wrapper"},p.default(q)),$=null!=($={children:e.jsx(i.Tooltip,{message:V,isVisible:F||k||M||z||T,position:B,id:C.current,flipOverrides:P&&!I?["top","bottom"]:I,isPartOfInput:P,inputSize:y,children:e.jsx(n.default,{"aria-describedby":C.current,type:E,tabIndex:h,isPartOfInput:P,inputSize:y,id:g,focusable:-1!==h,"data-role":`icon-${E}`},`${E}-icon`)})})?$:{},Object.getOwnPropertyDescriptors?Object.defineProperties(A,Object.getOwnPropertyDescriptors($)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object($)).forEach((function(e){Object.defineProperty(A,e,Object.getOwnPropertyDescriptor($,e))})),A)):null;var A,$};exports.ValidationIcon=b,exports.default=b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("styled-components"),
|
|
1
|
+
"use strict";var e=require("styled-components"),o=require("styled-system"),r=require("./advanced-color-picker-cell.style.js"),i=require("../simple-color-picker/simple-color-picker.style.js"),t=require("../simple-color-picker/simple-color/simple-color.style.js"),l=require("../dialog/__internal__/__next__/dialog.style.js"),d=require("../dialog/dialog.component.js"),a=require("../simple-color-picker/simple-color/checker-board.svg"),n=require("../../style/utils/visually-hidden.js"),s=require("../definition-list/dl.component.js");require("../definition-list/dt/dt.component.js"),require("../definition-list/dd/dd.component.js");var c=require("../../style/themes/apply-base-theme.js");function p(e){return e&&e.__esModule?e:{default:e}}var u=p(e),m=p(a);const y=u.default.div.attrs(c.default).withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerWrapper",componentId:"sc-40bdb977-0"})([""," display:inline-block;"],o.margin),g=u.default(s.default).withConfig({displayName:"advanced-color-picker.style__HiddenCurrentColorList",componentId:"sc-40bdb977-1"})(["",""],n.default),v=u.default.div.withConfig({displayName:"advanced-color-picker.style__StyledAdvancedColorPickerPreview",componentId:"sc-40bdb977-2"})(["width:25px;height:25px;margin-bottom:15px;border:1px solid var(--colorsUtilityYin090);border-radius:var(--borderRadius050);"," "," &:hover{cursor:initial;}"],(({color:o})=>"transparent"!==o&&e.css(["background-color:",";"],o)),(({color:o})=>"transparent"===o&&e.css(['background-color:#eeeeee;background-image:url("','");background-size:10px 10px;'],m.default))),b=u.default(d.Dialog).withConfig({displayName:"advanced-color-picker.style__DialogStyle",componentId:"sc-40bdb977-3"})(['[data-component="dialog"]{max-width:fit-content;}','{padding:var(--spacing200);}[data-element="close"]{position:absolute;top:var(--spacing200);right:var(--spacing200);[data-component="icon"]{position:static;}}',"{max-width:285px;","{border:1px solid var(--colorsUtilityYin090);margin-right:-1px;margin-bottom:-1px;transition:all 0.2s ease;&:hover{transform:scale(1.1);}}}",'{border:none;}[data-component="icon"]{color:var(--colorsActionMinor500);}'],l.StyledDialogContent,i.StyledColorOptions,t.StyledSimpleColor,i.StyledColorOptions);exports.StyledAdvancedColorPickerCell=r.default,exports.DialogStyle=b,exports.HiddenCurrentColorList=g,exports.StyledAdvancedColorPickerPreview=v,exports.StyledAdvancedColorPickerWrapper=y;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { BatchSelectionProps } from ".";
|
|
2
|
-
declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "
|
|
2
|
+
declare const StyledBatchSelection: import("styled-components").StyledComponent<"div", any, Pick<BatchSelectionProps, "hidden" | "disabled" | "colorTheme">, never>;
|
|
3
3
|
declare const StyledSelectionCount: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
4
4
|
export { StyledBatchSelection, StyledSelectionCount };
|
|
@@ -42,12 +42,16 @@ export interface ButtonProps extends SpaceProps, TagProps {
|
|
|
42
42
|
href?: string;
|
|
43
43
|
/** Defines an Icon position related to the children: "before" | "after" */
|
|
44
44
|
iconPosition?: ButtonIconPosition;
|
|
45
|
-
/** [Legacy] Provides a tooltip message when the icon is hovered. */
|
|
46
|
-
iconTooltipMessage?: string;
|
|
47
|
-
/** [Legacy] Provides positioning when the tooltip is displayed. */
|
|
48
|
-
iconTooltipPosition?: TooltipPositions;
|
|
49
45
|
/** Defines an Icon type within the button */
|
|
50
46
|
iconType?: IconType;
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated [Legacy] Provides a tooltip message when the icon is hovered.
|
|
49
|
+
* */
|
|
50
|
+
iconTooltipMessage?: string;
|
|
51
|
+
/**
|
|
52
|
+
* @deprecated [Legacy] Provides positioning when the tooltip is displayed.
|
|
53
|
+
* */
|
|
54
|
+
iconTooltipPosition?: TooltipPositions;
|
|
51
55
|
/** id attribute */
|
|
52
56
|
id?: string;
|
|
53
57
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),n=require("../icon/icon.component.js"),i=require("./button.style.js"),o=require("../../__internal__/utils/helpers/tags/tags.js"),l=require("../button-bar/__internal__/button-bar.context.js"),a=require("../split-button/__internal__/split-button.context.js"),u=require("../batch-selection/__internal__/batch-selection.context.js");function s(e){return e&&e.__esModule?e:{default:e}}var c=s(t),b=s(r);function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){d(e,t,r[t])}))}return e}function f({iconType:t,iconPosition:r,size:o,subtext:l,children:a,disabled:u,buttonType:s}){const c={"aria-hidden":!0,disabled:u,color:"primary"===s?"--colorsActionMajorYang100":s.includes("gradient")?"--colorsActionMinorYin090":"--colorsActionMajor500",bg:"transparent"},b=void 0!==a&&!1!==a;return e.jsxs(e.Fragment,{children:[t&&"before"===r&&b&&e.jsx(n.default,p({type:t},c)),b&&e.jsxs("span",{children:[e.jsx(i.StyledButtonMainText,{"data-element":"main-text",children:a}),"large"===o&&e.jsx(i.StyledButtonSubtext,{"data-element":"subtext","data-role":"subtext",children:l})]}),t&&!b&&e.jsx(n.default,p({type:t},c)),t&&"after"===r&&a&&e.jsx(n.default,p({type:t},c))]})}const y=c.default.forwardRef(((r,n)=>{var{"aria-describedby":s,"aria-label":c,"aria-labelledby":d,buttonType:y="secondary",children:h,destructive:j=!1,disabled:x=!1,isWhite:O=!1,fullWidth:g=!1,href:v,iconPosition:m="before",iconType:P,m:_=0,noWrap:w,onClick:S,px:T,rel:k,size:W="medium",subtext:q="",target:C}=r,D=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}(r,["aria-describedby","aria-label","aria-labelledby","buttonType","children","destructive","disabled","isWhite","fullWidth","href","iconPosition","iconType","m","noWrap","onClick","px","rel","size","subtext","target"]);const{buttonType:z,size:M,iconPosition:B,fullWidth:E}=t.useContext(l.default),{batchSelectionDisabled:A}=t.useContext(u.default),Y=z||y,F=M||W,I=B||m,K=E||g,N=x||A;b.default(void 0!==h||!!P,"Either prop `iconType` must be defined or this node must have children."),q&&b.default("large"===F,"subtext prop has no effect unless the button is large.");const[R,G]=t.useState(null),{inSplitButton:H,onChildButtonClick:J}=t.useContext(a.default);let L;switch(F){case"small":L=2;break;case"large":L=4;break;default:L=3}const Q=t.useCallback((e=>{G(e),n&&("object"==typeof n&&(n.current=e),"function"==typeof n&&n(e))}),[n]),U=void 0!==h&&!1!==h;return e.jsx(i.default,function(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}(p({"aria-label":!U&&P?c||P:c,"aria-labelledby":d,"aria-describedby":s,as:!N&&v?"a":"button",onKeyDown:v?e=>{" "===e.key&&(e.preventDefault(),null==R||R.click())}:void 0,onClick:e=>{var t;null==R||R.focus({preventScroll:!0}),H?null==J||null===(t=J(S))||void 0===t||t(e):S&&S(e)},draggable:!1,buttonType:Y,disabled:N,destructive:j,isWhite:O,type:v?void 0:"button",iconType:P,size:F,px:null!=T?T:L,m:_,noWrap:w,iconOnly:!U&&!!P,iconPosition:I,target:C,rel:k,fullWidth:K},o.default("button",D),D,v&&{href:v}),{ref:Q,children:f({iconType:P,iconPosition:I,size:F,subtext:q,children:h,disabled:N,buttonType:Y})}))}));y.displayName="Button",exports.default=y;
|
|
@@ -2,7 +2,7 @@ import { FlatTableRowHeaderProps } from "./flat-table-row-header.component";
|
|
|
2
2
|
declare const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, {
|
|
3
3
|
theme: object;
|
|
4
4
|
} & {
|
|
5
|
-
"data-sticky-align": "
|
|
5
|
+
"data-sticky-align": "right" | "left" | undefined;
|
|
6
6
|
} & FlatTableRowHeaderProps & {
|
|
7
7
|
expandable?: boolean;
|
|
8
8
|
leftPosition?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),o=require("../icon/icon.component.js"),n=require("./help.style.js"),l=require("../../__internal__/utils/helpers/events/events.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),o=require("../icon/icon.component.js"),n=require("../tooltip/tooltip.component.js"),i=require("./help.style.js"),l=require("../../__internal__/utils/helpers/events/events.js"),s=require("../../__internal__/tooltip-provider/index.js");require("../../style/utils/filter-styled-system-padding-props.js");var u=require("../../style/utils/filter-styled-system-margin-props.js"),a=require("../../__internal__/utils/helpers/guid/index.js");function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const c=c=>{var{as:d,ariaLabel:f="help",children:b,href:y,helpId:O,isFocused:j,tabIndex:v=0,tooltipBgColor:h,tooltipFontColor:g,tooltipFlipOverrides:m,tooltipId:_,tooltipPosition:x="top",type:P="help"}=c,w=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(c,["as","ariaLabel","children","href","helpId","isFocused","tabIndex","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","tooltipPosition","type"]);const q=t.useRef(a.default()),C=t.useRef(null),[I,k]=t.useState(!1),{helpAriaLabel:E}=t.useContext(s.TooltipContext);t.useEffect((()=>{function e(e){var t;l.default.isEscKey(e)&&(null==C||null===(t=C.current)||void 0===t||t.blur(),k(!1))}return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}));const F=d||y&&"a"||"div";function S(e){return()=>{k(e)}}return e.jsx(i.default,(L=function(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){p(e,t,r[t])}))}return e}({"aria-describedby":j||I?_||q.current:void 0,"aria-label":E||f,as:F,href:y,id:O,ref:C,onClick:()=>{var e;null==C||null===(e=C.current)||void 0===e||e.focus()},onFocus:S(!0),onBlur:S(!1),onMouseOver:S(!0),onMouseLeave:S(!1),tabIndex:v},y?{target:"_blank",rel:"noopener noreferrer"}:{role:"button"},u.default(w),w,r.default("help",w)),D=null!=(D={children:b?e.jsx(n.Tooltip,{message:b,isVisible:j||I,position:x,id:_||q.current,bgColor:h,fontColor:g,flipOverrides:m,children:e.jsx(o.default,{"aria-hidden":!0,type:P,focusable:!1})}):e.jsx(o.default,{"aria-hidden":!0,type:P,focusable:!1})})?D:{},Object.getOwnPropertyDescriptors?Object.defineProperties(L,Object.getOwnPropertyDescriptors(D)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(D)).forEach((function(e){Object.defineProperty(L,e,Object.getOwnPropertyDescriptor(D,e))})),L));var L,D};c.displayName="Help",exports.Help=c,exports.default=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ICONS=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"],exports.ICON_FONT_SIZES=["small","medium","large","extra-large"],exports.ICON_SHAPES=["circle","rounded-rect","square"],exports.ICON_SIZES=["small","medium","large","extra-large"],exports.ICON_TOOLTIP_POSITIONS=["bottom","left","right","top"],exports.default={backgroundSize:{"extra-small":"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ICONS=["accessibility_web","add","admin","airplay","alert","alert_on","analysis","app_facebook","app_instagram","app_tiktok","app_twitter","app_youtube","apps","arrow","arrow_bottom_right_circle","arrow_down","arrow_left","arrow_left_boxed","arrow_left_right_small","arrow_left_small","arrow_right","arrow_right_small","arrow_top_left_circle","arrow_top_right_circle","arrow_up","arrows_left_right","at_sign","attach","bank","bank_with_card","basket","basket_with_squares","batch","bed","bill_paid","bill_unpaid","bin","biometric","blocked","blocked_square","block_arrow_right","bold","box_arrow_left","box_arrow_right","boxed_shapes","bulk_destroy","bullet_list","bullet_list_dotted","bullet_list_numbers","business","calendar","calendar_today","call","calendar_pay_date","camera","car_lock","car_money","car_repair","card_view","card_wallet","caret_down","caret_left","caret_right","caret_up","caret_up_down","caret_large_down","caret_large_left","caret_large_right","caret_large_up","cart","cash","chat","chart_bar","chart_bar_arrow_up","chart_line","chart_pie","chat_notes","check_all","check_none","chevron_down","chevron_first","chevron_first_pagination","chevron_last","chevron_last_pagination","chevron_left","chevron_right","chevron_up","chevron_down_thick","chevron_left_thick","chevron_right_thick","chevron_up_thick","chromecast","circle_with_dots","circles_connection","clear","clock","close","code","cloud_co2","coins","collaborate","computer_clock","connect","connect_circle","connect_off","construction","contacts","contact_card","copy","create","credit_card","credit_card_slash","cross","cross_circle","csv","dashboard","delete","delivery","diagonal_arrows_up","disconnect","disputed","document_right_align","document_tick","document_vertical_lines","download","double_tick","drag","drag_hover","drag_vertical","draft","drill","dropdown","duplicate","edit","edited","email","email_switch","entry","ellipsis_horizontal","ellipsis_vertical","envelope_dollar","envelope_euro","error","error_square","euro","expand","export","factory","favourite","favourite_lined","fax","feedback","file_excel","file_generic","file_image","file_pdf","file_word","files_leaning","filter","filter_new","fit_height","fit_width","flag","flash","folder","form_refresh","framerate","fullscreen","gift","get_quote","go","graduation_hat","graph","grid","heart","heart_pulse","help","hide","hierarchy","hand_cash_coins","hand_cash_note","home","image","import","in_progress","in_transit","individual","info","intranet","ipad","italic","job_seeked","key","laptop","leaf","ledger","ledger_arrow_left","ledger_arrow_right","lightbulb_off","lightbulb_on","like","like_no","link","link_card","link_cloud","link_on","list_view","locked","location","login","logout","lookup","marker","message","microphone","minimise","minus","minus_large","mobile","money_bag","mute","none","normalscreen","old_warning","page","palm_tree","pause","pause_circle","petrol_pump","pdf","pin","people","people_switch","percentage_boxed","person","person_info","person_tick","phone","picture_in_picture","piggy_bank","placeholder","plane","play","play_circle","plus","plus_circle","plus_large","pound","print","progress","progressed","protect","question","question_hollow","question_mark","recruiting","refresh","refresh_clock","remove","replay","reset","sage_coin","save","scan","search","send","services","settings","settings_old","share","shield_with_tick","shield_with_tick_outline","shop","sort_down","sort_up","source_code","spanner","speaker","split","split_container","squares_nine","stacked_boxes","stacked_squares","stop","stop_circle","submitted","subtitles","support_online","sync","tag","talk","target","target_man","theatre_masks","three_boxes","tick","tick_circle","tick_thick","time_zone","true_tick","u_turn_left","u_turn_right","underline","undo","unlocked","upload","uploaded","user_groups","video","view","volume_high","volume_low","volume_medium","volunteering","warning","website","welfare","worldwide_location"],exports.ICON_FONT_SIZES=["small","medium","large","extra-large"],exports.ICON_SHAPES=["circle","rounded-rect","square"],exports.ICON_SIZES=["small","medium","large","extra-large"],exports.ICON_TOOLTIP_POSITIONS=["bottom","left","right","top"],exports.default={backgroundSize:{"extra-small":"var(--global-size-2-xs)",small:"var(--global-size-xs)",medium:"var(--global-size-s)",large:"var(--global-size-m)","extra-large":"var(--global-size-m)"},backgroundShape:{square:"0%","rounded-rect":"20%",circle:"50%"},iconSize:{small:"var(--global-size-2-xs)",medium:"var(--global-size-xs)",large:"var(--global-size-s)","extra-large":"var(--global-size-s)"}};
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarginProps } from "styled-system";
|
|
3
3
|
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
|
|
4
|
-
import { StyledIconProps } from "./icon.style";
|
|
4
|
+
import { BackgroundShape, BgSize, FontSize, StyledIconProps } from "./icon.style";
|
|
5
5
|
import { IconType } from "./icon-type";
|
|
6
6
|
import { TooltipPositions } from "../tooltip/tooltip.config";
|
|
7
7
|
export type LegacyIconTypes = "help" | "maintenance" | "new" | "success" | "messages";
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* The size of the Icon.
|
|
10
|
+
*/
|
|
11
|
+
export type IconSize = "small" | "medium" | "large";
|
|
12
|
+
export interface IconProps extends Pick<StyledIconProps, "className" | "inverse">, MarginProps, TagProps {
|
|
9
13
|
/** Set whether icon should be recognised by assistive technologies */
|
|
10
14
|
"aria-hidden"?: boolean;
|
|
11
15
|
/** Aria label for accessibility purposes */
|
|
@@ -14,22 +18,38 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
|
|
|
14
18
|
id?: string;
|
|
15
19
|
/** The ARIA role to be applied to the Icon */
|
|
16
20
|
role?: string;
|
|
17
|
-
/**
|
|
21
|
+
/**
|
|
22
|
+
* @deprecated Tooltip support has been removed from `Icon` and the use of tooltips
|
|
23
|
+
* is discouraged. This prop no longer has any effect.
|
|
24
|
+
*/
|
|
18
25
|
tooltipMessage?: React.ReactNode;
|
|
19
|
-
/**
|
|
26
|
+
/** @deprecated */
|
|
20
27
|
tooltipPosition?: TooltipPositions;
|
|
21
|
-
/**
|
|
28
|
+
/** @deprecated */
|
|
22
29
|
tooltipVisible?: boolean;
|
|
23
|
-
/**
|
|
30
|
+
/** @deprecated */
|
|
24
31
|
tooltipBgColor?: string;
|
|
25
|
-
/**
|
|
32
|
+
/** @deprecated */
|
|
26
33
|
tooltipFontColor?: string;
|
|
27
|
-
/**
|
|
34
|
+
/** @deprecated */
|
|
28
35
|
tooltipFlipOverrides?: TooltipPositions[];
|
|
29
|
-
/**
|
|
36
|
+
/** @deprecated */
|
|
30
37
|
tooltipId?: string;
|
|
31
38
|
/**
|
|
32
|
-
* Icon type
|
|
39
|
+
* Icon type.
|
|
40
|
+
*
|
|
41
|
+
* Icons use a `snake_case` naming convention and are organised into the following categories:
|
|
42
|
+
*
|
|
43
|
+
* - **Navigation** — `arrow_*`, `chevron_*`, `caret_*`, `caret_large_*`
|
|
44
|
+
* - **Actions** — `add`, `bin`, `close`, `copy`, `create`, `delete`, `drag`, `download`,
|
|
45
|
+
* `edit`, `export`, `filter`, `link`, `search`, `settings`, `upload`, and more.
|
|
46
|
+
* - **Status** — `alert`, `blocked`, `double_tick`, `error`, `error_square`, `info`,
|
|
47
|
+
* `tick`, `warning`, and more.
|
|
48
|
+
* - **Communication** — `call`, `chat`, `email`, `fax`, `message`, and more.
|
|
49
|
+
* - **Finance** — `bank`, `cash`, `coins`, `credit_card`, `euro`, `receipt`, and more.
|
|
50
|
+
* - **Social / App** — `app_facebook`, `app_instagram`, `app_tiktok`, `app_twitter`, `app_youtube`.
|
|
51
|
+
* - **Documents & Files** — `attach`, `document_*`, `file_*`, and more.
|
|
52
|
+
* - **Charts** — `chart_bar`, `chart_bar_arrow_up`, `chart_line`, `chart_pie`.
|
|
33
53
|
*
|
|
34
54
|
* The full list of types can be seen [here](https://carbon.sage.com/?path=/docs/icon--list-of-icons#list-of-icons).
|
|
35
55
|
*/
|
|
@@ -42,6 +62,31 @@ export interface IconProps extends Omit<StyledIconProps, "type">, MarginProps, T
|
|
|
42
62
|
inputSize?: "small" | "medium" | "large";
|
|
43
63
|
/** @ignore @private */
|
|
44
64
|
tabIndex?: number;
|
|
65
|
+
/**
|
|
66
|
+
* Size of the Icon.
|
|
67
|
+
*
|
|
68
|
+
* - `small` — 24px (default)
|
|
69
|
+
* - `medium` — 32px
|
|
70
|
+
* - `large` — 40px
|
|
71
|
+
*/
|
|
72
|
+
size?: IconSize;
|
|
73
|
+
/** Renders the Icon in a light colour, suitable for use on dark backgrounds. */
|
|
74
|
+
inverse?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* @deprecated Use the `size` prop instead. The `extra-large` value is no longer
|
|
77
|
+
* supported and will be mapped to `large`.
|
|
78
|
+
*/
|
|
79
|
+
fontSize?: FontSize;
|
|
80
|
+
/** @deprecated Use CSS or a wrapper element to apply a background colour. */
|
|
81
|
+
bg?: string;
|
|
82
|
+
/** @deprecated Use CSS or a wrapper element to apply a background shape. */
|
|
83
|
+
bgShape?: BackgroundShape;
|
|
84
|
+
/** @deprecated Use CSS or a wrapper element to control background size. */
|
|
85
|
+
bgSize?: BgSize;
|
|
86
|
+
/** @deprecated Use CSS or a wrapper element to control icon colour. */
|
|
87
|
+
color?: string;
|
|
88
|
+
/** @deprecated Applies disabled styling to the icon. */
|
|
89
|
+
disabled?: boolean;
|
|
45
90
|
}
|
|
46
91
|
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
|
|
47
92
|
export default Icon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../__internal__/utils/logger/index.js");require("../../style/utils/filter-styled-system-padding-props.js");var o=require("../../style/utils/filter-styled-system-margin-props.js"),i=require("./icon.style.js");function a(e){return e&&e.__esModule?e:{default:e}}function l(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function n(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){l(e,t,r[t])}))}return e}const s=a(t).default.forwardRef(((a,l)=>{var{"aria-hidden":s,ariaLabel:u,bg:c,bgShape:d,bgSize:p,className:f,color:b,"data-element":g,"data-role":m,disabled:y,focusable:O,fontSize:v,id:j,inputSize:S,isPartOfInput:h,inverse:x,size:z="small",tabIndex:P,tooltipMessage:w,tooltipPosition:I,tooltipVisible:_,tooltipBgColor:q,tooltipFontColor:M,tooltipFlipOverrides:C,tooltipId:F,type:N,role:k}=a,B=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(a,["aria-hidden","ariaLabel","bg","bgShape","bgSize","className","color","data-element","data-role","disabled","focusable","fontSize","id","inputSize","isPartOfInput","inverse","size","tabIndex","tooltipMessage","tooltipPosition","tooltipVisible","tooltipBgColor","tooltipFontColor","tooltipFlipOverrides","tooltipId","type","role"]);const E=t.useMemo((()=>{switch(N){case"help":return"question";case"maintenance":return"settings";case"new":return"gift";case"success":return"tick";case"messages":case"email":return"message";default:return N}}),[N]),L=t.useMemo((()=>v?"extra-large"===v?(r.default.warn('[Icon] The `fontSize` value "extra-large" is no longer supported and has been mapped to "large".'),"large"):v:z),[v,z]),V=n({"aria-hidden":s,"aria-label":u,bg:c,bgSize:p||L,bgShape:d,className:f||void 0,color:b,"data-component":"icon","data-element":null!=g?g:E,"data-role":null!=m?m:"icon",disabled:y,fontSize:L,id:j,inverse:x,ref:l,role:k,tabIndex:P,type:E},o.default(B));return e.jsx(i.default,n({},V))}));s.displayName="Icon",exports.default=s;
|
|
@@ -28,10 +28,13 @@ export interface StyledIconProps {
|
|
|
28
28
|
* The full list of types can be seen [here](https://github.com/Sage/carbon/blob/master/src/components/icon/icon-config.js).
|
|
29
29
|
*/
|
|
30
30
|
type: IconType;
|
|
31
|
+
/**
|
|
32
|
+
* Renders the Icon using the inverse colour token, suitable for use on dark backgrounds.
|
|
33
|
+
*/
|
|
34
|
+
inverse?: boolean;
|
|
31
35
|
}
|
|
32
36
|
export interface StyledIconInternalProps {
|
|
33
37
|
isInteractive?: boolean;
|
|
34
|
-
hasTooltip?: boolean;
|
|
35
38
|
theme?: ThemeObject;
|
|
36
39
|
}
|
|
37
40
|
declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("styled-system"),o=require("../../style/themes/apply-base-theme.js"),r=require("../../style/utils/add-focus-styling.js"),i=require("../../style/utils/color.js"),n=require("../../__internal__/dom/globals.js"),s=require("../../__internal__/utils/helpers/browser-type-check/index.js"),l=require("./icon-config.js"),a=require("./icon-unicodes.js"),c=require("../button/__next__/button.style.js");function d(e){return e&&e.__esModule?e:{default:e}}var u=d(e);const f=e.css([""," &{color:currentColor;}.mentions-list-item &&{color:currentColor;}.mentions-list-item:hover &&,.mentions-list-item.selected &&{color:currentColor;}.search &{color:var(--colorsUtilityYin065);&:hover{color:var(--colorsUtilityYin100);}}.search.dark-background:not(.with-button) &{color:var(--colorsUtilityYang080);:hover{color:var(--colorsUtilityYang100);}}.multi-select &,.filterable-select &{cursor:pointer;}"],c.StyledButton),g=u.default.span.attrs(o.default).withConfig({displayName:"icon.style__StyledIcon",componentId:"sc-88df3881-0"})(["",""],(({theme:o,color:c,bg:d,isInteractive:u,bgSize:g,bgShape:m,type:h,fontSize:y,disabled:b,tabIndex:v,inverse:p})=>{let _=p?"var(--container-standard-inverse-icon)":"var(--container-standard-icon)",j="transparent";const q=n.getWindow(),x=n.getNavigator(),S=g?l.default.backgroundSize[g]:void 0;if(b)_="var(--colorsYin030)";else if(c){const{color:e}=i.default({color:c,theme:o});_=e}if(d){const{backgroundColor:e}=i.default({bg:d,theme:o});j=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;}"," "," ",""],_,j,S,S,m?`border-radius: ${l.default.backgroundShape[m]}`:"",u&&e.css(["&:not(:focus):hover{filter:brightness(0.9);}"]),a.default[h],y&&e.css(["font-size:",";line-height:",";"],l.default.iconSize[y],l.default.iconSize[y]),q&&"services"===h&&s.default(q)&&e.css(["margin-top:",";"],"small"===y?"-7px":"-8px"),x&&q&&"services"===h&&s.isSafari(x)&&!s.default(q)&&e.css(["margin-top:-6px;"]),void 0!==v&&`\n :focus {\n ${r.default()}\n }\n `,t.margin,f)}));exports.default=g;
|
|
@@ -38,5 +38,5 @@ declare const StyledImage: import("styled-components").StyledComponent<"div", an
|
|
|
38
38
|
backgroundPosition: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundPosition<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
|
|
39
39
|
backgroundRepeat: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundRepeat, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
|
|
40
40
|
backgroundSize: import("styled-system").ResponsiveValue<import("csstype").Property.BackgroundSize<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
|
|
41
|
-
} & StyledImageProps, "
|
|
41
|
+
} & StyledImageProps, "position" | "top" | "right" | "bottom" | "left" | "hidden" | "theme" | "children" | "as" | "src" | "backgroundRepeat" | "backgroundSize" | "backgroundPosition">;
|
|
42
42
|
export { StyledImage };
|
|
@@ -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 n=require("../../style/utils/filter-styled-system-margin-props.js");function l(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){l(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=l=>{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:v,tooltipPosition:h,tooltipType:S,tooltipSize:x,tooltipBgColor:w,tooltipFontColor:I,variant:z}=l,q=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(l,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor","variant"]);const[B,_]=t.useState(!1),E=Boolean(m)&&!B;t.useEffect((()=>{_(!1)}),[m]);const T=o.default("portrait",q);return(()=>{let t=e.jsx(i.StyledIcon,{type:g
|
|
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 n=require("../../style/utils/filter-styled-system-margin-props.js");function l(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){l(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=l=>{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:v,tooltipPosition:h,tooltipType:S,tooltipSize:x,tooltipBgColor:w,tooltipFontColor:I,variant:z}=l,q=function(e,t){if(null==e)return{};var r,o,i=function(e,t){if(null==e)return{};var r,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)r=n[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(l,["alt","backgroundColor","foregroundColor","className","name","darkBackground","iconType","initials","shape","size","src","onClick","tooltipMessage","tooltipId","tooltipIsVisible","tooltipPosition","tooltipType","tooltipSize","tooltipBgColor","tooltipFontColor","variant"]);const[B,_]=t.useState(!1),E=Boolean(m)&&!B;t.useEffect((()=>{_(!1)}),[m]);const T=o.default("portrait",q);return(()=>{let t=e.jsx(i.StyledIcon,{type:g,$portraitSize:O});return b&&(t=e.jsx(i.StyledPortraitInitials,{size:O,"data-element":"initials",variant:z,children:b.slice(0,3).toUpperCase()})),m&&!B&&(t=e.jsx(i.StyledCustomImg,{src:m,alt:c||y||"","data-element":"user-image",onError:()=>_(!0)})),P?e.jsx(r.Tooltip,{message:P,id:k,position:h,type:S,size:x,isVisible:v,bgColor:w,fontColor:I,children:e.jsx(i.StyledPortraitContainer,a(s(a(s({},n.default(q)),{onClick:C,className:d}),T),{hasValidImg:E,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,variant:z,children:t}))}):e.jsx(i.StyledPortraitContainer,a(s(a(s({},n.default(q)),{onClick:C,className:d}),T),{hasValidImg:E,darkBackground:f,size:O,shape:j,backgroundColor:p,foregroundColor:u,variant:z,children:t}))})()};exports.Portrait=c,exports.default=c;
|
|
@@ -1,3 +1,9 @@
|
|
|
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
|
-
"use strict";exports.PORTRAIT_SHAPES=["circle","square"],exports.PORTRAIT_SIZES=["XS","S","M","ML","L","XL","XXL"];
|
|
1
|
+
"use strict";exports.PORTRAIT_SHAPES=["circle","square"],exports.PORTRAIT_SIZES=["XS","S","M","ML","L","XL","XXL"],exports.PORTRAIT_SIZE_PARAMS={XS:{dimensions:32,iconDimensions:16},S:{dimensions:32,iconDimensions:20},M:{dimensions:40,iconDimensions:24},ML:{dimensions:56,iconDimensions:32},L:{dimensions:72,iconDimensions:40},XL:{dimensions:104,iconDimensions:56},XXL:{dimensions:128,iconDimensions:64}};
|
|
@@ -13,7 +13,10 @@ type StyledPortraitProps = {
|
|
|
13
13
|
};
|
|
14
14
|
export declare const StyledPortraitInitials: import("styled-components").StyledComponent<"div", any, Pick<StyledPortraitProps, "size" | "variant">, never>;
|
|
15
15
|
export declare const StyledCustomImg: import("styled-components").StyledComponent<"img", any, {}, never>;
|
|
16
|
-
export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any,
|
|
16
|
+
export declare const StyledIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../icon").IconProps & React.RefAttributes<HTMLSpanElement>>, any, {
|
|
17
|
+
$portraitSize: PortraitSizes;
|
|
18
|
+
variant?: PortraitVariant;
|
|
19
|
+
}, never>;
|
|
17
20
|
export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {
|
|
18
21
|
theme: object;
|
|
19
22
|
} & StyledPortraitProps & MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "theme">;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require("react");var t=require("styled-components"),e=require("styled-system"),i=require("../icon/icon.component.js"),
|
|
1
|
+
"use strict";require("react");var t=require("styled-components"),e=require("styled-system"),i=require("../icon/icon.component.js"),r=require("../../style/themes/apply-base-theme.js"),o=require("./__internal__/get-properties.js");function n(t){return t&&t.__esModule?t:{default:t}}var s=n(t);const a=s.default.div.withConfig({displayName:"portrait.style__StyledPortraitInitials",componentId:"sc-67607789-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})=>o.getPortraitFontSize(t))),l=s.default.img.withConfig({displayName:"portrait.style__StyledCustomImg",componentId:"sc-67607789-1"})(["height:inherit;min-width:inherit;"]),d=s.default(i.default).withConfig({displayName:"portrait.style__StyledIcon",componentId:"sc-67607789-2"})(["&&{color:",";height:",";min-width:",";::before{font-size:",";}}"],(({variant:t})=>o.getPortraitColors(t).color),(({$portraitSize:t})=>o.getPortraitDimensions(t).height),(({$portraitSize:t})=>o.getPortraitDimensions(t).width),(({$portraitSize:t})=>o.getPortraitIconFontSize(t))),c=s.default.div.attrs(r.default).withConfig({displayName:"portrait.style__StyledPortraitContainer",componentId:"sc-67607789-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: ${o.getPortraitColors(t).backgroundColor};\n color: ${o.getPortraitColors(t).color};\n `),(({darkBackground:t,backgroundColor:e,size:i,foregroundColor:r,variant:n})=>!n&&o.default(e,t,!["XS","S"].includes(i),!0,r)),(({hasValidImg:t,size:e})=>t&&`max-width: ${o.getPortraitDimensions(e).width};`),(({size:t})=>o.getPortraitDimensions(t).width),(({size:t})=>o.getPortraitDimensions(t).height),(({shape:t,size:e})=>o.getPortraitBorderRadius(t,e)),(({onClick:t})=>t&&"cursor: pointer"),e.margin);exports.StyledCustomImg=l,exports.StyledIcon=d,exports.StyledPortraitContainer=c,exports.StyledPortraitInitials=a;
|
|
@@ -8,5 +8,5 @@ declare const StyledProgressBar: import("styled-components").StyledComponent<"sp
|
|
|
8
8
|
declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
9
9
|
declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
10
10
|
declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "size" | "labelWidth" | "labelsPosition">, never>;
|
|
11
|
-
declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "
|
|
11
|
+
declare const InnerBar: import("styled-components").StyledComponent<"span", any, Required<Pick<ProgressTrackerProps, "size" | "error" | "progress">>, never>;
|
|
12
12
|
export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };
|
|
@@ -2,7 +2,7 @@ import { SpaceProps } from "styled-system";
|
|
|
2
2
|
import { TileProps } from "./tile.component";
|
|
3
3
|
declare const StyledTile: import("styled-components").StyledComponent<"div", any, {
|
|
4
4
|
theme: object;
|
|
5
|
-
} & Pick<TileProps, "
|
|
5
|
+
} & Pick<TileProps, "width" | "height" | "variant" | "borderWidth" | "highlightVariant" | "roundness" | "borderVariant"> & {
|
|
6
6
|
isHorizontal?: boolean;
|
|
7
7
|
} & SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "theme">;
|
|
8
8
|
export default StyledTile;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TooltipProps } from "./tooltip.component";
|
|
2
2
|
declare const StyledTooltip: import("styled-components").StyledComponent<"div", any, {
|
|
3
3
|
theme: object;
|
|
4
|
-
} & Pick<TooltipProps, "
|
|
4
|
+
} & Pick<TooltipProps, "size" | "type" | "bgColor" | "fontColor">, "theme">;
|
|
5
5
|
export default StyledTooltip;
|