@doist/reactist 9.2.0-beta.8 → 10.0.0-beta.12

package/lib/new-components/text/text.d.ts

@@ -1,14 +1,47 @@
 import * as React from 'react';
-import { ComponentTypes } from '../type-helpers';
 import type { Tone } from '../common-types';
+import type { BoxProps } from '../box';
 declare type TextProps = {
-    component?: ComponentTypes;
     children: React.ReactNode;
-    size?: 'xsmall' | 'small' | 'standard' | 'large' | 'xlarge';
-    weight?: 'regular' | 'medium' | 'strong';
+    /**
+     * The size of the text.
+     *
+     * The supported values, from smaller size to larger size, are:
+     * 'caption', 'copy', 'body', and 'subtitle'
+     *
+     * @default 'body'
+     */
+    size?: 'caption' | 'copy' | 'body' | 'subtitle';
+    /**
+     * The weight of the text font.
+     *
+     * @default 'regular'
+     */
+    weight?: 'regular' | 'semibold' | 'bold';
+    /**
+     * The tone (semantic color) of the text.
+     *
+     * @default 'normal'
+     */
     tone?: Tone;
+    /**
+     * Used to truncate the text to a given number of lines.
+     *
+     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was
+     * truncated. If the text fits without it being truncated, no ellipsis is added.
+     *
+     * By default, the text is not truncated at all, no matter how many lines it takes to render it.
+     *
+     * @default undefined
+     */
     lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5';
+    /**
+     * How to align the text horizontally.
+     *
+     * @default 'start'
+     */
+    align?: BoxProps['textAlign'];
 };
-declare const Text: import("../type-helpers").ForwardRefComponentWithAs<TextProps, React.ElementType<any>>;
+declare const Text: import("../../utils/polymorphism").PolymorphicComponent<"div", TextProps, "obfuscateClassName">;
 export type { TextProps };
 export { Text };

package/lib/new-components/text/text.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),r=require("../type-helpers.js"),l=require("../responsive-props.js"),s=require("../box/box.js"),a=require("./text.module.css.js");exports.Text=r.forwardRefWithAs((function(r,n){var o=r.component,i=void 0===o?"span":o,u=r.size,p=void 0===u?"standard":u,d=r.weight,m=void 0===d?"regular":d,c=r.tone,g=void 0===c?"normal":c,f=r.children,v=r.lineClamp,h=e.objectWithoutPropertiesLoose(r,["component","size","weight","tone","children","lineClamp"]),j="string"==typeof v?parseInt(v,10)>1:(v||0)>1;return t.createElement(s.Box,Object.assign({},h,{component:i,className:[a.default.text,"standard"!==p?l.getClassNames(a.default,"size",p):null,"regular"!==m?l.getClassNames(a.default,"weight",m):null,"normal"!==g?l.getClassNames(a.default,"tone",g):null,j?a.default.lineClamp:null,v?l.getClassNames(a.default,"line-clamp",v.toString()):null],ref:n}),f)}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),s=require("../responsive-props.js"),a=require("../box/box.js"),i=require("./text.module.css.js"),r=["as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName"];exports.Text=t.polymorphicComponent((function(t,o){var n=t.as,u=t.size,p=void 0===u?"body":u,m=t.weight,d=void 0===m?"regular":m,g=t.tone,c=void 0===g?"normal":g,x=t.align,C=t.children,f=t.lineClamp,b=t.exceptionallySetClassName,h=e.objectWithoutPropertiesLoose(t,r),v="string"==typeof f?Number(f)>1:(null!=f?f:1)>1;return l.createElement(a.Box,Object.assign({},h,{as:n,className:[b,i.default.text,"body"!==p?s.getClassNames(i.default,"size",p):null,"regular"!==d?s.getClassNames(i.default,"weight",d):null,"normal"!==c?s.getClassNames(i.default,"tone",c):null,v?i.default.lineClampMultipleLines:null,f?s.getClassNames(i.default,"lineClamp",f.toString()):null],textAlign:x,paddingRight:f?"xsmall":void 0,ref:o}),C)}));
 //# sourceMappingURL=text.js.map

package/lib/new-components/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../src/new-components/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\n\nimport { ComponentTypes, forwardRefWithAs } from '../type-helpers'\nimport type { Tone } from '../common-types'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    component?: ComponentTypes\n    children: React.ReactNode\n    size?: 'xsmall' | 'small' | 'standard' | 'large' | 'xlarge'\n    weight?: 'regular' | 'medium' | 'strong'\n    tone?: Tone\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n}\n\nconst Text = forwardRefWithAs<TextProps>(function Text(\n    {\n        component = 'span',\n        size = 'standard',\n        weight = 'regular',\n        tone = 'normal',\n        children,\n        lineClamp,\n        ...rest\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? parseInt(lineClamp, 10) > 1 : (lineClamp || 0) > 1\n\n    return (\n        <Box\n            {...rest}\n            component={component}\n            className={[\n                styles.text,\n                size !== 'standard' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClamp : null,\n                lineClamp ? getClassNames(styles, 'line-clamp', lineClamp.toString()) : null,\n            ]}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["forwardRefWithAs","ref","component","size","weight","tone","children","lineClamp","rest","lineClampMultipleLines","parseInt","React","Box","className","styles","text","getClassNames","toString"],"mappings":"kSAkBaA,oBAA4B,WAUrCC,WARIC,UAAAA,aAAY,aACZC,KAAAA,aAAO,iBACPC,OAAAA,aAAS,gBACTC,KAAAA,aAAO,WACPC,IAAAA,SACAC,IAAAA,UACGC,gGAIDC,EACmB,iBAAdF,EAAyBG,SAASH,EAAW,IAAM,GAAKA,GAAa,GAAK,SAGjFI,gBAACC,uBACOJ,GACJN,UAAWA,EACXW,UAAW,CACPC,UAAOC,KACE,aAATZ,EAAsBa,gBAAcF,UAAQ,OAAQX,GAAQ,KACjD,YAAXC,EAAuBY,gBAAcF,UAAQ,SAAUV,GAAU,KACxD,WAATC,EAAoBW,gBAAcF,UAAQ,OAAQT,GAAQ,KAC1DI,EAAyBK,UAAOP,UAAY,KAC5CA,EAAYS,gBAAcF,UAAQ,aAAcP,EAAUU,YAAc,MAE5EhB,IAAKA,IAEJK"}
+{"version":3,"file":"text.js","sources":["../../../src/new-components/text/text.tsx"],"sourcesContent":["import * as React from 'react'\nimport { getClassNames } from '../responsive-props'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../../utils/polymorphism'\n\nimport type { Tone } from '../common-types'\nimport type { BoxProps } from '../box'\n\nimport styles from './text.module.css'\n\ntype TextProps = {\n    children: React.ReactNode\n    /**\n     * The size of the text.\n     *\n     * The supported values, from smaller size to larger size, are:\n     * 'caption', 'copy', 'body', and 'subtitle'\n     *\n     * @default 'body'\n     */\n    size?: 'caption' | 'copy' | 'body' | 'subtitle'\n    /**\n     * The weight of the text font.\n     *\n     * @default 'regular'\n     */\n    weight?: 'regular' | 'semibold' | 'bold'\n    /**\n     * The tone (semantic color) of the text.\n     *\n     * @default 'normal'\n     */\n    tone?: Tone\n    /**\n     * Used to truncate the text to a given number of lines.\n     *\n     * It will add an ellipsis (`…`) to the text at the end of the last line, only if the text was\n     * truncated. If the text fits without it being truncated, no ellipsis is added.\n     *\n     * By default, the text is not truncated at all, no matter how many lines it takes to render it.\n     *\n     * @default undefined\n     */\n    lineClamp?: 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'\n    /**\n     * How to align the text horizontally.\n     *\n     * @default 'start'\n     */\n    align?: BoxProps['textAlign']\n}\n\nconst Text = polymorphicComponent<'div', TextProps>(function Text(\n    {\n        as,\n        size = 'body',\n        weight = 'regular',\n        tone = 'normal',\n        align,\n        children,\n        lineClamp,\n        exceptionallySetClassName,\n        ...props\n    },\n    ref,\n) {\n    const lineClampMultipleLines =\n        typeof lineClamp === 'string' ? Number(lineClamp) > 1 : (lineClamp ?? 1) > 1\n\n    return (\n        <Box\n            {...props}\n            as={as}\n            className={[\n                exceptionallySetClassName,\n                styles.text,\n                size !== 'body' ? getClassNames(styles, 'size', size) : null,\n                weight !== 'regular' ? getClassNames(styles, 'weight', weight) : null,\n                tone !== 'normal' ? getClassNames(styles, 'tone', tone) : null,\n                lineClampMultipleLines ? styles.lineClampMultipleLines : null,\n                lineClamp ? getClassNames(styles, 'lineClamp', lineClamp.toString()) : null,\n            ]}\n            textAlign={align}\n            // Prevents emojis from being cut-off\n            // See https://github.com/Doist/reactist/pull/528\n            paddingRight={lineClamp ? 'xsmall' : undefined}\n            ref={ref}\n        >\n            {children}\n        </Box>\n    )\n})\n\nexport type { TextProps }\nexport { Text }\n"],"names":["polymorphicComponent","ref","as","size","weight","tone","align","children","lineClamp","exceptionallySetClassName","props","lineClampMultipleLines","Number","React","Box","className","styles","text","getClassNames","toString","textAlign","paddingRight","undefined"],"mappings":"sYAoDaA,wBAAuC,WAYhDC,OAVIC,IAAAA,OACAC,KAAAA,aAAO,aACPC,OAAAA,aAAS,gBACTC,KAAAA,aAAO,WACPC,IAAAA,MACAC,IAAAA,SACAC,IAAAA,UACAC,IAAAA,0BACGC,sCAIDC,EACmB,iBAAdH,EAAyBI,OAAOJ,GAAa,GAAKA,MAAAA,EAAAA,EAAa,GAAK,SAG3EK,gBAACC,uBACOJ,GACJR,GAAIA,EACJa,UAAW,CACPN,EACAO,UAAOC,KACE,SAATd,EAAkBe,gBAAcF,UAAQ,OAAQb,GAAQ,KAC7C,YAAXC,EAAuBc,gBAAcF,UAAQ,SAAUZ,GAAU,KACxD,WAATC,EAAoBa,gBAAcF,UAAQ,OAAQX,GAAQ,KAC1DM,EAAyBK,UAAOL,uBAAyB,KACzDH,EAAYU,gBAAcF,UAAQ,YAAaR,EAAUW,YAAc,MAE3EC,UAAWd,EAGXe,aAAcb,EAAY,cAAWc,EACrCrB,IAAKA,IAEJM"}

package/lib/new-components/text/text.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={text:"e25b6eac","size-xsmall":"_7be564c9","size-small":"_0b65f3be","size-large":"_148c266b","size-xlarge":"efa6a189","weight-medium":"a1ce91c1","weight-strong":"_615a6cf6","tone-secondary":"e1348c0a","tone-danger":"f2471c06","line-clamp-1":"_8f257fa0",lineClamp:"b219e836","line-clamp-2":"d1379189","line-clamp-3":"edc9a040","line-clamp-4":"d463b64b","line-clamp-5":"_4feee537"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={text:"c12d1277","size-caption":"c88e1204","size-copy":"_426d67ec","size-subtitle":"f978d6c7","weight-semibold":"_0c31eccd","weight-bold":"aba17bdd","tone-secondary":"_2767b43d","tone-danger":"e8ae531e",lineClampMultipleLines:"dc839422","lineClamp-1":"e2d23135","lineClamp-2":"_7c778b7e","lineClamp-3":"_5ff41166","lineClamp-4":"b7a4998e","lineClamp-5":"_6a7f8803"};
 //# sourceMappingURL=text.module.css.js.map

package/lib/new-components/text/text.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/text-area/text-area.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { BaseFieldProps } from '../base-field';
-declare type TextAreaProps = BaseFieldProps<HTMLTextAreaElement>;
+import { FieldComponentProps } from '../base-field';
+declare type TextAreaProps = FieldComponentProps<HTMLTextAreaElement>;
 declare function TextArea({ id, label, secondaryLabel, auxiliaryLabel, hint, maxWidth, ...props }: TextAreaProps): JSX.Element;
 export { TextArea };
 export type { TextAreaProps };

package/lib/new-components/text-area/text-area.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("./text-area.module.css.js");exports.TextArea=function(l){var s=l.id,u=l.label,n=l.secondaryLabel,o=l.auxiliaryLabel,b=l.hint,d=l.maxWidth,c=e.objectWithoutPropertiesLoose(l,["id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth"]);return a.createElement(t.BaseField,{id:s,label:u,secondaryLabel:n,auxiliaryLabel:o,hint:b,className:i.default.container,maxWidth:d},(function(e){return a.createElement(r.Box,{width:"full"},a.createElement("textarea",Object.assign({},c,e)))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),r=require("../box/box.js"),t=require("../base-field/base-field.js"),i=require("./text-area.module.css.js"),l=["id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth"];exports.TextArea=function(s){var u=s.id,n=s.label,o=s.secondaryLabel,b=s.auxiliaryLabel,d=s.hint,c=s.maxWidth,x=e.objectWithoutPropertiesLoose(s,l);return a.createElement(t.BaseField,{id:u,label:n,secondaryLabel:o,auxiliaryLabel:b,hint:d,className:i.default.container,maxWidth:c},(function(e){return a.createElement(r.Box,{width:"full"},a.createElement("textarea",Object.assign({},x,e)))}))};
 //# sourceMappingURL=text-area.js.map

package/lib/new-components/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = BaseFieldProps<HTMLTextAreaElement>\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":"gRAOA,gBACIA,IAAAA,GACAC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,SACGC,8GAGCC,gBAACC,aACGR,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNK,UAAWC,UAAOC,UAClBN,SAAUA,IAET,SAACO,UACEL,gBAACM,OAAIC,MAAM,QACPP,4CAAcD,EAAWM"}
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement>\n\nfunction TextArea({\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            className={styles.container}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":"qVAOA,gBACIA,IAAAA,GACAC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,KACAC,IAAAA,SACGC,6CAGCC,gBAACC,aACGR,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNK,UAAWC,UAAOC,UAClBN,SAAUA,IAET,SAACO,UACEL,gBAACM,OAAIC,MAAM,QACPP,4CAAcD,EAAWM"}

package/lib/new-components/text-area/text-area.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"b2fe9429"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_5a579f96"};
 //# sourceMappingURL=text-area.module.css.js.map

package/lib/new-components/text-field/text-field.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { BaseFieldProps } from '../base-field';
-declare type TextFieldProps = BaseFieldProps<HTMLInputElement>;
-declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "id" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "secondaryLabel" | "auxiliaryLabel" | "hint" | "maxWidth"> & React.RefAttributes<HTMLInputElement>>;
+import type { FieldComponentProps } from '../base-field';
+declare type TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url';
+declare type TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> & {
+    type?: TextFieldType;
+};
+declare const TextField: React.ForwardRefExoticComponent<Pick<TextFieldProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "secondaryLabel" | "auxiliaryLabel" | "hint" | "maxWidth" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "value" | "width"> & React.RefAttributes<HTMLInputElement>>;
 export { TextField };
-export type { TextFieldProps };
+export type { TextFieldProps, TextFieldType };

package/lib/new-components/text-field/text-field.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),i=require("../box/box.js"),t=require("../base-field/base-field.js"),a=require("./text-field.module.css.js");exports.TextField=r.forwardRef((function(l,d){var s=l.id,n=l.label,u=l.secondaryLabel,o=l.auxiliaryLabel,b=l.hint,c=l.type,x=void 0===c?"text":c,p=l.maxWidth,f=l.hidden,h=e.objectWithoutPropertiesLoose(l,["id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden"]);return r.createElement(t.BaseField,{id:s,label:n,secondaryLabel:u,auxiliaryLabel:o,hint:b,maxWidth:p,hidden:f},(function(e){return r.createElement(i.Box,{className:a.default.inputWrapper},r.createElement("input",Object.assign({},h,e,{type:x,ref:d})))}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),i=require("../box/box.js"),a=require("../base-field/base-field.js"),t=require("./text-field.module.css.js"),l=["id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","aria-describedby"];exports.TextField=r.forwardRef((function(d,s){var b=d.id,n=d.label,u=d.secondaryLabel,o=d.auxiliaryLabel,c=d.hint,x=d.type,p=void 0===x?"text":x,y=d.maxWidth,f=d.hidden,h=d["aria-describedby"],m=e.objectWithoutPropertiesLoose(d,l);return r.createElement(a.BaseField,{id:b,label:n,secondaryLabel:u,auxiliaryLabel:o,hint:c,maxWidth:y,hidden:f,"aria-describedby":h},(function(e){return r.createElement(i.Box,{className:t.default.inputWrapper},r.createElement("input",Object.assign({},m,e,{type:p,ref:s})))}))}));
 //# sourceMappingURL=text-field.js.map

package/lib/new-components/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\n\ntype TextFieldProps = BaseFieldProps<HTMLInputElement>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    { id, label, secondaryLabel, auxiliaryLabel, hint, type = 'text', maxWidth, hidden, ...props },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n        >\n            {(extraProps) => (\n                <Box className={styles.inputWrapper}>\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps }\n"],"names":["React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","props","BaseField","extraProps","Box","className","styles","inputWrapper"],"mappings":"kRAOkBA,cAAmD,WAEjEC,OADEC,IAAAA,GAAIC,IAAAA,MAAOC,IAAAA,eAAgBC,IAAAA,eAAgBC,IAAAA,SAAMC,KAAAA,aAAO,SAAQC,IAAAA,SAAUC,IAAAA,OAAWC,8HAInFV,gBAACW,aACGT,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNE,SAAUA,EACVC,OAAQA,IAEP,SAACG,UACEZ,gBAACa,OAAIC,UAAWC,UAAOC,cACnBhB,yCAAWU,EAAWE,GAAYL,KAAMA,EAAMN,IAAKA"}
+{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-field.module.css'\nimport type { FieldComponentProps } from '../base-field'\n\ntype TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'\n\ntype TextFieldProps = Omit<FieldComponentProps<HTMLInputElement>, 'type'> & {\n    type?: TextFieldType\n}\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box className={styles.inputWrapper}>\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","inputWrapper"],"mappings":"0XAYkBA,cAAmD,WAajEC,OAXIC,IAAAA,GACAC,IAAAA,MACAC,IAAAA,eACAC,IAAAA,eACAC,IAAAA,SACAC,KAAAA,aAAO,SACPC,IAAAA,SACAC,IAAAA,OACoBC,IAApB,oBACGC,6CAKHX,gBAACY,aACGV,GAAIA,EACJC,MAAOA,EACPC,eAAgBA,EAChBC,eAAgBA,EAChBC,KAAMA,EACNE,SAAUA,EACVC,OAAQA,qBACUC,IAEjB,SAACG,UACEb,gBAACc,OAAIC,UAAWC,UAAOC,cACnBjB,yCAAWW,EAAWE,GAAYN,KAAMA,EAAMN,IAAKA"}

package/lib/new-components/text-field/text-field.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"_509cf6b5"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"dd9ffeab"};
 //# sourceMappingURL=text-field.module.css.js.map

package/lib/new-components/text-field/text-field.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/new-components/text-link/text-link.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import type { OpenInNewTab } from '../common-types';
 declare type TextLinkProps = OpenInNewTab;
-declare const TextLink: import("../type-helpers").ForwardRefComponentWithAs<OpenInNewTab, React.ElementType<any>>;
+declare const TextLink: import("../../utils/polymorphism").PolymorphicComponent<"a", OpenInNewTab, "obfuscateClassName">;
 export { TextLink };
 export type { TextLinkProps };

package/lib/new-components/text-link/text-link.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),o=require("../type-helpers.js"),t=require("../box/box.js"),n=require("./text-link.module.css.js");exports.TextLink=o.forwardRefWithAs((function(o,i){var s=o.component,a=void 0===s?"a":s,l=o.openInNewTab,u=void 0!==l&&l,p=e.objectWithoutPropertiesLoose(o,["component","tone","openInNewTab"]);return r.createElement(t.Box,Object.assign({},p,{component:a,display:"inline",className:n.default.container,ref:i,target:u?"_blank":void 0,rel:u?"noopener noreferrer":void 0}))}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),r=require("react"),o=require("../../utils/polymorphism.js"),t=require("../box/box.js"),i=require("./text-link.module.css.js"),s=["as","openInNewTab","exceptionallySetClassName"];exports.TextLink=o.polymorphicComponent((function(o,a){var l=o.as,n=void 0===l?"a":l,p=o.openInNewTab,u=void 0!==p&&p,c=o.exceptionallySetClassName,b=e.objectWithoutPropertiesLoose(o,s);return r.createElement(t.Box,Object.assign({},b,{as:n,display:"inline",className:[c,i.default.container],ref:a,target:u?"_blank":void 0,rel:u?"noopener noreferrer":void 0}))}));
 //# sourceMappingURL=text-link.js.map

package/lib/new-components/text-link/text-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-link.js","sources":["../../../src/new-components/text-link/text-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { forwardRefWithAs } from '../type-helpers'\nimport styles from './text-link.module.css'\nimport type { OpenInNewTab } from '../common-types'\n\ntype TextLinkProps = OpenInNewTab\n\nconst TextLink = forwardRefWithAs<TextLinkProps>(function TextLink(\n    { component = 'a', tone = 'normal', openInNewTab = false, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            component={component}\n            display=\"inline\"\n            className={styles.container}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { TextLink }\nexport type { TextLinkProps }\n"],"names":["forwardRefWithAs","ref","component","openInNewTab","props","React","Box","display","className","styles","container","target","undefined","rel"],"mappings":"uQAQiBA,oBAAgC,WAE7CC,WADEC,UAAAA,aAAY,UAAsBC,aAAAA,gBAAyBC,+EAIzDC,gBAACC,uBACOF,GACJF,UAAWA,EACXK,QAAQ,SACRC,UAAWC,UAAOC,UAClBT,IAAKA,EACLU,OAAQR,EAAe,cAAWS,EAClCC,IAAKV,EAAe,2BAAwBS"}
+{"version":3,"file":"text-link.js","sources":["../../../src/new-components/text-link/text-link.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Box } from '../box'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport styles from './text-link.module.css'\nimport type { OpenInNewTab } from '../common-types'\n\ntype TextLinkProps = OpenInNewTab\n\nconst TextLink = polymorphicComponent<'a', TextLinkProps>(function TextLink(\n    { as = 'a', openInNewTab = false, exceptionallySetClassName, ...props },\n    ref,\n) {\n    return (\n        <Box\n            {...props}\n            as={as}\n            display=\"inline\"\n            className={[exceptionallySetClassName, styles.container]}\n            ref={ref}\n            target={openInNewTab ? '_blank' : undefined}\n            rel={openInNewTab ? 'noopener noreferrer' : undefined}\n        />\n    )\n})\n\nexport { TextLink }\nexport type { TextLinkProps }\n"],"names":["polymorphicComponent","ref","as","openInNewTab","exceptionallySetClassName","props","React","Box","display","className","styles","container","target","undefined","rel"],"mappings":"oUAQiBA,wBAAyC,WAEtDC,WADEC,GAAAA,aAAK,UAAKC,aAAAA,gBAAsBC,IAAAA,0BAA8BC,6CAI5DC,gBAACC,uBACOF,GACJH,GAAIA,EACJM,QAAQ,SACRC,UAAW,CAACL,EAA2BM,UAAOC,WAC9CV,IAAKA,EACLW,OAAQT,EAAe,cAAWU,EAClCC,IAAKX,EAAe,2BAAwBU"}

package/lib/utils/polymorphism.d.ts

@@ -0,0 +1,151 @@
+import * as React from 'react';
+declare type Merge<P1, P2> = Omit<P1, keyof P2> & P2;
+declare type EmptyObject = {
+    [K in any]: never;
+};
+declare type ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName';
+declare type ObfuscatedClassName = {
+    /**
+     * Used internally to set the `className` prop of the main container element for this component.
+     *
+     * Aside from the different name, the prop behaves the same as the native `className`. The only
+     * reason for the name change is to discourage applying custom CSS to the design system
+     * components, which are supposed to _eventually_ provide all the styling features we may need.
+     *
+     * This prop is meant to be used only in certain circumstances, when you really need a escape
+     * hatch to apply custom styles to a component. Before reaching for this feature, try harder to
+     * see if you can solve your needs with what the design system provides.
+     *
+     * For instance, instead of applying layout-related styles to a non-layout component, consider
+     * wrapping it inside a layout component.
+     *
+     * @see PolymorphicComponent
+     */
+    exceptionallySetClassName?: string;
+};
+/**
+ * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
+ * prop instead.
+ *
+ * This can be customized via the second generic parameter, as there are cases where it may be
+ * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the
+ * `className` prop while not replacing it with the `exceptionallySetClassName` one.
+ *
+ * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop
+ * @see PolymorphicComponent for details about this feature
+ */
+declare type WithObfuscatedClassName<Props, ShouldObfuscateClassName extends ObfuscateClassNameMode> = 'className' extends keyof Props ? ShouldObfuscateClassName extends 'obfuscateClassName' ? Omit<Props, 'className'> & ObfuscatedClassName : ShouldObfuscateClassName extends 'omitClassName' ? Omit<Props, 'className'> : ShouldObfuscateClassName extends 'keepClassName' ? Props : never : Props;
+declare type PolymorphicProp<ComponentType extends React.ElementType> = {
+    /**
+     * Used to instruct this component what React element to render as. It can be both a string
+     * representing a HTML tag name, or a React component.
+     *
+     * When using this prop, the component you apply it to will also recognize in its props types
+     * all the props from the component or HTML element you are rendering it as.
+     *
+     * Some uses for this feature:
+     *
+     * - Using some of our layout components, while at the same time being able to set them to use
+     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).
+     * - Using a design system link component, but have it internally use a client-side router link
+     *   implemented via a React component (e.g. react-router's `Link`).
+     *
+     * Keep in mind that not all compositions of this kind may work well, especially when composing
+     * with another React component and not with a HTML tag name. In particular, if the components
+     * being composed have opposing concerns of clashing features (e.g. they have contradicting
+     * styles applied to them) things may not go well. In those cases prefer to nest them instead.
+     *
+     * @see PolymorphicComponent
+     */
+    as?: ComponentType;
+};
+/**
+ * Given a component or element type, and a set of additional props, this builds the entire set of
+ * props for a polymorphic component.
+ *
+ * It does three things:
+ *
+ * 1. it merges the element type props with the `OwnProps`
+ * 2. it adds the `as` prop to allow for polymorphism to happen
+ * 3. it optionally obfuscates or omits the className prop if present
+ *
+ * @see PolymorphicProp
+ * @see WithObfuscatedClassName
+ */
+declare type PolymorphicComponentProps<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode> = Merge<WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>, OwnProps & PolymorphicProp<ComponentType>>;
+declare type ElementTagNameMap = HTMLElementTagNameMap & Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
+declare type ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName];
+declare type ElementByTagOrAny<ComponentType extends React.ElementType> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any;
+/**
+ * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via
+ * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.
+ *
+ * @see PolymorphicComponentProps
+ * @see WithObfuscatedClassName
+ */
+interface ForwardRefFunction<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode> {
+    (props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>, ref: ((instance: ElementByTagOrAny<ComponentType> | null) => void) | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null> | null): React.ReactElement | null;
+    displayName?: string;
+}
+/**
+ * A component that can customize the React element type that it renders (a.k.a. a polymorphic
+ * component). This is achieved by passing a prop `as={ElementType}` or `as="html-tag-name"`.
+ *
+ * It transparently takes care of forwarding refs, and properly sets the ref type depending on the
+ * element type.
+ *
+ * ## Recognizing props based on the polymorphic type
+ *
+ * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop
+ * component or HTML element is, the type system will automatically allow you to pass props that are
+ * not explicitly defined by you, but that are recognized as valid props to be passed to the
+ * component you are rendering.
+ *
+ * For instance, see the following example:
+ *
+ * ```jsx
+ * <Box as="label" htmlFor="field-id">Hello</Box>
+ * ```
+ *
+ * The `htmlFor` prop is exclusive to label elements. If you omit the `as="label"` prop, the type
+ * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of
+ * an incorrect type to such prop. For instance, the example below will issue a type error:
+ *
+ * ```jsx
+ * <Box as="label" htmlFor={123}>Hello</Box>
+ * ```
+ *
+ * ## Omitting or obfuscating the `className` prop
+ *
+ * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`
+ * prop instead.
+ *
+ * This is to discourage customizing design system components via custom styling, while still
+ * leaving the door open to do it as an escape hatch when the design system still has shortcomings
+ * with respect to the product designs we want to achieve.
+ *
+ * The cumbersome name also serves the purpose of aiding in easily searching for the places in the
+ * code where this escape hatch was needed, in order to identify areas where the design system
+ * components need to improve to better match our needs.
+ *
+ * This behaviour can be customized via an optional second generic argument that allows to disable
+ * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop
+ * name.
+ */
+interface PolymorphicComponent<ComponentType extends React.ElementType, OwnProps, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'> {
+    <TT extends React.ElementType = ComponentType>(props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>): React.ReactElement | null;
+    readonly $$typeof: symbol;
+    defaultProps?: Partial<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
+    propTypes?: React.WeakValidationMap<PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>>;
+    displayName?: string;
+}
+/**
+ * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a
+ * convenience over merely using React.forwardRef directly, and then manually forcing the resulting
+ * value to be typed using `as PolymorphicComponent<…>`.
+ *
+ * @see PolymorphicComponent for details about what this type does
+ */
+declare function polymorphicComponent<ComponentType extends React.ElementType = 'div', OwnProps = EmptyObject, ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>): PolymorphicComponent<ComponentType, OwnProps, ShouldObfuscateClassName>;
+export type { PolymorphicComponent, ObfuscatedClassName };
+export { polymorphicComponent };

package/lib/utils/polymorphism.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.polymorphicComponent=function(r){return e.forwardRef(r)};
+//# sourceMappingURL=polymorphism.js.map

package/lib/utils/polymorphism.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphism.js","sources":["../../src/utils/polymorphism.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport * as React from 'react'\n\ntype Merge<P1, P2> = Omit<P1, keyof P2> & P2\n\ntype EmptyObject = {\n    [K in any]: never\n}\n\ntype ObfuscateClassNameMode = 'keepClassName' | 'obfuscateClassName' | 'omitClassName'\n\ntype ObfuscatedClassName = {\n    /**\n     * Used internally to set the `className` prop of the main container element for this component.\n     *\n     * Aside from the different name, the prop behaves the same as the native `className`. The only\n     * reason for the name change is to discourage applying custom CSS to the design system\n     * components, which are supposed to _eventually_ provide all the styling features we may need.\n     *\n     * This prop is meant to be used only in certain circumstances, when you really need a escape\n     * hatch to apply custom styles to a component. Before reaching for this feature, try harder to\n     * see if you can solve your needs with what the design system provides.\n     *\n     * For instance, instead of applying layout-related styles to a non-layout component, consider\n     * wrapping it inside a layout component.\n     *\n     * @see PolymorphicComponent\n     */\n    exceptionallySetClassName?: string\n}\n\n/**\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This can be customized via the second generic parameter, as there are cases where it may be\n * needed to omit this behaviour and keep the `className`. You can also instruct it to remove the\n * `className` prop while not replacing it with the `exceptionallySetClassName` one.\n *\n * @see ObfuscatedClassName['exceptionallySetClassName'] for details about this prop\n * @see PolymorphicComponent for details about this feature\n */\ntype WithObfuscatedClassName<\n    Props,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = 'className' extends keyof Props\n    ? ShouldObfuscateClassName extends 'obfuscateClassName'\n        ? Omit<Props, 'className'> & ObfuscatedClassName\n        : ShouldObfuscateClassName extends 'omitClassName'\n        ? Omit<Props, 'className'>\n        : ShouldObfuscateClassName extends 'keepClassName'\n        ? Props\n        : never\n    : Props\n\ntype PolymorphicProp<ComponentType extends React.ElementType> = {\n    /**\n     * Used to instruct this component what React element to render as. It can be both a string\n     * representing a HTML tag name, or a React component.\n     *\n     * When using this prop, the component you apply it to will also recognize in its props types\n     * all the props from the component or HTML element you are rendering it as.\n     *\n     * Some uses for this feature:\n     *\n     * - Using some of our layout components, while at the same time being able to set them to use\n     *   semantic HTML elements needed for accessibility purposes (e.g. `nav`, `main`, etc).\n     * - Using a design system link component, but have it internally use a client-side router link\n     *   implemented via a React component (e.g. react-router's `Link`).\n     *\n     * Keep in mind that not all compositions of this kind may work well, especially when composing\n     * with another React component and not with a HTML tag name. In particular, if the components\n     * being composed have opposing concerns of clashing features (e.g. they have contradicting\n     * styles applied to them) things may not go well. In those cases prefer to nest them instead.\n     *\n     * @see PolymorphicComponent\n     */\n    as?: ComponentType\n}\n\n/**\n * Given a component or element type, and a set of additional props, this builds the entire set of\n * props for a polymorphic component.\n *\n * It does three things:\n *\n * 1. it merges the element type props with the `OwnProps`\n * 2. it adds the `as` prop to allow for polymorphism to happen\n * 3. it optionally obfuscates or omits the className prop if present\n *\n * @see PolymorphicProp\n * @see WithObfuscatedClassName\n */\ntype PolymorphicComponentProps<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> = Merge<\n    WithObfuscatedClassName<React.ComponentProps<ComponentType>, ShouldObfuscateClassName>,\n    OwnProps & PolymorphicProp<ComponentType>\n>\n\ntype ElementTagNameMap = HTMLElementTagNameMap &\n    Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>\n\ntype ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName]\n\ntype ElementByTagOrAny<\n    ComponentType extends React.ElementType\n> = ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any\n\n/**\n * The function passed to React.forwardRef, but typed in a way that's prepared for polymorphism via\n * the `as` prop. It also allows to specify if the `className` prop should be obfuscated or omitted.\n *\n * @see PolymorphicComponentProps\n * @see WithObfuscatedClassName\n */\ninterface ForwardRefFunction<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode\n> {\n    (\n        props: PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>,\n        ref:\n            | ((instance: ElementByTagOrAny<ComponentType> | null) => void)\n            | React.MutableRefObject<ElementByTagOrAny<ComponentType> | null>\n            | null,\n    ): React.ReactElement | null\n    displayName?: string\n}\n\n/**\n * A component that can customize the React element type that it renders (a.k.a. a polymorphic\n * component). This is achieved by passing a prop `as={ElementType}` or `as=\"html-tag-name\"`.\n *\n * It transparently takes care of forwarding refs, and properly sets the ref type depending on the\n * element type.\n *\n * ## Recognizing props based on the polymorphic type\n *\n * The `ComponentType` argument sets the default type for the `as` prop. Whatever the `as` prop\n * component or HTML element is, the type system will automatically allow you to pass props that are\n * not explicitly defined by you, but that are recognized as valid props to be passed to the\n * component you are rendering.\n *\n * For instance, see the following example:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor=\"field-id\">Hello</Box>\n * ```\n *\n * The `htmlFor` prop is exclusive to label elements. If you omit the `as=\"label\"` prop, the type\n * system will consider the `htmlFor` prop to be an error. The same happens if you pass a value of\n * an incorrect type to such prop. For instance, the example below will issue a type error:\n *\n * ```jsx\n * <Box as=\"label\" htmlFor={123}>Hello</Box>\n * ```\n *\n * ## Omitting or obfuscating the `className` prop\n *\n * If a set of props include the `className` prop, we replace it with a `exceptionallySetClassName`\n * prop instead.\n *\n * This is to discourage customizing design system components via custom styling, while still\n * leaving the door open to do it as an escape hatch when the design system still has shortcomings\n * with respect to the product designs we want to achieve.\n *\n * The cumbersome name also serves the purpose of aiding in easily searching for the places in the\n * code where this escape hatch was needed, in order to identify areas where the design system\n * components need to improve to better match our needs.\n *\n * This behaviour can be customized via an optional second generic argument that allows to disable\n * this feature, or to omit the `className` altogether without replacing it with the obfuscated prop\n * name.\n */\ninterface PolymorphicComponent<\n    ComponentType extends React.ElementType,\n    OwnProps,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n> {\n    <TT extends React.ElementType = ComponentType>(\n        props: PolymorphicComponentProps<TT, OwnProps, ShouldObfuscateClassName>,\n    ): React.ReactElement | null\n    readonly $$typeof: symbol\n    defaultProps?: Partial<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    propTypes?: React.WeakValidationMap<\n        PolymorphicComponentProps<ComponentType, OwnProps, ShouldObfuscateClassName>\n    >\n    displayName?: string\n}\n\n/**\n * A wrapper to use React.forwardRef with polymorphic components in a type-safe manner. This is a\n * convenience over merely using React.forwardRef directly, and then manually forcing the resulting\n * value to be typed using `as PolymorphicComponent<…>`.\n *\n * @see PolymorphicComponent for details about what this type does\n */\nfunction polymorphicComponent<\n    ComponentType extends React.ElementType = 'div',\n    OwnProps = EmptyObject,\n    ShouldObfuscateClassName extends ObfuscateClassNameMode = 'obfuscateClassName'\n>(render: ForwardRefFunction<ComponentType, OwnProps, ShouldObfuscateClassName>) {\n    return React.forwardRef(render) as PolymorphicComponent<\n        ComponentType,\n        OwnProps,\n        ShouldObfuscateClassName\n    >\n}\n\nexport type { PolymorphicComponent, ObfuscatedClassName }\nexport { polymorphicComponent }\n"],"names":["render","React"],"mappings":"wHA4MA,SAIEA,UACSC,aAAiBD"}

package/package.json

@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "9.2.0-beta.8",
+    "version": "10.0.0-beta.12",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",
@@ -21,8 +21,8 @@
         "styles"
     ],
     "engines": {
-        "node": "^14.5.5",
-        "npm": "^6.14.11"
+        "node": "<=16.10.0",
+        "npm": "^7.0.0"
     },
     "scripts": {
         "postinstall": "patch-package",
@@ -39,13 +39,13 @@
         "type-check": "tsc --noEmit -p ./tsconfig.json",
         "lint": "tsdx lint src stories",
         "storybook": "start-storybook -p 6006",
-        "prettify": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,scss,less,md}\""
+        "prettify": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,scss,less,md,mdx}\""
     },
     "peerDependencies": {
         "classnames": "^2.2.5",
+        "prop-types": "^15.6.2",
         "react": "^15.5.4 || ^16.2.0",
-        "react-dom": "^15.5.4 || ^16.2.0",
-        "prop-types": "^15.6.2"
+        "react-dom": "^15.5.4 || ^16.2.0"
     },
     "devDependencies": {
         "@babel/core": "^7.9.6",
@@ -59,27 +59,28 @@
         "@babel/preset-react": "^7.0.0",
         "@babel/preset-typescript": "^7.10.1",
         "@babel/register": "^7.0.0",
-        "@doist/eslint-config": "^3.0.0",
+        "@doist/eslint-config": "^6.0.2",
         "@doist/prettier-config": "^3.0.5",
-        "@storybook/addon-actions": "^5.3.18",
-        "@storybook/addon-docs": "^5.3.18",
-        "@storybook/addon-info": "^5.3.18",
-        "@storybook/addon-knobs": "^5.3.18",
-        "@storybook/addon-links": "^5.3.18",
-        "@storybook/addon-options": "^5.3.18",
-        "@storybook/addons": "^5.3.18",
-        "@storybook/react": "^5.3.18",
-        "@testing-library/jest-dom": "^5.11.4",
-        "@testing-library/react": "^11.0.4",
-        "@testing-library/user-event": "^12.1.7",
+        "@storybook/addon-actions": "^6.3.10",
+        "@storybook/addon-controls": "^6.3.10",
+        "@storybook/addon-docs": "^6.3.10",
+        "@storybook/addon-knobs": "^6.3.1",
+        "@storybook/addon-links": "^6.3.10",
+        "@storybook/addon-options": "^5.3.21",
+        "@storybook/addon-postcss": "^2.0.0",
+        "@storybook/addons": "^6.3.10",
+        "@storybook/react": "^6.3.10",
+        "@testing-library/jest-dom": "^5.14.1",
+        "@testing-library/react": "^12.0.0",
+        "@testing-library/user-event": "^13.2.1",
         "@types/cheerio": "^0.22.22",
         "@types/classnames": "^2.2.10",
         "@types/enzyme": "^3.10.7",
         "@types/enzyme-adapter-react-16": "^1.0.6",
         "@types/react": "^16.9.52",
         "@types/react-dom": "^16.9.8",
-        "@typescript-eslint/eslint-plugin": "^4.4.1",
-        "@typescript-eslint/parser": "^4.4.1",
+        "@typescript-eslint/eslint-plugin": "^4.22.1",
+        "@typescript-eslint/parser": "^4.22.1",
         "autoprefixer": "^9.8.0",
         "babel-core": "^7.0.0-bridge.0",
         "babel-loader": "^8.1.0",
@@ -89,11 +90,11 @@
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.5",
         "enzyme-to-json": "^3.6.1",
-        "eslint": "^7.11.0",
+        "eslint": "^7.25.0",
         "eslint-config-prettier": "^6.12.0",
         "eslint-plugin-jest": "^24.1.0",
         "eslint-plugin-prettier": "^3.1.4",
-        "eslint-plugin-react": "^7.21.4",
+        "eslint-plugin-react": "^7.23.2",
         "husky": "^4.3.0",
         "jest": "^24.7.1",
         "jest-environment-jsdom-sixteen": "^1.0.3",
@@ -110,7 +111,6 @@
         "react-docgen-typescript-loader": "^3.7.2",
         "react-dom": "^16.13.1",
         "react-is": "^16.13.1",
-        "react-storybook-addon-chapters": "^3.1.7",
         "react-svg-loader": "^3.0.3",
         "react-test-renderer": "^16.13.1",
         "rimraf": "^3.0.2",
@@ -125,9 +125,13 @@
         "webpack": "^4.43.0"
     },
     "dependencies": {
+        "@reach/dialog": "^0.16.0",
+        "@types/testing-library__jest-dom": "^5.14.1",
         "dayjs": "^1.8.10",
         "patch-package": "^6.4.6",
+        "react-focus-lock": "^2.5.2",
         "react-keyed-flatten-children": "^1.3.0",
+        "react-markdown": "^5.0.3",
         "reakit": "1.3.0"
     }
 }