@consta/uikit 5.16.0 → 5.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/StepsCanary/index.d.ts +1 -0
- package/StepsCanary/index.js +1 -0
- package/__internal__/src/components/Badge/Badge.css +3 -1
- package/__internal__/src/components/Badge/Badge.js +1 -1
- package/__internal__/src/components/Badge/Badge.js.map +1 -1
- package/__internal__/src/components/StepsCanary/Steps.css +1 -0
- package/__internal__/src/components/StepsCanary/StepsCanary.d.ts +5 -0
- package/__internal__/src/components/StepsCanary/StepsCanary.js +2 -0
- package/__internal__/src/components/StepsCanary/StepsCanary.js.map +1 -0
- package/__internal__/src/components/StepsCanary/StepsItem/StepsItem.css +1 -0
- package/__internal__/src/components/StepsCanary/StepsItem/StepsItem.d.ts +21 -0
- package/__internal__/src/components/StepsCanary/StepsItem/StepsItem.js +2 -0
- package/__internal__/src/components/StepsCanary/StepsItem/StepsItem.js.map +1 -0
- package/__internal__/src/components/StepsCanary/StepsItem/index.d.ts +1 -0
- package/__internal__/src/components/StepsCanary/StepsItem/index.js +2 -0
- package/__internal__/src/components/StepsCanary/StepsItem/index.js.map +1 -0
- package/__internal__/src/components/StepsCanary/helper.d.ts +273 -0
- package/__internal__/src/components/StepsCanary/helper.js +2 -0
- package/__internal__/src/components/StepsCanary/helper.js.map +1 -0
- package/__internal__/src/components/StepsCanary/index.d.ts +1 -0
- package/__internal__/src/components/StepsCanary/index.js +2 -0
- package/__internal__/src/components/StepsCanary/index.js.map +1 -0
- package/__internal__/src/components/StepsCanary/types.d.ts +40 -0
- package/__internal__/src/components/StepsCanary/types.js +2 -0
- package/__internal__/src/components/StepsCanary/types.js.map +1 -0
- package/__internal__/src/hooks/useScrollElements/useScrollElements.d.ts +1 -1
- package/__internal__/src/hooks/useScrollElements/useScrollElements.js +1 -1
- package/__internal__/src/hooks/useScrollElements/useScrollElements.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "../__internal__/src/components/StepsCanary";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "../__internal__/src/components/StepsCanary";
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
.Badge{
|
|
1
|
+
.Badge{--badge-bg-color-var:var(--badge-bg-color-prop,var(--badge-bg-color));--badge-text-color-var:var(--badge-text-color-prop,var(--badge-text-color));--badge-border-color-var:var(
|
|
2
|
+
--badge-border-color-prop,var(--badge-border-color)
|
|
3
|
+
);align-items:center;box-sizing:border-box;color:var(--badge-text-color-var);display:inline-flex;flex-wrap:nowrap;font-size:var(--badge-text-size);font-weight:var(--font-weight-text-semibold);gap:var(--space-2xs);height:var(--badge-size);letter-spacing:.05em;line-height:var(--badge-size);padding:0 var(--badge-horizontal-padding);text-decoration:none;text-transform:uppercase;white-space:nowrap}.Badge_form_default{border-radius:var(--control-radius)}.Badge_form_round{border-radius:99em}.Badge_view_filled{background:var(--badge-bg-color-var)}.Badge_view_stroked{box-shadow:inset 0 0 0 1px var(--badge-border-color-var)}.Badge_view_tinted{background:color-mix(in srgb,var(--badge-bg-color-var) var(--badge-degree-mixing),var(--color-bg-default))}.Badge_counter{justify-content:center;padding:0;text-align:center;width:var(--badge-size)}.Badge_minified{background:transparent;border:var(--badge-minified-border-size) solid transparent;border-radius:99em;box-shadow:inset 0 0 0 var(--badge-size) var(--badge-bg-color-var);width:var(--badge-size)}.Badge-Icon{flex:1}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","view","status","form","icon","iconLeft","iconRight","minified","label","as","title","style"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Badge.css";import{classnames}from"@bem-react/classnames";import React from"react";import{useTheme}from"../Theme";import{forwardRefWithAs}from"../../utils/types/PropsWithAsAttributes";import{cnBadge}from"./cn";import{guardStatus}from"./guardStatus";import{getBgColor,getBorderColor,getDegreeMixing,getHorizontalPadding,getMinifiedBorderSize,getSize,getTextColor,getTextSize}from"./maps";import{badgePropFormDefault,badgePropSizeDefault,badgePropStatusDefault,badgePropViewDefault}from"./types";var renderIcon=function(a){return a?React.createElement(a,{size:"xs",className:cnBadge("Icon")}):null};export var Badge=forwardRefWithAs(function(a,b){var c=a.size,d=void 0===c?badgePropSizeDefault:c,e=a.view,f=void 0===e?badgePropViewDefault:e,g=a.status,h=void 0===g?badgePropStatusDefault:g,i=a.form,j=void 0===i?badgePropFormDefault:i,k=a.icon,l=a.iconLeft,m=a.iconRight,n=a.minified,o=void 0!==n&&n,p=a.label,q=a.as,r=void 0===q?"div":q,s=a.title,t=a.style,u=_objectWithoutProperties(a,_excluded),v=guardStatus(h),w=useTheme(),x=w.themeClassNames,y="system"!==v&&"disabled"!==v&&"filled"===f?classnames(a.className,x.color.accent):a.className,z=null!==l&&void 0!==l?l:k,A=1===[k,l,m,p].filter(Boolean).length&&1>=((null===p||void 0===p?void 0:p.length)||0);return React.createElement(r,Object.assign({},u,{className:cnBadge(_objectSpread({minified:o},!o&&{view:f,form:j,counter:A}),[y]),ref:b,title:s||o&&p,style:_objectSpread(_objectSpread({},t),{},{"--badge-bg-color":getBgColor(v),"--badge-border-color":getBorderColor(v,f),"--badge-horizontal-padding":getHorizontalPadding(d,j,o),"--badge-minified-border-size":getMinifiedBorderSize(d,o),"--badge-size":getSize(d,o),"--badge-text-color":getTextColor(v,f),"--badge-text-size":getTextSize(d),"--badge-degree-mixing":getDegreeMixing(v,f)})}),!o&&React.createElement(React.Fragment,null,renderIcon(z),p,renderIcon(m)))});
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","view","status","form","icon","iconLeft","iconRight","minified","label","as","title","style"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Badge.css";import{classnames}from"@bem-react/classnames";import React from"react";import{useTheme}from"../Theme";import{forwardRefWithAs}from"../../utils/types/PropsWithAsAttributes";import{cnBadge}from"./cn";import{guardStatus}from"./guardStatus";import{getBgColor,getBorderColor,getDegreeMixing,getHorizontalPadding,getMinifiedBorderSize,getSize,getTextColor,getTextSize}from"./maps";import{badgePropFormDefault,badgePropSizeDefault,badgePropStatusDefault,badgePropViewDefault}from"./types";var renderIcon=function(a){return a?React.createElement(a,{size:"xs",className:cnBadge("Icon")}):null};export var Badge=forwardRefWithAs(function(a,b){var c=a.size,d=void 0===c?badgePropSizeDefault:c,e=a.view,f=void 0===e?badgePropViewDefault:e,g=a.status,h=void 0===g?badgePropStatusDefault:g,i=a.form,j=void 0===i?badgePropFormDefault:i,k=a.icon,l=a.iconLeft,m=a.iconRight,n=a.minified,o=void 0!==n&&n,p=a.label,q=a.as,r=void 0===q?"div":q,s=a.title,t=a.style,u=_objectWithoutProperties(a,_excluded),v=guardStatus(h),w=useTheme(),x=w.themeClassNames,y="system"!==v&&"disabled"!==v&&"filled"===f?classnames(a.className,x.color.accent):a.className,z=null!==l&&void 0!==l?l:k,A=1===[k,l,m,p].filter(Boolean).length&&1>=((null===p||void 0===p?void 0:p.length)||0);return React.createElement(r,Object.assign({},u,{className:cnBadge(_objectSpread({minified:o},!o&&{view:f,form:j,counter:A}),[y]),ref:b,title:s||o&&p||void 0,style:_objectSpread(_objectSpread({},t),{},{"--badge-bg-color":getBgColor(v),"--badge-border-color":getBorderColor(v,f),"--badge-horizontal-padding":getHorizontalPadding(d,j,o),"--badge-minified-border-size":getMinifiedBorderSize(d,o),"--badge-size":getSize(d,o),"--badge-text-color":getTextColor(v,f),"--badge-text-size":getTextSize(d),"--badge-degree-mixing":getDegreeMixing(v,f)})}),!o&&React.createElement(React.Fragment,null,renderIcon(z),p,renderIcon(m)))});
|
|
2
2
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["classnames","React","useTheme","forwardRefWithAs","cnBadge","guardStatus","getBgColor","getBorderColor","getDegreeMixing","getHorizontalPadding","getMinifiedBorderSize","getSize","getTextColor","getTextSize","badgePropFormDefault","badgePropSizeDefault","badgePropStatusDefault","badgePropViewDefault","renderIcon","Icon","Badge","props","ref","size","view","status","statusProp","form","icon","iconLeft","IconRight","iconRight","minified","label","as","title","style","otherProps","themeClassNames","className","color","accent","IconLeft","counter","filter","Boolean","length"],"sources":["../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import './Badge.css';\n\nimport { classnames } from '@bem-react/classnames';\nimport { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { useTheme } from '##/components/Theme';\nimport { forwardRefWithAs } from '##/utils/types/PropsWithAsAttributes';\n\nimport { cnBadge } from './cn';\nimport { guardStatus } from './guardStatus';\nimport {\n getBgColor,\n getBorderColor,\n getDegreeMixing,\n getHorizontalPadding,\n getMinifiedBorderSize,\n getSize,\n getTextColor,\n getTextSize,\n} from './maps';\nimport {\n badgePropFormDefault,\n BadgeProps,\n badgePropSizeDefault,\n badgePropStatusDefault,\n badgePropViewDefault,\n} from './types';\n\nconst renderIcon = (Icon: IconComponent | undefined) =>\n Icon ? <Icon size=\"xs\" className={cnBadge('Icon')} /> : null;\n\nexport const Badge = forwardRefWithAs<BadgeProps>((props, ref) => {\n const {\n size = badgePropSizeDefault,\n view = badgePropViewDefault,\n status: statusProp = badgePropStatusDefault,\n form = badgePropFormDefault,\n icon,\n iconLeft,\n iconRight: IconRight,\n minified = false,\n label,\n as = 'div',\n title,\n style,\n ...otherProps\n } = props;\n\n const status = guardStatus(statusProp);\n const Tag = as as string;\n const { themeClassNames } = useTheme();\n\n const className =\n status !== 'system' && status !== 'disabled' && view === 'filled'\n ? classnames(props.className, themeClassNames.color.accent)\n : props.className;\n const IconLeft = iconLeft ?? icon;\n const counter =\n [icon, iconLeft, IconRight, label].filter(Boolean).length === 1 &&\n (label?.length || 0) <= 1;\n\n return (\n <Tag\n {...otherProps}\n className={cnBadge(\n {\n minified,\n ...(!minified && {\n view,\n form,\n counter,\n }),\n },\n [className],\n )}\n ref={ref}\n title={title || (minified && label)}\n style={{\n ...style,\n '--badge-bg-color': getBgColor(status),\n '--badge-border-color': getBorderColor(status, view),\n '--badge-horizontal-padding': getHorizontalPadding(\n size,\n form,\n minified,\n ),\n '--badge-minified-border-size': getMinifiedBorderSize(size, minified),\n '--badge-size': getSize(size, minified),\n '--badge-text-color': getTextColor(status, view),\n '--badge-text-size': getTextSize(size),\n '--badge-degree-mixing': getDegreeMixing(status, view),\n }}\n >\n {!minified && (\n <>\n {renderIcon(IconLeft)}\n {label}\n {renderIcon(IconRight)}\n </>\n )}\n </Tag>\n );\n});\n"],"mappings":"82BAAA,oBAEA,OAASA,UAAT,KAA2B,uBAA3B,CAEA,MAAOC,MAAP,KAAkB,OAAlB,CAEA,OAASC,QAAT,gBACA,OAASC,gBAAT,+CAEA,OAASC,OAAT,YACA,OAASC,WAAT,qBACA,OACEC,UADF,CAEEC,cAFF,CAGEC,eAHF,CAIEC,oBAJF,CAKEC,qBALF,CAMEC,OANF,CAOEC,YAPF,CAQEC,WARF,cAUA,OACEC,oBADF,CAGEC,oBAHF,CAIEC,sBAJF,CAKEC,oBALF,eAQA,GAAMC,WAAU,CAAG,SAACC,CAAD,QACjBA,EAAI,CAAG,oBAAC,CAAD,EAAM,IAAI,CAAC,IAAX,CAAgB,SAAS,CAAEf,OAAO,CAAC,MAAD,CAAlC,EAAH,CAAoD,IADvC,CAAnB,CAGA,MAAO,IAAMgB,MAAK,CAAGjB,gBAAgB,CAAa,SAACkB,CAAD,CAAQC,CAAR,CAAgB,OAe5DD,CAf4D,CAE9DE,IAF8D,CAE9DA,CAF8D,YAEvDR,oBAFuD,KAe5DM,CAf4D,CAG9DG,IAH8D,CAG9DA,CAH8D,YAGvDP,oBAHuD,KAe5DI,CAf4D,CAI9DI,MAJ8D,CAItDC,CAJsD,YAIzCV,sBAJyC,KAe5DK,CAf4D,CAK9DM,IAL8D,CAK9DA,CAL8D,YAKvDb,oBALuD,GAM9Dc,CAN8D,CAe5DP,CAf4D,CAM9DO,IAN8D,CAO9DC,CAP8D,CAe5DR,CAf4D,CAO9DQ,QAP8D,CAQnDC,CARmD,CAe5DT,CAf4D,CAQ9DU,SAR8D,GAe5DV,CAf4D,CAS9DW,QAT8D,CAS9DA,CAT8D,eAU9DC,CAV8D,CAe5DZ,CAf4D,CAU9DY,KAV8D,GAe5DZ,CAf4D,CAW9Da,EAX8D,CAW9DA,CAX8D,YAWzD,KAXyD,GAY9DC,CAZ8D,CAe5Dd,CAf4D,CAY9Dc,KAZ8D,CAa9DC,CAb8D,CAe5Df,CAf4D,CAa9De,KAb8D,CAc3DC,CAd2D,0BAe5DhB,CAf4D,YAiB1DI,CAAM,CAAGpB,WAAW,CAACqB,CAAD,CAjBsC,GAmBpCxB,QAAQ,EAnB4B,CAmBxDoC,CAnBwD,GAmBxDA,eAnBwD,CAqB1DC,CAAS,CACF,QAAX,GAAAd,CAAM,EAA4B,UAAX,GAAAA,CAAvB,EAAyD,QAAT,GAAAD,CAAhD,CACIxB,UAAU,CAACqB,CAAK,CAACkB,SAAP,CAAkBD,CAAe,CAACE,KAAhB,CAAsBC,MAAxC,CADd,CAEIpB,CAAK,CAACkB,SAxBoD,CAyB1DG,CAAQ,QAAGb,CAAH,WAAGA,CAAH,CAAGA,CAAH,CAAeD,CAzBmC,CA0B1De,CAAO,CACmD,CAA9D,IAACf,CAAD,CAAOC,CAAP,CAAiBC,CAAjB,CAA4BG,CAA5B,EAAmCW,MAAnC,CAA0CC,OAA1C,EAAmDC,MAAnD,EACwB,CAAxB,GAAC,QAAAb,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEa,MAAP,GAAiB,CAAlB,CA5B8D,CA8BhE,MACE,qBAbUZ,CAaV,kBACMG,CADN,EAEE,SAAS,CAAEjC,OAAO,gBAEd4B,QAAQ,CAARA,CAFc,EAGV,CAACA,CAAD,EAAa,CACfR,IAAI,CAAJA,CADe,CAEfG,IAAI,CAAJA,CAFe,CAGfgB,OAAO,CAAPA,CAHe,CAHH,EAShB,CAACJ,CAAD,CATgB,CAFpB,CAaE,GAAG,CAAEjB,CAbP,CAcE,KAAK,CAAEa,CAAK,EAAKH,CAAQ,EAAIC,
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["classnames","React","useTheme","forwardRefWithAs","cnBadge","guardStatus","getBgColor","getBorderColor","getDegreeMixing","getHorizontalPadding","getMinifiedBorderSize","getSize","getTextColor","getTextSize","badgePropFormDefault","badgePropSizeDefault","badgePropStatusDefault","badgePropViewDefault","renderIcon","Icon","Badge","props","ref","size","view","status","statusProp","form","icon","iconLeft","IconRight","iconRight","minified","label","as","title","style","otherProps","themeClassNames","className","color","accent","IconLeft","counter","filter","Boolean","length"],"sources":["../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import './Badge.css';\n\nimport { classnames } from '@bem-react/classnames';\nimport { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { useTheme } from '##/components/Theme';\nimport { forwardRefWithAs } from '##/utils/types/PropsWithAsAttributes';\n\nimport { cnBadge } from './cn';\nimport { guardStatus } from './guardStatus';\nimport {\n getBgColor,\n getBorderColor,\n getDegreeMixing,\n getHorizontalPadding,\n getMinifiedBorderSize,\n getSize,\n getTextColor,\n getTextSize,\n} from './maps';\nimport {\n badgePropFormDefault,\n BadgeProps,\n badgePropSizeDefault,\n badgePropStatusDefault,\n badgePropViewDefault,\n} from './types';\n\nconst renderIcon = (Icon: IconComponent | undefined) =>\n Icon ? <Icon size=\"xs\" className={cnBadge('Icon')} /> : null;\n\nexport const Badge = forwardRefWithAs<BadgeProps>((props, ref) => {\n const {\n size = badgePropSizeDefault,\n view = badgePropViewDefault,\n status: statusProp = badgePropStatusDefault,\n form = badgePropFormDefault,\n icon,\n iconLeft,\n iconRight: IconRight,\n minified = false,\n label,\n as = 'div',\n title,\n style,\n ...otherProps\n } = props;\n\n const status = guardStatus(statusProp);\n const Tag = as as string;\n const { themeClassNames } = useTheme();\n\n const className =\n status !== 'system' && status !== 'disabled' && view === 'filled'\n ? classnames(props.className, themeClassNames.color.accent)\n : props.className;\n const IconLeft = iconLeft ?? icon;\n const counter =\n [icon, iconLeft, IconRight, label].filter(Boolean).length === 1 &&\n (label?.length || 0) <= 1;\n\n return (\n <Tag\n {...otherProps}\n className={cnBadge(\n {\n minified,\n ...(!minified && {\n view,\n form,\n counter,\n }),\n },\n [className],\n )}\n ref={ref}\n title={title || (minified && label) || undefined}\n style={{\n ...style,\n '--badge-bg-color': getBgColor(status),\n '--badge-border-color': getBorderColor(status, view),\n '--badge-horizontal-padding': getHorizontalPadding(\n size,\n form,\n minified,\n ),\n '--badge-minified-border-size': getMinifiedBorderSize(size, minified),\n '--badge-size': getSize(size, minified),\n '--badge-text-color': getTextColor(status, view),\n '--badge-text-size': getTextSize(size),\n '--badge-degree-mixing': getDegreeMixing(status, view),\n }}\n >\n {!minified && (\n <>\n {renderIcon(IconLeft)}\n {label}\n {renderIcon(IconRight)}\n </>\n )}\n </Tag>\n );\n});\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.canary--Steps{--steps-item-width:var(--steps-item-width-prop,auto);align-items:center;display:flex;gap:var(--space-xs);max-width:100%;width:-moz-max-content;width:max-content}.canary--Steps_size_s{--steps-list-gap:var(--space-xs);--steps-item-badge-margin-top:calc(var(--space-3xs)/2)}.canary--Steps_size_m{--steps-list-gap:var(--space-s);--steps-item-badge-margin-top:var(--space-3xs)}.canary--Steps_size_l{--steps-list-gap:var(--space-m);--steps-item-badge-margin-top:var(--space-3xs)}.canary--Steps-List{display:grid;flex:1;gap:var(--space-xs) var(--steps-list-gap);grid-auto-flow:column;grid-template:auto auto/repeat(var(--steps-items-length),var(--steps-item-width));overflow-x:scroll;overflow-y:visible}.canary--Steps-Item{max-width:var(--steps-item-max-width-prop)}.canary--Steps-ScrollButton{flex:none}.canary--Steps-ScrollButton_position_right .Button-Icon{transform:rotate(180deg)}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","items","value","getItemLabel","getItemDisabled","getItemIcon","getItemStatus","getItemDescription","onChange","className","style","withNumber","labelWordWrap","fitMode"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./Steps.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import React,{forwardRef,useCallback,useEffect,useRef}from"react";import{Button}from"../Button";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useMutableRef}from"../../hooks/useMutableRef";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{cnMixScrollBar}from"../../mixs/MixScrollBar";import{cnCanary}from"../../utils/bem";import{withDefaultGetters}from"./helper";import{StepsStep}from"./StepsItem";export var cnSteps=cnCanary("Steps");var StepsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?"m":d,f=c.items,g=c.value,h=c.getItemLabel,i=c.getItemDisabled,j=c.getItemIcon,k=c.getItemStatus,l=c.getItemDescription,m=c.onChange,n=c.className,o=c.style,p=c.withNumber,q=c.labelWordWrap,r=c.fitMode,s=void 0===r?"scroll":r,t=_objectWithoutProperties(c,_excluded),u=useRef(null),v=useScrollElements(f,u),w=v.refs,x=v.scrollTo,y=useChoiceGroup({value:g,getKey:h,callBack:m,multiple:!1}),z=y.getOnChange,A=y.getChecked,B=f.findIndex(A),C=useMutableRef([B,z,i]),D=useOverflow({currentRef:u})&&"scrollWithButtons"===s,E=useCallback(function(a){var b=_slicedToArray(C.current,3),c=b[0],d=b[1],e=b[2],g=c-1;0<=g&&!e(f[g])&&(null===d||void 0===d?void 0:d(f[g])(a))},[]),F=useCallback(function(a){var b=_slicedToArray(C.current,3),c=b[0],d=b[1],e=b[2],g=c+1;g<=f.length-1&&!e(f[g])&&(null===d||void 0===d?void 0:d(f[g])(a))},[]);return useEffect(function(){x(B)},[B]),React.createElement("div",Object.assign({},t,{ref:b,className:cnSteps({size:e},[n]),style:_objectSpread(_objectSpread({},o),{},_defineProperty({},"--steps-items-length",f.length))}),D&&React.createElement(Button,{className:cnSteps("ScrollButton",{position:"left"}),iconLeft:IconArrowLeft,view:"clear",onlyIcon:!0,size:"xs",type:"button",onClick:E}),React.createElement("div",{ref:u,className:cnSteps("List",[cnMixScrollBar({invisible:!0})])},f.map(function(a,b){return React.createElement(StepsStep,{key:b,ref:w[b],className:cnSteps("Item"),label:h(a),number:b+1,withNumber:p,size:e,active:B===b,onChange:z(a),disabled:i(a),status:k(a),description:l(a),labelWordWrap:q,icon:j(a)})})),D&&React.createElement(Button,{className:cnSteps("ScrollButton",{position:"right"}),iconLeft:IconArrowLeft,view:"clear",onlyIcon:!0,size:"xs",type:"button",onClick:F}))};export var Steps=forwardRef(StepsRender);export*from"./types";
|
|
2
|
+
//# sourceMappingURL=StepsCanary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepsCanary.js","names":["IconArrowLeft","React","forwardRef","useCallback","useEffect","useRef","Button","useChoiceGroup","useMutableRef","useOverflow","useScrollElements","cnMixScrollBar","cnCanary","withDefaultGetters","StepsStep","cnSteps","StepsRender","props","ref","size","items","value","getItemLabel","getItemDisabled","getItemIcon","getItemStatus","getItemDescription","onChange","className","style","withNumber","labelWordWrap","fitMode","otherProps","listRef","refs","scrollTo","getKey","callBack","multiple","getOnChange","getChecked","activeStep","findIndex","mutableRefs","isOverflow","currentRef","toPrevStep","e","current","currentStep","getDisabled","nextStep","toNextStep","prevStep","length","position","invisible","map","item","index","Steps"],"sources":["../../../../../src/components/StepsCanary/StepsCanary.tsx"],"sourcesContent":["import './Steps.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport React, { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '##/components/Button';\nimport { useChoiceGroup } from '##/hooks/useChoiceGroup/useChoiceGroup';\nimport { useMutableRef } from '##/hooks/useMutableRef';\nimport { useOverflow } from '##/hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '##/hooks/useScrollElements/useScrollElements';\nimport { cnMixScrollBar } from '##/mixs/MixScrollBar';\nimport { cnCanary } from '##/utils/bem';\n\nimport { withDefaultGetters } from './helper';\nimport { StepsStep } from './StepsItem';\nimport { StepsComponent, StepsProps } from './types';\n\nexport const cnSteps = cnCanary('Steps');\n\nconst StepsRender = (props: StepsProps, ref: React.Ref<HTMLDivElement>) => {\n const {\n size = 'm',\n items,\n value,\n getItemLabel,\n getItemDisabled,\n getItemIcon,\n getItemStatus,\n getItemDescription,\n onChange,\n className,\n style,\n withNumber,\n labelWordWrap,\n fitMode = 'scroll',\n ...otherProps\n } = withDefaultGetters(props);\n\n const listRef = useRef<HTMLDivElement>(null);\n const { refs, scrollTo } = useScrollElements(items, listRef);\n\n const { getOnChange, getChecked } = useChoiceGroup({\n value,\n getKey: getItemLabel,\n callBack: onChange,\n multiple: false,\n });\n\n const activeStep = items.findIndex(getChecked);\n\n const mutableRefs = useMutableRef([\n activeStep,\n getOnChange,\n getItemDisabled,\n ] as const);\n\n const isOverflow =\n useOverflow({ currentRef: listRef }) && fitMode === 'scrollWithButtons';\n\n const toPrevStep = useCallback((e: React.MouseEvent) => {\n const [currentStep, getOnChange, getDisabled] = mutableRefs.current;\n const nextStep = currentStep - 1;\n\n if (nextStep >= 0) {\n !getDisabled(items[nextStep]) && getOnChange?.(items[nextStep])(e);\n }\n }, []);\n\n const toNextStep = useCallback((e: React.MouseEvent) => {\n const [currentStep, getOnChange, getDisabled] = mutableRefs.current;\n const prevStep = currentStep + 1;\n\n if (prevStep <= items.length - 1) {\n !getDisabled(items[prevStep]) && getOnChange?.(items[prevStep])(e);\n }\n }, []);\n\n useEffect(() => {\n scrollTo(activeStep);\n }, [activeStep]);\n\n return (\n <div\n {...otherProps}\n ref={ref}\n className={cnSteps({ size }, [className])}\n style={{\n ...style,\n ['--steps-items-length' as string]: items.length,\n }}\n >\n {isOverflow && (\n <Button\n className={cnSteps('ScrollButton', { position: 'left' })}\n iconLeft={IconArrowLeft}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n type=\"button\"\n onClick={toPrevStep}\n />\n )}\n <div\n ref={listRef}\n className={cnSteps('List', [cnMixScrollBar({ invisible: true })])}\n >\n {items.map((item, index) => (\n <StepsStep\n key={index}\n ref={refs[index] as React.RefObject<HTMLButtonElement>}\n className={cnSteps('Item')}\n label={getItemLabel(item)}\n number={index + 1}\n withNumber={withNumber}\n size={size}\n active={activeStep === index}\n onChange={getOnChange(item)}\n disabled={getItemDisabled(item)}\n status={getItemStatus(item)}\n description={getItemDescription(item)}\n labelWordWrap={labelWordWrap}\n icon={getItemIcon(item)}\n />\n ))}\n </div>\n {isOverflow && (\n <Button\n className={cnSteps('ScrollButton', { position: 'right' })}\n iconLeft={IconArrowLeft}\n view=\"clear\"\n onlyIcon\n size=\"xs\"\n type=\"button\"\n onClick={toNextStep}\n />\n )}\n </div>\n );\n};\n\nexport const Steps = forwardRef(StepsRender) as StepsComponent;\n\nexport * from './types';\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.canary--StepsItem{--steps-item-text-color:var(--color-typo-secondary);--steps-item-badge-bg-color:var(--color-bg-secondary);--steps-item-badge-text-color:var(--color-typo-secondary);--steps-item-line-color:var(--color-bg-border);--steps-item-cursor:pointer;display:contents}.canary--StepsItem_active{--steps-item-text-color:var(--color-typo-primary);--steps-item-cursor:auto;--steps-item-line-color:var(--color-control-bg-primary)}.canary--StepsItem_active.canary--StepsItem_status_error{--steps-item-line-color:var(--color-bg-alert)}.canary--StepsItem_active.canary--StepsItem_status_resolved{--steps-item-line-color:var(--color-control-bg-primary)}.canary--StepsItem_disabled{--steps-item-text-color:var(--color-control-typo-disable);--steps-item-badge-bg-color:var(--color-control-bg-disable);--steps-item-badge-text-color:var(--color-control-typo-disable);--steps-item-line-color:var(--color-control-bg-disable);--steps-item-cursor:no-drop}.canary--StepsItem:not(.canary--StepsItem_disabled,.canary--StepsItem_active) .canary--StepsItem-Button:focus,.canary--StepsItem:not(.canary--StepsItem_disabled,.canary--StepsItem_active) .canary--StepsItem-Button:hover{--steps-item-text-color:var(--color-control-typo-secondary-hover)}.canary--StepsItem-Button{background-color:transparent;border:none;color:var(--steps-item-text-color);cursor:var(--steps-item-cursor);margin:0;max-width:var(--steps-item-max-width);min-width:var(--steps-item-min-width);padding:0;text-align:left;text-decoration:none;text-indent:0}.canary--StepsItem-Badge{--badge-bg-color-prop:var(--steps-item-badge-bg-color);--badge-text-color-prop:var(--steps-item-badge-text-color);flex:none;margin-top:var(--steps-item-badge-margin-top)}.canary--StepsItem-Badge_active:not(.canary--StepsItem-Badge_disabled){--steps-item-badge-bg-color:var(--color-control-bg-primary);--steps-item-badge-text-color:var(--color-typo-primary)}.canary--StepsItem-Badge_status_error:not(.canary--StepsItem-Badge_disabled){--steps-item-badge-bg-color:var(--color-bg-alert);--steps-item-badge-text-color:var(--color-typo-primary)}.canary--StepsItem-Badge_status_resolved:not(.canary--StepsItem-Badge_disabled){--steps-item-badge-bg-color:var(--color-control-bg-primary);--steps-item-badge-text-color:var(--color-typo-primary)}.canary--StepsItem-Label:not(.canary--StepsItem-Label_wordWrap){white-space:nowrap}.canary--StepsItem:after{background-color:var(--steps-item-line-color);border-radius:99em;content:"";height:var(--space-3xs)}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import './StepsItem.css';
|
|
2
|
+
import { IconComponent } from '@consta/icons/Icon';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StepItemStatus, StepsPropSize } from '../StepsCanary';
|
|
5
|
+
export declare const cnStepsStep: import("@bem-react/classname").ClassNameFormatter;
|
|
6
|
+
declare type Props = {
|
|
7
|
+
size: StepsPropSize;
|
|
8
|
+
label: string;
|
|
9
|
+
number?: number;
|
|
10
|
+
active?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
status?: StepItemStatus;
|
|
13
|
+
onChange: React.MouseEventHandler<HTMLButtonElement>;
|
|
14
|
+
className?: string;
|
|
15
|
+
icon?: IconComponent;
|
|
16
|
+
description?: string;
|
|
17
|
+
withNumber?: boolean;
|
|
18
|
+
labelWordWrap?: boolean;
|
|
19
|
+
};
|
|
20
|
+
export declare const StepsStep: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import"./StepsItem.css";import React from"react";import{Badge}from"../../Badge";import{Text}from"../../Text";import{cnMixFlex}from"../../../mixs/MixFlex";import{cnCanary}from"../../../utils/bem";export var cnStepsStep=cnCanary("StepsItem");var badgeSizeMap={s:"xs",m:"s",l:"s"},descriptionSizeMap={s:"2xs",m:"xs",l:"s"};export var StepsStep=React.forwardRef(function(a,b){var c=a.size,d=a.label,e=a.active,f=void 0!==e&&e,g=a.disabled,h=void 0!==g&&g,i=a.status,j=a.onChange,k=a.number,l=a.icon,m=a.description,n=a.withNumber,o=a.className,p=a.labelWordWrap;return React.createElement("div",{className:cnStepsStep({size:c,active:f,disabled:h,status:i,withIcon:!!l},[o])},React.createElement("button",{ref:b,className:cnStepsStep("Button",[cnMixFlex({flex:"flex",gap:"xs"})]),type:"button",title:d,onClick:function clickHandler(a){f||h||(null===j||void 0===j?void 0:j(a))},disabled:h,tabIndex:h||f?-1:void 0},n&&React.createElement(Badge,{className:cnStepsStep("Badge",{status:i,active:f,disabled:h}),as:"span",iconLeft:l,label:l||null===k||void 0===k?void 0:k.toString(),size:badgeSizeMap[c],form:"round"}),React.createElement("div",{className:cnMixFlex({flex:"flex",gap:"2xs",direction:"column"})},React.createElement(Text,{as:"div",className:cnStepsStep("Label",{wordWrap:p},[cnMixFlex({flex:"flex",gap:"xs"})]),size:c,lineHeight:"m"},d),m&&React.createElement(Text,{className:cnStepsStep("Description"),size:descriptionSizeMap[c],lineHeight:"m"},m))))});
|
|
2
|
+
//# sourceMappingURL=StepsItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StepsItem.js","names":["React","Badge","Text","cnMixFlex","cnCanary","cnStepsStep","badgeSizeMap","s","m","l","descriptionSizeMap","StepsStep","forwardRef","props","ref","size","label","active","disabled","status","onChange","number","icon","description","withNumber","className","labelWordWrap","withIcon","flex","gap","clickHandler","e","toString","direction","wordWrap"],"sources":["../../../../../../src/components/StepsCanary/StepsItem/StepsItem.tsx"],"sourcesContent":["import './StepsItem.css';\n\nimport { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { Badge, BadgePropSize } from '##/components/Badge';\nimport { Text, TextPropSize } from '##/components/Text';\nimport { cnMixFlex } from '##/mixs/MixFlex';\nimport { cnCanary } from '##/utils/bem';\n\nimport { StepItemStatus, StepsPropSize } from '../StepsCanary';\n\nexport const cnStepsStep = cnCanary('StepsItem');\n\ntype Props = {\n size: StepsPropSize;\n label: string;\n number?: number;\n active?: boolean;\n disabled?: boolean;\n status?: StepItemStatus;\n onChange: React.MouseEventHandler<HTMLButtonElement>;\n className?: string;\n icon?: IconComponent;\n description?: string;\n withNumber?: boolean;\n labelWordWrap?: boolean;\n};\n\nconst badgeSizeMap: Record<StepsPropSize, BadgePropSize> = {\n s: 'xs',\n m: 's',\n l: 's',\n};\n\nconst descriptionSizeMap: Record<StepsPropSize, TextPropSize> = {\n s: '2xs',\n m: 'xs',\n l: 's',\n};\n\nexport const StepsStep = React.forwardRef<HTMLButtonElement, Props>(\n (props, ref) => {\n const {\n size,\n label,\n active = false,\n disabled = false,\n status,\n onChange,\n number,\n icon,\n description,\n withNumber,\n className,\n labelWordWrap,\n } = props;\n\n const clickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {\n !active && !disabled && onChange?.(e);\n };\n\n return (\n <div\n className={cnStepsStep(\n { size, active, disabled, status, withIcon: !!icon },\n [className],\n )}\n >\n <button\n ref={ref}\n className={cnStepsStep('Button', [\n cnMixFlex({ flex: 'flex', gap: 'xs' }),\n ])}\n type=\"button\"\n title={label}\n onClick={clickHandler}\n disabled={disabled}\n tabIndex={disabled || active ? -1 : undefined}\n >\n {withNumber && (\n <Badge\n className={cnStepsStep('Badge', { status, active, disabled })}\n as=\"span\"\n iconLeft={icon}\n label={icon ? undefined : number?.toString()}\n size={badgeSizeMap[size]}\n form=\"round\"\n />\n )}\n <div\n className={cnMixFlex({\n flex: 'flex',\n gap: '2xs',\n direction: 'column',\n })}\n >\n <Text\n as=\"div\"\n className={cnStepsStep('Label', { wordWrap: labelWordWrap }, [\n cnMixFlex({ flex: 'flex', gap: 'xs' }),\n ])}\n size={size}\n lineHeight=\"m\"\n >\n {label}\n </Text>\n {description && (\n <Text\n className={cnStepsStep('Description')}\n size={descriptionSizeMap[size]}\n lineHeight=\"m\"\n >\n {description}\n </Text>\n )}\n </div>\n </button>\n </div>\n );\n },\n);\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './StepsItem';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../../src/components/StepsCanary/StepsItem/index.ts"],"sourcesContent":["export * from './StepsItem';\n"],"mappings":"AAAA"}
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { StepsItemDefault, StepsPropGetItemDescription, StepsPropGetItemDisabled, StepsPropGetItemIcon, StepsPropGetItemLabel, StepsPropGetItemStatus, StepsProps } from './types';
|
|
3
|
+
export declare function withDefaultGetters(props: StepsProps): {
|
|
4
|
+
getItemLabel: StepsPropGetItemLabel<StepsItemDefault>;
|
|
5
|
+
getItemDisabled: StepsPropGetItemDisabled<StepsItemDefault>;
|
|
6
|
+
getItemStatus: StepsPropGetItemStatus<StepsItemDefault>;
|
|
7
|
+
getItemIcon: StepsPropGetItemIcon<StepsItemDefault>;
|
|
8
|
+
getItemDescription: StepsPropGetItemDescription<StepsItemDefault>;
|
|
9
|
+
items: StepsItemDefault[];
|
|
10
|
+
value: StepsItemDefault;
|
|
11
|
+
onChange: import("./types").StepsPropOnChange<StepsItemDefault>;
|
|
12
|
+
size?: import("./types").StepsPropSize | undefined;
|
|
13
|
+
className?: string | undefined;
|
|
14
|
+
withNumber?: boolean | undefined;
|
|
15
|
+
fitMode?: "scroll" | "scrollWithButtons" | undefined;
|
|
16
|
+
labelWordWrap?: boolean | undefined;
|
|
17
|
+
defaultChecked?: boolean | undefined;
|
|
18
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
19
|
+
suppressContentEditableWarning?: boolean | undefined;
|
|
20
|
+
suppressHydrationWarning?: boolean | undefined;
|
|
21
|
+
accessKey?: string | undefined;
|
|
22
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
|
|
23
|
+
contextMenu?: string | undefined;
|
|
24
|
+
dir?: string | undefined;
|
|
25
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
26
|
+
hidden?: boolean | undefined;
|
|
27
|
+
id?: string | undefined;
|
|
28
|
+
lang?: string | undefined;
|
|
29
|
+
placeholder?: string | undefined;
|
|
30
|
+
slot?: string | undefined;
|
|
31
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
32
|
+
style?: import("react").CSSProperties | undefined;
|
|
33
|
+
tabIndex?: number | undefined;
|
|
34
|
+
title?: string | undefined;
|
|
35
|
+
translate?: "yes" | "no" | undefined;
|
|
36
|
+
radioGroup?: string | undefined;
|
|
37
|
+
role?: import("react").AriaRole | undefined;
|
|
38
|
+
about?: string | undefined;
|
|
39
|
+
datatype?: string | undefined;
|
|
40
|
+
inlist?: any;
|
|
41
|
+
prefix?: string | undefined;
|
|
42
|
+
property?: string | undefined;
|
|
43
|
+
resource?: string | undefined;
|
|
44
|
+
typeof?: string | undefined;
|
|
45
|
+
vocab?: string | undefined;
|
|
46
|
+
autoCapitalize?: string | undefined;
|
|
47
|
+
autoCorrect?: string | undefined;
|
|
48
|
+
autoSave?: string | undefined;
|
|
49
|
+
color?: string | undefined;
|
|
50
|
+
itemProp?: string | undefined;
|
|
51
|
+
itemScope?: boolean | undefined;
|
|
52
|
+
itemType?: string | undefined;
|
|
53
|
+
itemID?: string | undefined;
|
|
54
|
+
itemRef?: string | undefined;
|
|
55
|
+
results?: number | undefined;
|
|
56
|
+
security?: string | undefined;
|
|
57
|
+
unselectable?: "on" | "off" | undefined;
|
|
58
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
59
|
+
is?: string | undefined;
|
|
60
|
+
'aria-activedescendant'?: string | undefined;
|
|
61
|
+
'aria-atomic'?: (boolean | "true" | "false") | undefined;
|
|
62
|
+
'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
|
|
63
|
+
'aria-busy'?: (boolean | "true" | "false") | undefined;
|
|
64
|
+
'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
65
|
+
'aria-colcount'?: number | undefined;
|
|
66
|
+
'aria-colindex'?: number | undefined;
|
|
67
|
+
'aria-colspan'?: number | undefined;
|
|
68
|
+
'aria-controls'?: string | undefined;
|
|
69
|
+
'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
70
|
+
'aria-describedby'?: string | undefined;
|
|
71
|
+
'aria-details'?: string | undefined;
|
|
72
|
+
'aria-disabled'?: (boolean | "true" | "false") | undefined;
|
|
73
|
+
'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
74
|
+
'aria-errormessage'?: string | undefined;
|
|
75
|
+
'aria-expanded'?: (boolean | "true" | "false") | undefined;
|
|
76
|
+
'aria-flowto'?: string | undefined;
|
|
77
|
+
'aria-grabbed'?: (boolean | "true" | "false") | undefined;
|
|
78
|
+
'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
79
|
+
'aria-hidden'?: (boolean | "true" | "false") | undefined;
|
|
80
|
+
'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
81
|
+
'aria-keyshortcuts'?: string | undefined;
|
|
82
|
+
'aria-label'?: string | undefined;
|
|
83
|
+
'aria-labelledby'?: string | undefined;
|
|
84
|
+
'aria-level'?: number | undefined;
|
|
85
|
+
'aria-live'?: "off" | "assertive" | "polite" | undefined;
|
|
86
|
+
'aria-modal'?: (boolean | "true" | "false") | undefined;
|
|
87
|
+
'aria-multiline'?: (boolean | "true" | "false") | undefined;
|
|
88
|
+
'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
|
|
89
|
+
'aria-orientation'?: "horizontal" | "vertical" | undefined;
|
|
90
|
+
'aria-owns'?: string | undefined;
|
|
91
|
+
'aria-placeholder'?: string | undefined;
|
|
92
|
+
'aria-posinset'?: number | undefined;
|
|
93
|
+
'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
|
|
94
|
+
'aria-readonly'?: (boolean | "true" | "false") | undefined;
|
|
95
|
+
'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
96
|
+
'aria-required'?: (boolean | "true" | "false") | undefined;
|
|
97
|
+
'aria-roledescription'?: string | undefined;
|
|
98
|
+
'aria-rowcount'?: number | undefined;
|
|
99
|
+
'aria-rowindex'?: number | undefined;
|
|
100
|
+
'aria-rowspan'?: number | undefined;
|
|
101
|
+
'aria-selected'?: (boolean | "true" | "false") | undefined;
|
|
102
|
+
'aria-setsize'?: number | undefined;
|
|
103
|
+
'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
104
|
+
'aria-valuemax'?: number | undefined;
|
|
105
|
+
'aria-valuemin'?: number | undefined;
|
|
106
|
+
'aria-valuenow'?: number | undefined;
|
|
107
|
+
'aria-valuetext'?: string | undefined;
|
|
108
|
+
children?: import("react").ReactNode;
|
|
109
|
+
dangerouslySetInnerHTML?: {
|
|
110
|
+
__html: string;
|
|
111
|
+
} | undefined;
|
|
112
|
+
onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
113
|
+
onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
114
|
+
onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
115
|
+
onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
116
|
+
onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
117
|
+
onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
118
|
+
onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
119
|
+
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
120
|
+
onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
121
|
+
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
122
|
+
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
123
|
+
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
124
|
+
onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
125
|
+
onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
126
|
+
onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
127
|
+
onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
128
|
+
onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
129
|
+
onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
130
|
+
onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
131
|
+
onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
132
|
+
onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
133
|
+
onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
134
|
+
onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
135
|
+
onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
136
|
+
onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
137
|
+
onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
138
|
+
onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
139
|
+
onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
140
|
+
onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
141
|
+
onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
142
|
+
onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
143
|
+
onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
144
|
+
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
145
|
+
onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
146
|
+
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
147
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
148
|
+
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
149
|
+
onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
150
|
+
onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
151
|
+
onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
152
|
+
onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
153
|
+
onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
154
|
+
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
155
|
+
onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
156
|
+
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
157
|
+
onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
158
|
+
onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
159
|
+
onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
160
|
+
onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
161
|
+
onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
162
|
+
onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
163
|
+
onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
164
|
+
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
165
|
+
onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
166
|
+
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
167
|
+
onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
168
|
+
onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
169
|
+
onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
170
|
+
onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
171
|
+
onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
172
|
+
onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
173
|
+
onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
174
|
+
onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
175
|
+
onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
176
|
+
onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
177
|
+
onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
178
|
+
onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
179
|
+
onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
180
|
+
onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
181
|
+
onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
182
|
+
onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
183
|
+
onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
184
|
+
onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
185
|
+
onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
186
|
+
onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
187
|
+
onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
188
|
+
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
189
|
+
onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
190
|
+
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
191
|
+
onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
192
|
+
onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
193
|
+
onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
194
|
+
onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
195
|
+
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
196
|
+
onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
197
|
+
onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
198
|
+
onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
199
|
+
onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
200
|
+
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
201
|
+
onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
202
|
+
onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
203
|
+
onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
204
|
+
onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
205
|
+
onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
206
|
+
onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
207
|
+
onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
208
|
+
onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
209
|
+
onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
210
|
+
onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
211
|
+
onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
212
|
+
onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
213
|
+
onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
214
|
+
onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
215
|
+
onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
216
|
+
onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
217
|
+
onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
218
|
+
onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
219
|
+
onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
220
|
+
onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
221
|
+
onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
222
|
+
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
223
|
+
onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
224
|
+
onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
225
|
+
onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
226
|
+
onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
227
|
+
onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
228
|
+
onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
229
|
+
onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
230
|
+
onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
231
|
+
onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
232
|
+
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
233
|
+
onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
234
|
+
onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
235
|
+
onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
236
|
+
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
237
|
+
onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
238
|
+
onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
239
|
+
onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
240
|
+
onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
241
|
+
onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
242
|
+
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
243
|
+
onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
244
|
+
onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
245
|
+
onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
246
|
+
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
247
|
+
onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
248
|
+
onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
249
|
+
onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
250
|
+
onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
251
|
+
onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
252
|
+
onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
253
|
+
onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
254
|
+
onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
255
|
+
onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
256
|
+
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
257
|
+
onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
258
|
+
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
259
|
+
onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
260
|
+
onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
261
|
+
onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
262
|
+
onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
263
|
+
onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
264
|
+
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
265
|
+
onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
266
|
+
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
267
|
+
onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
268
|
+
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
269
|
+
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
270
|
+
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
271
|
+
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
|
272
|
+
key?: import("react").Key | null | undefined;
|
|
273
|
+
};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}var defaultGetItemLabel=function(a){return a.label},defaultGetItemStatus=function(a){return a.status},defaultGetItemDisabled=function(a){return a.disabled},defaultGetItemIcon=function(a){return a.icon},defaultGetItemDescription=function(a){return a.description};export function withDefaultGetters(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemDisabled:a.getItemDisabled||defaultGetItemDisabled,getItemStatus:a.getItemStatus||defaultGetItemStatus,getItemIcon:a.getItemIcon||defaultGetItemIcon,getItemDescription:a.getItemDescription||defaultGetItemDescription})}
|
|
2
|
+
//# sourceMappingURL=helper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helper.js","names":["defaultGetItemLabel","item","label","defaultGetItemStatus","status","defaultGetItemDisabled","disabled","defaultGetItemIcon","icon","defaultGetItemDescription","description","withDefaultGetters","props","getItemLabel","getItemDisabled","getItemStatus","getItemIcon","getItemDescription"],"sources":["../../../../../src/components/StepsCanary/helper.ts"],"sourcesContent":["import {\n StepsItemDefault,\n StepsPropGetItemDescription,\n StepsPropGetItemDisabled,\n StepsPropGetItemIcon,\n StepsPropGetItemLabel,\n StepsPropGetItemStatus,\n StepsProps,\n} from './types';\n\nconst defaultGetItemLabel: StepsPropGetItemLabel<StepsItemDefault> = (item) =>\n item.label;\nconst defaultGetItemStatus: StepsPropGetItemStatus<StepsItemDefault> = (item) =>\n item.status;\nconst defaultGetItemDisabled: StepsPropGetItemDisabled<StepsItemDefault> = (\n item,\n) => item.disabled;\nconst defaultGetItemIcon: StepsPropGetItemIcon<StepsItemDefault> = (item) =>\n item.icon;\nconst defaultGetItemDescription: StepsPropGetItemDescription<\n StepsItemDefault\n> = (item) => item.description;\n\nexport function withDefaultGetters(props: StepsProps) {\n return {\n ...props,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemDisabled: props.getItemDisabled || defaultGetItemDisabled,\n getItemStatus: props.getItemStatus || defaultGetItemStatus,\n getItemIcon: props.getItemIcon || defaultGetItemIcon,\n getItemDescription: props.getItemDescription || defaultGetItemDescription,\n };\n}\n"],"mappings":"wqBAUMA,oBAA4D,CAAG,SAACC,CAAD,QACnEA,EAAI,CAACC,KAD8D,C,CAE/DC,oBAA8D,CAAG,SAACF,CAAD,QACrEA,EAAI,CAACG,MADgE,C,CAEjEC,sBAAkE,CAAG,SACzEJ,CADyE,QAEtEA,EAAI,CAACK,QAFiE,C,CAGrEC,kBAA0D,CAAG,SAACN,CAAD,QACjEA,EAAI,CAACO,IAD4D,C,CAE7DC,yBAEL,CAAG,SAACR,CAAD,QAAUA,EAAI,CAACS,WAAf,C,CAEJ,MAAO,SAASC,mBAAT,CAA4BC,CAA5B,CAA+C,CACpD,sCACKA,CADL,MAEEC,YAAY,CAAED,CAAK,CAACC,YAAN,EAAsBb,mBAFtC,CAGEc,eAAe,CAAEF,CAAK,CAACE,eAAN,EAAyBT,sBAH5C,CAIEU,aAAa,CAAEH,CAAK,CAACG,aAAN,EAAuBZ,oBAJxC,CAKEa,WAAW,CAAEJ,CAAK,CAACI,WAAN,EAAqBT,kBALpC,CAMEU,kBAAkB,CAAEL,CAAK,CAACK,kBAAN,EAA4BR,yBANlD,EAQD"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './StepsCanary';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/StepsCanary/index.ts"],"sourcesContent":["export * from './StepsCanary';\n"],"mappings":"AAAA"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IconComponent } from '@consta/icons/Icon';
|
|
3
|
+
import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
|
|
4
|
+
export declare type StepsPropSize = 's' | 'm' | 'l';
|
|
5
|
+
export declare type StepsPropOnChange<ITEM> = (value: ITEM, props: {
|
|
6
|
+
e: React.MouseEvent;
|
|
7
|
+
}) => void;
|
|
8
|
+
export declare type StepItemStatus = 'resolved' | 'error';
|
|
9
|
+
export declare type StepsPropGetItemLabel<ITEM> = (item: ITEM) => string;
|
|
10
|
+
export declare type StepsPropGetItemDescription<ITEM> = (item: ITEM) => string | undefined;
|
|
11
|
+
export declare type StepsPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
|
|
12
|
+
export declare type StepsPropGetItemStatus<ITEM> = (item: ITEM) => StepItemStatus | undefined;
|
|
13
|
+
export declare type StepsPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
|
|
14
|
+
export declare type StepsItemDefault = {
|
|
15
|
+
label: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
status?: StepItemStatus;
|
|
19
|
+
icon?: IconComponent;
|
|
20
|
+
};
|
|
21
|
+
export declare type StepsProps<ITEM = StepsItemDefault> = PropsWithHTMLAttributesAndRef<{
|
|
22
|
+
items: ITEM[];
|
|
23
|
+
value: ITEM;
|
|
24
|
+
onChange: StepsPropOnChange<ITEM>;
|
|
25
|
+
getItemLabel?: StepsPropGetItemLabel<ITEM>;
|
|
26
|
+
getItemDisabled?: StepsPropGetItemDisabled<ITEM>;
|
|
27
|
+
getItemStatus?: StepsPropGetItemStatus<ITEM>;
|
|
28
|
+
getItemDescription?: StepsPropGetItemDescription<ITEM>;
|
|
29
|
+
getItemIcon?: StepsPropGetItemIcon<ITEM>;
|
|
30
|
+
size?: StepsPropSize;
|
|
31
|
+
className?: string;
|
|
32
|
+
withNumber?: boolean;
|
|
33
|
+
fitMode?: 'scroll' | 'scrollWithButtons';
|
|
34
|
+
labelWordWrap?: boolean;
|
|
35
|
+
}, HTMLDivElement> & (ITEM extends {
|
|
36
|
+
label: StepsItemDefault['label'];
|
|
37
|
+
} ? {} : {
|
|
38
|
+
getItemLabel: StepsPropGetItemLabel<ITEM>;
|
|
39
|
+
});
|
|
40
|
+
export declare type StepsComponent = <ITEM>(props: StepsProps<ITEM>) => React.ReactElement | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/components/StepsCanary/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport type StepsPropSize = 's' | 'm' | 'l';\n\nexport type StepsPropOnChange<ITEM> = (\n value: ITEM,\n props: {\n e: React.MouseEvent;\n },\n) => void;\n\nexport type StepItemStatus = 'resolved' | 'error';\n\nexport type StepsPropGetItemLabel<ITEM> = (item: ITEM) => string;\n\nexport type StepsPropGetItemDescription<ITEM> = (\n item: ITEM,\n) => string | undefined;\n\nexport type StepsPropGetItemDisabled<ITEM> = (\n item: ITEM,\n) => boolean | undefined;\n\nexport type StepsPropGetItemStatus<ITEM> = (\n item: ITEM,\n) => StepItemStatus | undefined;\n\nexport type StepsPropGetItemIcon<ITEM> = (\n item: ITEM,\n) => IconComponent | undefined;\n\nexport type StepsItemDefault = {\n label: string;\n description?: string;\n disabled?: boolean;\n status?: StepItemStatus;\n icon?: IconComponent;\n};\n\nexport type StepsProps<ITEM = StepsItemDefault> = PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n value: ITEM;\n onChange: StepsPropOnChange<ITEM>;\n getItemLabel?: StepsPropGetItemLabel<ITEM>;\n getItemDisabled?: StepsPropGetItemDisabled<ITEM>;\n getItemStatus?: StepsPropGetItemStatus<ITEM>;\n getItemDescription?: StepsPropGetItemDescription<ITEM>;\n getItemIcon?: StepsPropGetItemIcon<ITEM>;\n size?: StepsPropSize;\n className?: string;\n withNumber?: boolean;\n fitMode?: 'scroll' | 'scrollWithButtons';\n labelWordWrap?: boolean;\n },\n HTMLDivElement\n> &\n (ITEM extends { label: StepsItemDefault['label'] }\n ? {}\n : {\n getItemLabel: StepsPropGetItemLabel<ITEM>;\n });\n\nexport type StepsComponent = <ITEM>(\n props: StepsProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":""}
|
|
@@ -3,5 +3,5 @@ declare type UseScrollElementsResult = {
|
|
|
3
3
|
refs: React.RefObject<HTMLElement>[];
|
|
4
4
|
scrollTo: (index: number) => void;
|
|
5
5
|
};
|
|
6
|
-
export declare function useScrollElements<ITEM>(items: ITEM[]): UseScrollElementsResult;
|
|
6
|
+
export declare function useScrollElements<ITEM>(items: ITEM[], containerRef?: React.RefObject<HTMLElement>): UseScrollElementsResult;
|
|
7
7
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createRef,useMemo}from"react";import{useDebounce}from"../useDebounce";export function useScrollElements(a){var
|
|
1
|
+
import{createRef,useMemo}from"react";import{useDebounce}from"../useDebounce";export function useScrollElements(a,b){var c=useMemo(function(){for(var b=[],c=0;c<a.length;c++)b[c]=createRef();return b},[a]),d=useDebounce(function(a){var d,e=c[Math.max(a,0)],f=(null===b||void 0===b?void 0:b.current)||(null===e||void 0===e||null===(d=e.current)||void 0===d?void 0:d.parentElement);if(null!==e&&void 0!==e&&e.current&&f){var g="relative"===getComputedStyle(f).position?0:f.offsetLeft,h=e.current.offsetLeft-g;0>=a?h=0:a==c.length-1&&(h=f.scrollWidth),f.scrollTo({left:h,behavior:"smooth"})}},20);return{refs:c,scrollTo:d}}
|
|
2
2
|
//# sourceMappingURL=useScrollElements.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollElements.js","names":["createRef","useMemo","useDebounce","useScrollElements","items","refs","refArray","i","length","scrollTo","index","currentRef","Math","max","container","current","parentElement","defaultPadding","getComputedStyle","position","offsetLeft","scrollLeft","scrollWidth","left","behavior"],"sources":["../../../../../src/hooks/useScrollElements/useScrollElements.tsx"],"sourcesContent":["import React, { createRef, useMemo } from 'react';\n\nimport { useDebounce } from '##/hooks/useDebounce';\n\ntype UseScrollElementsResult = {\n refs: React.RefObject<HTMLElement>[];\n scrollTo: (index: number) => void;\n};\n\nexport function useScrollElements<ITEM>(\n items: ITEM[],\n): UseScrollElementsResult {\n const refs = useMemo(() => {\n const refArray: React.RefObject<HTMLElement>[] = [];\n\n for (let i = 0; i < items.length; i++) {\n refArray[i] = createRef<HTMLElement>();\n }\n\n return refArray;\n }, [items]);\n\n const scrollTo = useDebounce((index: number) => {\n const currentRef = refs[Math.max(index, 0)];\n const container
|
|
1
|
+
{"version":3,"file":"useScrollElements.js","names":["createRef","useMemo","useDebounce","useScrollElements","items","containerRef","refs","refArray","i","length","scrollTo","index","currentRef","Math","max","container","current","parentElement","defaultPadding","getComputedStyle","position","offsetLeft","scrollLeft","scrollWidth","left","behavior"],"sources":["../../../../../src/hooks/useScrollElements/useScrollElements.tsx"],"sourcesContent":["import React, { createRef, useMemo } from 'react';\n\nimport { useDebounce } from '##/hooks/useDebounce';\n\ntype UseScrollElementsResult = {\n refs: React.RefObject<HTMLElement>[];\n scrollTo: (index: number) => void;\n};\n\nexport function useScrollElements<ITEM>(\n items: ITEM[],\n containerRef?: React.RefObject<HTMLElement>,\n): UseScrollElementsResult {\n const refs = useMemo(() => {\n const refArray: React.RefObject<HTMLElement>[] = [];\n\n for (let i = 0; i < items.length; i++) {\n refArray[i] = createRef<HTMLElement>();\n }\n\n return refArray;\n }, [items]);\n\n const scrollTo = useDebounce((index: number) => {\n const currentRef = refs[Math.max(index, 0)];\n const container =\n containerRef?.current || currentRef?.current?.parentElement;\n\n if (currentRef?.current && container) {\n const defaultPadding =\n getComputedStyle(container).position !== 'relative'\n ? container.offsetLeft\n : 0;\n\n let scrollLeft = currentRef.current.offsetLeft - defaultPadding;\n\n if (index <= 0) {\n scrollLeft = 0;\n } else if (index === refs.length - 1) {\n scrollLeft = container.scrollWidth;\n }\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n });\n }\n }, 20);\n\n return {\n refs,\n scrollTo,\n };\n}\n"],"mappings":"AAAA,OAAgBA,SAAhB,CAA2BC,OAA3B,KAA0C,OAA1C,CAEA,OAASC,WAAT,sBAOA,MAAO,SAASC,kBAAT,CACLC,CADK,CAELC,CAFK,CAGoB,IACnBC,EAAI,CAAGL,OAAO,CAAC,UAAM,CAGzB,OAFMM,EAAwC,CAAG,EAEjD,CAASC,CAAC,CAAG,CAAb,CAAgBA,CAAC,CAAGJ,CAAK,CAACK,MAA1B,CAAkCD,CAAC,EAAnC,CACED,CAAQ,CAACC,CAAD,CAAR,CAAcR,SAAS,EAAvB,CAGF,MAAOO,EACR,CARmB,CAQjB,CAACH,CAAD,CARiB,CADK,CAWnBM,CAAQ,CAAGR,WAAW,CAAC,SAACS,CAAD,CAAmB,OACxCC,CAAU,CAAGN,CAAI,CAACO,IAAI,CAACC,GAAL,CAASH,CAAT,CAAgB,CAAhB,CAAD,CADuB,CAExCI,CAAS,CACb,QAAAV,CAAY,WAAZA,CAAA,QAAAA,CAAY,CAAEW,OAAd,WAAyBJ,CAAzB,WAAyBA,CAAzB,YAAyBA,CAAU,CAAEI,OAArC,qBAAyB,EAAqBC,aAA9C,CAH4C,CAK9C,GAAI,OAAAL,CAAU,WAAVA,CAAA,EAAAA,CAAU,CAAEI,OAAZ,EAAuBD,CAA3B,CAAsC,IAC9BG,EAAc,CACuB,UAAzC,GAAAC,gBAAgB,CAACJ,CAAD,CAAhB,CAA4BK,QAA5B,CAEI,CAFJ,CACIL,CAAS,CAACM,UAHoB,CAMhCC,CAAU,CAAGV,CAAU,CAACI,OAAX,CAAmBK,UAAnB,CAAgCH,CANb,CAQvB,CAAT,EAAAP,CARgC,CASlCW,CAAU,CAAG,CATqB,CAUzBX,CAAK,EAAKL,CAAI,CAACG,MAAL,CAAc,CAVC,GAWlCa,CAAU,CAAGP,CAAS,CAACQ,WAXW,EAcpCR,CAAS,CAACL,QAAV,CAAmB,CACjBc,IAAI,CAAEF,CADW,CAEjBG,QAAQ,CAAE,QAFO,CAAnB,CAID,CACF,CAxB2B,CAwBzB,EAxByB,CAXH,CAqCzB,MAAO,CACLnB,IAAI,CAAJA,CADK,CAELI,QAAQ,CAARA,CAFK,CAIR"}
|