@doist/reactist 12.0.4 → 13.0.0

package/es/new-components/select-field/select-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
+var modules_1fa9b208 = {"selectWrapper":"_07e75293","error":"f147bcea"};
 
 export default modules_1fa9b208;
 //# sourceMappingURL=select-field.module.css.js.map

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

@@ -1,4 +1,4 @@
-var modules_a9637dd3 = {"text":"_2282cb83","size-caption":"_087a8179","size-copy":"a4423c2a","size-subtitle":"_03365a63","weight-semibold":"_5213e4ab","weight-bold":"_3d58c8f2","tone-secondary":"_892a359a","tone-danger":"f9cb5d8a","tone-positive":"fcedb234","lineClampMultipleLines":"_765949c1","lineClamp-1":"c3e4800e","lineClamp-2":"b25b652b","lineClamp-3":"bb13d214","lineClamp-4":"_6db1928e","lineClamp-5":"e9944c1d"};
+var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
 export default modules_a9637dd3;
 //# sourceMappingURL=text.module.css.js.map

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

@@ -4,29 +4,36 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './text-area.module.css.js';
 
-const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth"];
+const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth"];
 
 function TextArea(_ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
-    className: styles.container,
+    message: message,
+    tone: tone,
+    className: [styles.container, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null],
     maxWidth: maxWidth
   }, extraProps => /*#__PURE__*/createElement(Box, {
-    width: "full"
+    width: "full",
+    display: "flex"
   }, /*#__PURE__*/createElement("textarea", _objectSpread2(_objectSpread2({}, props), extraProps))));
 }
 

package/es/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, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> & {\n    rows?: number\n}\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":["TextArea","id","label","secondaryLabel","auxiliaryLabel","hint","maxWidth","props","React","BaseField","className","styles","container","extraProps","Box","width"],"mappings":";;;;;;;;AASA,SAASA,QAAT;MAAkB;IACdC,EADc;IAEdC,KAFc;IAGdC,cAHc;IAIdC,cAJc;IAKdC,IALc;IAMdC;;MACGC;;EAEH,oBACIC,aAAA,CAACC,SAAD;IACIR,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNK,SAAS,EAAEC,MAAM,CAACC;IAClBN,QAAQ,EAAEA;GAPd,EASMO,UAAD,iBACGL,aAAA,CAACM,GAAD;IAAKC,KAAK,EAAC;GAAX,eACIP,aAAA,WAAA,oCAAcD,KAAd,GAAyBM,UAAzB,EADJ,CAVR,CADJ;AAiBH;;;;"}
+{"version":3,"file":"text-area.js","sources":["../../../src/new-components/text-area/text-area.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps, FieldComponentProps } from '../base-field'\nimport { Box } from '../box'\nimport styles from './text-area.module.css'\n\ntype TextAreaProps = FieldComponentProps<HTMLTextAreaElement> &\n    BaseFieldVariantProps & {\n        rows?: number\n    }\n\nfunction TextArea({\n    variant = 'default',\n    id,\n    label,\n    secondaryLabel,\n    auxiliaryLabel,\n    hint,\n    message,\n    tone,\n    maxWidth,\n    ...props\n}: TextAreaProps) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            className={[\n                styles.container,\n                tone === 'error' ? styles.error : null,\n                variant === 'bordered' ? styles.bordered : null,\n            ]}\n            maxWidth={maxWidth}\n        >\n            {(extraProps) => (\n                <Box width=\"full\" display=\"flex\">\n                    <textarea {...props} {...extraProps} />\n                </Box>\n            )}\n        </BaseField>\n    )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"names":["TextArea","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","maxWidth","props","React","BaseField","className","styles","container","error","bordered","extraProps","Box","width","display"],"mappings":";;;;;;;;AAUA,SAASA,QAAT;MAAkB;IACdC,OAAO,GAAG,SADI;IAEdC,EAFc;IAGdC,KAHc;IAIdC,cAJc;IAKdC,cALc;IAMdC,IANc;IAOdC,OAPc;IAQdC,IARc;IASdC;;MACGC;;EAEH,oBACIC,aAAA,CAACC,SAAD;IACIX,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNK,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEPP,IAAI,KAAK,OAAT,GAAmBM,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPf,OAAO,KAAK,UAAZ,GAAyBa,MAAM,CAACG,QAAhC,GAA2C,IAHpC;IAKXR,QAAQ,EAAEA;GAdd,EAgBMS,UAAD,iBACGP,aAAA,CAACQ,GAAD;IAAKC,KAAK,EAAC;IAAOC,OAAO,EAAC;GAA1B,eACIV,aAAA,WAAA,oCAAcD,KAAd,GAAyBQ,UAAzB,EADJ,CAjBR,CADJ;AAwBH;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_2728c236 = {"container":"_5a579f96"};
+var modules_2728c236 = {"container":"d6ec37c5","bordered":"a60d6043","error":"bef49c61"};
 
 export default modules_2728c236;
 //# sourceMappingURL=text-area.module.css.js.map

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

@@ -4,14 +4,17 @@ import { Box } from '../box/box.js';
 import { BaseField } from '../base-field/base-field.js';
 import styles from './text-field.module.css.js';
 
-const _excluded = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"];
+const _excluded = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby"];
 const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     type = 'text',
     maxWidth,
     hidden,
@@ -20,16 +23,19 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/createElement(Box, {
-    className: styles.inputWrapper
+    className: [styles.inputWrapper, tone === 'error' ? styles.error : null, variant === 'bordered' ? styles.bordered : null]
   }, /*#__PURE__*/createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     type: type,
     ref: ref

package/es/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 } 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":["TextField","React","ref","id","label","secondaryLabel","auxiliaryLabel","hint","type","maxWidth","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","inputWrapper"],"mappings":";;;;;;;MAYMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAajEE,GAbiE;MACjE;IACIC,EADJ;IAEIC,KAFJ;IAGIC,cAHJ;IAIIC,cAJJ;IAKIC,IALJ;IAMIC,IAAI,GAAG,MANX;IAOIC,QAPJ;IAQIC,MARJ;IASI,oBAAoBC;;MACjBC;;EAIP,oBACIX,aAAA,CAACY,SAAD;IACIV,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNE,QAAQ,EAAEA;IACVC,MAAM,EAAEA;wBACUC;GARtB,EAUMG,UAAD,iBACGb,aAAA,CAACc,GAAD;IAAKC,SAAS,EAAEC,MAAM,CAACC;GAAvB,eACIjB,aAAA,QAAA,mDAAWW,KAAX,GAAsBE,UAAtB;IAAkCN,IAAI,EAAEA,IAAxC;IAA8CN,GAAG,EAAEA;KADvD,CAXR,CADJ;AAkBH,CAjCiB;;;;"}
+{"version":3,"file":"text-field.js","sources":["../../../src/new-components/text-field/text-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { BaseField, BaseFieldVariantProps } 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    BaseFieldVariantProps & {\n        type?: TextFieldType\n    }\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n    {\n        variant = 'default',\n        id,\n        label,\n        secondaryLabel,\n        auxiliaryLabel,\n        hint,\n        message,\n        tone,\n        type = 'text',\n        maxWidth,\n        hidden,\n        'aria-describedby': ariaDescribedBy,\n        ...props\n    },\n    ref,\n) {\n    return (\n        <BaseField\n            variant={variant}\n            id={id}\n            label={label}\n            secondaryLabel={secondaryLabel}\n            auxiliaryLabel={auxiliaryLabel}\n            hint={hint}\n            message={message}\n            tone={tone}\n            maxWidth={maxWidth}\n            hidden={hidden}\n            aria-describedby={ariaDescribedBy}\n        >\n            {(extraProps) => (\n                <Box\n                    className={[\n                        styles.inputWrapper,\n                        tone === 'error' ? styles.error : null,\n                        variant === 'bordered' ? styles.bordered : null,\n                    ]}\n                >\n                    <input {...props} {...extraProps} type={type} ref={ref} />\n                </Box>\n            )}\n        </BaseField>\n    )\n})\n\nexport { TextField }\nexport type { TextFieldProps, TextFieldType }\n"],"names":["TextField","React","ref","variant","id","label","secondaryLabel","auxiliaryLabel","hint","message","tone","type","maxWidth","hidden","ariaDescribedBy","props","BaseField","extraProps","Box","className","styles","inputWrapper","error","bordered"],"mappings":";;;;;;;MAaMA,SAAS,gBAAGC,UAAA,CAAmD,SAASD,SAAT,OAgBjEE,GAhBiE;MACjE;IACIC,OAAO,GAAG,SADd;IAEIC,EAFJ;IAGIC,KAHJ;IAIIC,cAJJ;IAKIC,cALJ;IAMIC,IANJ;IAOIC,OAPJ;IAQIC,IARJ;IASIC,IAAI,GAAG,MATX;IAUIC,QAVJ;IAWIC,MAXJ;IAYI,oBAAoBC;;MACjBC;;EAIP,oBACId,aAAA,CAACe,SAAD;IACIb,OAAO,EAAEA;IACTC,EAAE,EAAEA;IACJC,KAAK,EAAEA;IACPC,cAAc,EAAEA;IAChBC,cAAc,EAAEA;IAChBC,IAAI,EAAEA;IACNC,OAAO,EAAEA;IACTC,IAAI,EAAEA;IACNE,QAAQ,EAAEA;IACVC,MAAM,EAAEA;wBACUC;GAXtB,EAaMG,UAAD,iBACGhB,aAAA,CAACiB,GAAD;IACIC,SAAS,EAAE,CACPC,MAAM,CAACC,YADA,EAEPX,IAAI,KAAK,OAAT,GAAmBU,MAAM,CAACE,KAA1B,GAAkC,IAF3B,EAGPnB,OAAO,KAAK,UAAZ,GAAyBiB,MAAM,CAACG,QAAhC,GAA2C,IAHpC;GADf,eAOItB,aAAA,QAAA,mDAAWc,KAAX,GAAsBE,UAAtB;IAAkCN,IAAI,EAAEA,IAAxC;IAA8CT,GAAG,EAAEA;KAPvD,CAdR,CADJ;AA2BH,CA7CiB;;;;"}

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

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
+var modules_aaf25250 = {"inputWrapper":"_9d172ece","bordered":"c59d0239","error":"_7e63ee20"};
 
 export default modules_aaf25250;
 //# sourceMappingURL=text-field.module.css.js.map

package/lib/components/color-picker/color-picker.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var o=e(require("react")),t=e(require("classnames")),r=require("../tooltip/tooltip.js"),l=require("../dropdown/index.js");const n=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],c=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=n}){return o.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},o.createElement(l.default.Trigger,null,(()=>{const l=((e,o)=>e[o>=e.length?0:o])(s,e);return o.createElement("span",{className:t("color_trigger",{small:r}),style:{backgroundColor:c(l)?l.color:l}},o.createElement("span",{className:"color_trigger--inner_ring"}))})()),o.createElement(l.default.Body,null,o.createElement("div",{className:"color_options"},s.reduce((t,r,l)=>(t.push(o.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:c(r)?r.color:r,colorIndex:l,onClick:a,tooltip:c(r)?r.name:null})),t),[]))))}function i({color:e,colorIndex:t,isActive:l,onClick:n,tooltip:c}){const a=o.createElement("span",{className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==n?void 0:n(t)},o.createElement("span",{className:"color_item--inner_ring"}));return c?o.createElement(r.Tooltip,{content:c},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=n,exports.ColorItem=i,exports.ColorPicker=a;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),o=e(require("classnames")),r=require("../tooltip/tooltip.js"),l=require("../deprecated-dropdown/index.js");const n=["#606060","#4A90E2","#03B3B2","#008299","#82BA00","#D24726","#AC193D","#DC4FAD","#3BD5FB","#74E8D3","#FFCC00","#FB886E","#CCCCCC"],c=e=>"string"!=typeof e;function a({color:e=0,small:r,onChange:a,colorList:s=n}){return t.createElement(l.default.Box,{right:!0,className:"reactist_color_picker"},t.createElement(l.default.Trigger,null,(()=>{const l=((e,t)=>e[t>=e.length?0:t])(s,e);return t.createElement("span",{className:o("color_trigger",{small:r}),style:{backgroundColor:c(l)?l.color:l}},t.createElement("span",{className:"color_trigger--inner_ring"}))})()),t.createElement(l.default.Body,null,t.createElement("div",{className:"color_options"},s.reduce((o,r,l)=>(o.push(t.createElement(i,{isActive:e>=s.length?0===l:l===e,key:l,color:c(r)?r.color:r,colorIndex:l,onClick:a,tooltip:c(r)?r.name:null})),o),[]))))}function i({color:e,colorIndex:o,isActive:l,onClick:n,tooltip:c}){const a=t.createElement("span",{className:"reactist color_item"+(l?" active":""),style:{backgroundColor:e},onClick:()=>null==n?void 0:n(o)},t.createElement("span",{className:"color_item--inner_ring"}));return c?t.createElement(r.Tooltip,{content:c},a):a}a.displayName="ColorPicker",i.displayName="ColorItem",exports.COLORS=n,exports.ColorItem=i,exports.ColorPicker=a;
 //# sourceMappingURL=color-picker.js.map

package/lib/components/color-picker/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport Dropdown from '../dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <Dropdown.Box right className=\"reactist_color_picker\">\n            <Dropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </Dropdown.Trigger>\n            <Dropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </Dropdown.Body>\n        </Dropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","Dropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"0QAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAASC,KAAIC,SAAMC,UAAU,yBAC1BJ,gBAACC,UAASI,aACL,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAASW,UACNZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,wBACII,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EArBnE5B,EAAY+B,YAAc,cAuB1BT,EAAUS,YAAc"}
+{"version":3,"file":"color-picker.js","sources":["../../../src/components/color-picker/color-picker.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\nimport DeprecatedDropdown from '../deprecated-dropdown'\nimport { Tooltip } from '../tooltip'\n\nimport './color-picker.less'\n\ntype NamedColor = { name: string; color: string }\n\nconst COLORS = [\n    '#606060',\n    '#4A90E2',\n    '#03B3B2',\n    '#008299',\n    '#82BA00',\n    '#D24726',\n    '#AC193D',\n    '#DC4FAD',\n    '#3BD5FB',\n    '#74E8D3',\n    '#FFCC00',\n    '#FB886E',\n    '#CCCCCC',\n]\n\nconst _isNamedColor = (color: string | NamedColor | undefined): color is NamedColor =>\n    typeof color !== 'string'\n\nconst _getColor = (colorList: (string | NamedColor)[], colorIndex: number) => {\n    const index = colorIndex >= colorList.length ? 0 : colorIndex\n    return colorList[index]\n}\n\ntype Props = {\n    small?: boolean\n    color?: number\n    onChange?: (color: number) => void\n    colorList?: (string | NamedColor)[]\n}\n\nfunction ColorPicker({ color = 0, small, onChange, colorList = COLORS }: Props) {\n    return (\n        <DeprecatedDropdown.Box right className=\"reactist_color_picker\">\n            <DeprecatedDropdown.Trigger>\n                {(() => {\n                    const backgroundColor = _getColor(colorList, color)\n\n                    return (\n                        <span\n                            className={classnames('color_trigger', { small })}\n                            style={{\n                                backgroundColor: _isNamedColor(backgroundColor)\n                                    ? backgroundColor.color\n                                    : backgroundColor,\n                            }}\n                        >\n                            <span className=\"color_trigger--inner_ring\" />\n                        </span>\n                    )\n                })()}\n            </DeprecatedDropdown.Trigger>\n            <DeprecatedDropdown.Body>\n                <div className=\"color_options\">\n                    {colorList.reduce<React.ReactNode[]>((items, currentColor, currentIndex) => {\n                        items.push(\n                            <ColorItem\n                                isActive={\n                                    color >= colorList.length\n                                        ? currentIndex === 0\n                                        : currentIndex === color\n                                }\n                                key={currentIndex}\n                                color={\n                                    _isNamedColor(currentColor) ? currentColor.color : currentColor\n                                }\n                                colorIndex={currentIndex}\n                                onClick={onChange}\n                                tooltip={_isNamedColor(currentColor) ? currentColor.name : null}\n                            />,\n                        )\n                        return items\n                    }, [])}\n                </div>\n            </DeprecatedDropdown.Body>\n        </DeprecatedDropdown.Box>\n    )\n}\nColorPicker.displayName = 'ColorPicker'\n\ntype ColorItemProps = {\n    color: string\n    colorIndex: number\n    isActive?: boolean\n    onClick?: (colorIndex: number) => void\n    tooltip?: React.ReactNode\n}\n\nfunction ColorItem({ color, colorIndex, isActive, onClick, tooltip }: ColorItemProps) {\n    const item = (\n        <span\n            className={'reactist color_item' + (isActive ? ' active' : '')}\n            style={{ backgroundColor: color }}\n            onClick={() => onClick?.(colorIndex)}\n        >\n            <span className=\"color_item--inner_ring\" />\n        </span>\n    )\n\n    return tooltip ? <Tooltip content={tooltip}>{item}</Tooltip> : item\n}\nColorItem.displayName = 'ColorItem'\n\nexport { ColorPicker, ColorItem, COLORS }\n"],"names":["COLORS","_isNamedColor","color","ColorPicker","small","onChange","colorList","React","DeprecatedDropdown","Box","right","className","Trigger","backgroundColor","colorIndex","length","_getColor","classnames","style","Body","reduce","items","currentColor","currentIndex","push","ColorItem","isActive","key","onClick","tooltip","name","item","Tooltip","content","displayName"],"mappings":"qRAUMA,EAAS,CACX,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,UACA,WAGEC,EAAiBC,GACF,iBAAVA,EAcX,SAASC,GAAYD,MAAEA,EAAQ,EAAVE,MAAaA,EAAbC,SAAoBA,EAApBC,UAA8BA,EAAYN,IAC3D,OACIO,gBAACC,UAAmBC,KAAIC,SAAMC,UAAU,yBACpCJ,gBAACC,UAAmBI,aACf,MACG,MAAMC,EAjBR,EAACP,EAAoCQ,IAE5CR,EADOQ,GAAcR,EAAUS,OAAS,EAAID,GAgBXE,CAAUV,EAAWJ,GAE7C,OACIK,wBACII,UAAWM,EAAW,gBAAiB,CAAEb,MAAAA,IACzCc,MAAO,CACHL,gBAAiBZ,EAAcY,GACzBA,EAAgBX,MAChBW,IAGVN,wBAAMI,UAAU,gCAZ3B,IAiBLJ,gBAACC,UAAmBW,UAChBZ,uBAAKI,UAAU,iBACVL,EAAUc,OAA0B,CAACC,EAAOC,EAAcC,KACvDF,EAAMG,KACFjB,gBAACkB,GACGC,SACIxB,GAASI,EAAUS,OACI,IAAjBQ,EACAA,IAAiBrB,EAE3ByB,IAAKJ,EACLrB,MACID,EAAcqB,GAAgBA,EAAapB,MAAQoB,EAEvDR,WAAYS,EACZK,QAASvB,EACTwB,QAAS5B,EAAcqB,GAAgBA,EAAaQ,KAAO,QAG5DT,GACR,OAgBvB,SAASI,GAAUvB,MAAEA,EAAFY,WAASA,EAATY,SAAqBA,EAArBE,QAA+BA,UAASC,IACvD,MAAME,EACFxB,wBACII,UAAW,uBAAyBe,EAAW,UAAY,IAC3DR,MAAO,CAAEL,gBAAiBX,GAC1B0B,QAAS,UAAMA,SAAAA,EAAUd,IAEzBP,wBAAMI,UAAU,4BAIxB,OAAOkB,EAAUtB,gBAACyB,WAAQC,QAASJ,GAAUE,GAAkBA,EArBnE5B,EAAY+B,YAAc,cAuB1BT,EAAUS,YAAc"}

package/lib/components/deprecated-dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/deprecated-dropdown/dropdown.tsx"],"sourcesContent":["import React from 'react'\nimport ReactDOM from 'react-dom'\nimport classNames from 'classnames'\n\nimport Button from '../deprecated-button'\n\nimport './dropdown.less'\n\ntype BoxProps = {\n    onShowBody?: () => void\n    onHideBody?: () => void\n    allowBodyInteractions?: boolean\n    top?: boolean\n    right?: boolean\n    scrolling_parent?: string\n    children?: [\n        React.ReactElement<TriggerProps>,\n        React.ReactElement<BodyProps> | ((props: BodyProps) => JSX.Element),\n    ]\n    className?: string\n}\n\ntype BoxState = {\n    top: boolean\n    showBody: boolean\n}\n\nclass Box extends React.Component<React.PropsWithChildren<BoxProps>, BoxState> {\n    public static displayName: string\n\n    constructor(props: BoxProps, context: React.Context<unknown>) {\n        super(props, context)\n        this.state = {\n            showBody: false,\n            top: props.top || false,\n        }\n\n        this._timeout = undefined\n    }\n\n    componentWillUnmount() {\n        document.removeEventListener('click', this._handleClickOutside, true)\n        if (this._timeout) {\n            clearTimeout(this._timeout)\n        }\n    }\n    _timeout?: ReturnType<typeof setTimeout>\n\n    _handleClickOutside = (event: MouseEvent) => {\n        const dropdownDOMNode = ReactDOM.findDOMNode(this)\n\n        if (dropdownDOMNode && !dropdownDOMNode.contains(event.target as Node))\n            this._toggleShowBody()\n        else if (!this.props.allowBodyInteractions) {\n            // won't close when body interactions are allowed\n            this._timeout = setTimeout(() => {\n                if (this.state.showBody) {\n                    this._toggleShowBody()\n                }\n            }, 100)\n        }\n    }\n\n    _toggleShowBody = () => {\n        if (!this.state.showBody) {\n            // will show\n            if (this.props.onShowBody) this.props.onShowBody()\n            document.addEventListener('click', this._handleClickOutside, true)\n        } else {\n            // will hide\n            if (this.props.onHideBody) this.props.onHideBody()\n            document.removeEventListener('click', this._handleClickOutside, true)\n        }\n\n        this.setState({\n            showBody: !this.state.showBody,\n        })\n    }\n\n    _getTriggerComponent() {\n        const _trigger = this.props.children?.[0]\n        return _trigger\n            ? React.cloneElement(_trigger, { onClick: this._toggleShowBody })\n            : undefined\n    }\n\n    // https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components\n    _setPosition = (body: HTMLElement | null) => {\n        if (body) {\n            const scrollingParent = document.getElementById(\n                this.props.scrolling_parent ? this.props.scrolling_parent : '',\n            )\n\n            if (scrollingParent) {\n                const dropdown = ReactDOM.findDOMNode(this)\n                if (!dropdown) {\n                    return\n                }\n                const dropdownVerticalPosition = (ReactDOM.findDOMNode(this) as HTMLElement)\n                    .offsetTop\n                const dropdownTrigger = (dropdown as Element).querySelector('.trigger')\n                if (!dropdownTrigger) {\n                    return\n                }\n                const dropdownTriggerHeight = dropdownTrigger.clientHeight\n                const dropdownBodyHeight = body.clientHeight\n\n                const scrollingParentHeight = scrollingParent.clientHeight\n                const scrollingParentOffset = scrollingParent.scrollTop\n\n                const bottomOffset =\n                    scrollingParentHeight +\n                    scrollingParentOffset -\n                    dropdownVerticalPosition -\n                    dropdownTriggerHeight\n\n                const top = bottomOffset < dropdownBodyHeight\n\n                if (top !== this.state.top) {\n                    this.setState({ top })\n                }\n            }\n        }\n    }\n\n    _getBodyComponent() {\n        if (!this.state.showBody) {\n            return null\n        }\n        const { top } = this.state\n        const { right = false, children } = this.props\n        const props = { top, right, setPosition: this._setPosition }\n\n        const className = classNames({\n            body_wrapper: true,\n            with_arrow: true,\n            top: top,\n            bottom: !top,\n        })\n\n        const body = children?.[1]\n\n        const contentMarkup =\n            typeof body === 'function'\n                ? body(props)\n                : body\n                ? React.cloneElement(body, props)\n                : undefined\n        return (\n            <div className={className} style={{ position: 'relative' }}>\n                {contentMarkup}\n            </div>\n        )\n    }\n\n    render() {\n        const className = classNames('reactist_dropdown', this.props.className)\n        const { top } = this.state\n\n        return (\n            <div style={{ display: 'inline-block' }} className={className}>\n                {top && this._getBodyComponent()}\n                {this._getTriggerComponent()}\n                {!top && this._getBodyComponent()}\n            </div>\n        )\n    }\n}\n\nBox.displayName = 'Dropdown.Box'\n\ntype NativeButtonProps = React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n>\n\ntype TriggerProps = Omit<NativeButtonProps, 'title'> & {\n    tooltip?: React.ReactNode\n}\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n    { children, onClick, tooltip, className, ...props },\n    ref,\n) {\n    function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {\n        event.preventDefault()\n        event.stopPropagation()\n        if (onClick) onClick(event)\n    }\n\n    return (\n        <Button\n            {...props}\n            className={classNames('trigger', className)}\n            onClick={handleClick}\n            tooltip={tooltip}\n            ref={ref}\n        >\n            {children}\n        </Button>\n    )\n})\n\nTrigger.displayName = 'Dropdown.Trigger'\n\ntype BodyProps = {\n    setPosition?: React.Ref<HTMLDivElement>\n    children?: React.ReactNode\n    top?: boolean\n    right?: boolean\n}\n\nfunction Body({ top, right, children, setPosition }: BodyProps) {\n    const style: React.CSSProperties = { position: 'absolute', right: 0, top: 0 }\n\n    if (top) {\n        style.top = 'auto'\n        style.bottom = 0\n    }\n\n    if (right) {\n        style.right = 'auto'\n        style.left = 0\n    }\n\n    return (\n        <div ref={setPosition} style={style} className=\"body\" id=\"reactist-dropdown-body\">\n            {children}\n        </div>\n    )\n}\n\nBody.displayName = 'Dropdown.Body'\n\nconst Dropdown = {\n    Box,\n    Trigger,\n    Body,\n}\n\nexport { Dropdown }\n"],"names":["Box","React","Component","constructor","props","context","super","_timeout","_handleClickOutside","event","dropdownDOMNode","ReactDOM","findDOMNode","this","contains","target","_toggleShowBody","allowBodyInteractions","setTimeout","state","showBody","onHideBody","document","removeEventListener","onShowBody","addEventListener","setState","_setPosition","body","scrollingParent","getElementById","scrolling_parent","dropdown","dropdownVerticalPosition","offsetTop","dropdownTrigger","querySelector","top","clientHeight","scrollTop","undefined","componentWillUnmount","clearTimeout","_getTriggerComponent","_trigger","children","_this$props$children","cloneElement","onClick","_getBodyComponent","right","setPosition","className","classNames","body_wrapper","with_arrow","bottom","contentMarkup","style","position","render","display","displayName","Trigger","forwardRef","ref","tooltip","Button","preventDefault","stopPropagation","Body","left","id"],"mappings":"kXA2BA,MAAMA,UAAYC,EAAMC,UAGpBC,YAAYC,EAAiBC,GACzBC,MAAMF,EAAOC,QAejBE,qBAEAC,oBAAuBC,IACnB,MAAMC,EAAkBC,EAASC,YAAYC,MAEzCH,IAAoBA,EAAgBI,SAASL,EAAMM,QACnDF,KAAKG,kBACCH,KAAKT,MAAMa,wBAEjBJ,KAAKN,SAAWW,WAAW,KACnBL,KAAKM,MAAMC,UACXP,KAAKG,mBAEV,YAIXA,gBAAkB,KACTH,KAAKM,MAAMC,UAMRP,KAAKT,MAAMiB,YAAYR,KAAKT,MAAMiB,aACtCC,SAASC,oBAAoB,QAASV,KAAKL,qBAAqB,KAL5DK,KAAKT,MAAMoB,YAAYX,KAAKT,MAAMoB,aACtCF,SAASG,iBAAiB,QAASZ,KAAKL,qBAAqB,IAOjEK,KAAKa,SAAS,CACVN,UAAWP,KAAKM,MAAMC,iBAY9BO,aAAgBC,IACZ,GAAIA,EAAM,CACN,MAAMC,EAAkBP,SAASQ,eAC7BjB,KAAKT,MAAM2B,iBAAmBlB,KAAKT,MAAM2B,iBAAmB,IAGhE,GAAIF,EAAiB,CACjB,MAAMG,EAAWrB,EAASC,YAAYC,MACtC,IAAKmB,EACD,OAEJ,MAAMC,EAA4BtB,EAASC,YAAYC,MAClDqB,UACCC,EAAmBH,EAAqBI,cAAc,YAC5D,IAAKD,EACD,OAEJ,MAYME,EATwBR,EAAgBS,aAChBT,EAAgBU,UAK1CN,EAT0BE,EAAgBG,aACnBV,EAAKU,aAa5BD,IAAQxB,KAAKM,MAAMkB,KACnBxB,KAAKa,SAAS,CAAEW,IAAAA,OAvF5BxB,KAAKM,MAAQ,CACTC,UAAU,EACViB,IAAKjC,EAAMiC,MAAO,GAGtBxB,KAAKN,cAAWiC,EAGpBC,uBACInB,SAASC,oBAAoB,QAASV,KAAKL,qBAAqB,GAC5DK,KAAKN,UACLmC,aAAa7B,KAAKN,UAoC1BoC,6BACI,MAAMC,WAAW/B,KAAKT,MAAMyC,iBAAXC,EAAsB,GACvC,OAAOF,EACD3C,EAAM8C,aAAaH,EAAU,CAAEI,QAASnC,KAAKG,uBAC7CwB,EA0CVS,oBACI,IAAKpC,KAAKM,MAAMC,SACZ,OAAO,KAEX,MAAMiB,IAAEA,GAAQxB,KAAKM,OACf+B,MAAEA,GAAQ,EAAVL,SAAiBA,GAAahC,KAAKT,MACnCA,EAAQ,CAAEiC,IAAAA,EAAKa,MAAAA,EAAOC,YAAatC,KAAKc,cAExCyB,EAAYC,EAAW,CACzBC,cAAc,EACdC,YAAY,EACZlB,IAAKA,EACLmB,QAASnB,IAGPT,QAAOiB,SAAAA,EAAW,GAElBY,EACc,mBAAT7B,EACDA,EAAKxB,GACLwB,EACA3B,EAAM8C,aAAanB,EAAMxB,QACzBoC,EACV,OACIvC,uBAAKmD,UAAWA,EAAWM,MAAO,CAAEC,SAAU,aACzCF,GAKbG,SACI,MAAMR,EAAYC,EAAW,oBAAqBxC,KAAKT,MAAMgD,YACvDf,IAAEA,GAAQxB,KAAKM,MAErB,OACIlB,uBAAKyD,MAAO,CAAEG,QAAS,gBAAkBT,UAAWA,GAC/Cf,GAAOxB,KAAKoC,oBACZpC,KAAK8B,wBACJN,GAAOxB,KAAKoC,sBAxIxBjD,EACY8D,mBA6IlB9D,EAAI8D,YAAc,eAWlB,MAAMC,EAAU9D,EAAM+D,YAA4C,WAE9DC,OADApB,SAAEA,EAAFG,QAAYA,EAAZkB,QAAqBA,EAArBd,UAA8BA,KAAchD,iCAS5C,OACIH,gBAACkE,6CACO/D,OACJgD,UAAWC,EAAW,UAAWD,GACjCJ,QAVR,SAAqBvC,GACjBA,EAAM2D,iBACN3D,EAAM4D,kBACFrB,GAASA,EAAQvC,IAQjByD,QAASA,EACTD,IAAKA,IAEJpB,MAcb,SAASyB,GAAKjC,IAAEA,EAAFa,MAAOA,EAAPL,SAAcA,EAAdM,YAAwBA,IAClC,MAAMO,EAA6B,CAAEC,SAAU,WAAYT,MAAO,EAAGb,IAAK,GAY1E,OAVIA,IACAqB,EAAMrB,IAAM,OACZqB,EAAMF,OAAS,GAGfN,IACAQ,EAAMR,MAAQ,OACdQ,EAAMa,KAAO,GAIbtE,uBAAKgE,IAAKd,EAAaO,MAAOA,EAAON,UAAU,OAAOoB,GAAG,0BACpD3B,GAxBbkB,EAAQD,YAAc,mBA6BtBQ,EAAKR,YAAc,iCAEF,CACb9D,IAAAA,EACA+D,QAAAA,EACAO,KAAAA"}

package/lib/components/deprecated-input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../src/components/deprecated-input/input.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './input.less'\n\ntype InputProps = {\n    /** Additional css class applied to the input. */\n    className?: string\n    ref?: React.Ref<HTMLInputElement>\n}\n\ntype Props = InputProps & React.InputHTMLAttributes<HTMLInputElement>\n\nconst Input: React.FC<React.PropsWithRef<Props>> = React.forwardRef(\n    (props: Props, ref: React.Ref<HTMLInputElement>) => {\n        const className = classNames('reactist_input', props.className)\n        return <input {...props} className={className} ref={ref} />\n    },\n)\nInput.displayName = 'Input'\n\nexport { Input }\n"],"names":["Input","React","forwardRef","props","ref","className","classNames","displayName"],"mappings":"8PAaMA,EAA6CC,EAAMC,WACrD,CAACC,EAAcC,KACX,MAAMC,EAAYC,EAAW,iBAAkBH,EAAME,WACrD,OAAOJ,2DAAWE,OAAOE,UAAWA,EAAWD,IAAKA,OAG5DJ,EAAMO,YAAc"}

package/lib/components/deprecated-select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../src/components/deprecated-select/select.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\n\nimport './select.less'\n\ntype Option = {\n    /** Optional key for each option. If not provided `value` is used. */\n    key?: string | number\n    /** Value of the option. */\n    value: string | number\n    /** Text to display for the option. */\n    text?: string | number\n    /** Whether the options is disabled or not. */\n    disabled?: boolean\n}\n\ntype Props = {\n    className?: string\n    disabled?: boolean\n    /** Currently selected value. */\n    value?: string | number\n    /** Callback for the change event. Will be called with the next value (not the full event). */\n    onChange?: (value: string) => void\n    /** Options that are rendered in the select. */\n    options?: Option[]\n    /** Value to initially be set */\n    defaultValue?: string | number\n}\n\nfunction Select({\n    value,\n    options = [],\n    onChange,\n    disabled = true,\n    className = '',\n    defaultValue,\n    ...otherProps\n}: Props) {\n    const selectClassName = classNames('reactist_select', { disabled }, className)\n    return (\n        <select\n            className={selectClassName}\n            value={value}\n            onChange={(event) => (onChange ? onChange(event.target.value) : undefined)}\n            disabled={disabled}\n            defaultValue={defaultValue}\n            {...otherProps}\n        >\n            {options?.map((option) => (\n                <option\n                    key={option.key || option.value}\n                    value={option.value}\n                    disabled={option.disabled}\n                >\n                    {option.text}\n                </option>\n            ))}\n        </select>\n    )\n}\nSelect.displayName = 'Select'\nSelect.defaultProps = {\n    options: [],\n    disabled: false,\n}\n\nexport { Select }\n"],"names":["Select","value","options","onChange","disabled","className","defaultValue","otherProps","selectClassName","classNames","React","event","target","undefined","map","option","key","text","displayName","defaultProps"],"mappings":"qUA6BA,SAASA,SAAOC,MACZA,EADYC,QAEZA,EAAU,GAFEC,SAGZA,EAHYC,SAIZA,GAAW,EAJCC,UAKZA,EAAY,GALAC,aAMZA,KACGC,iCAEH,MAAMC,EAAkBC,EAAW,kBAAmB,CAAEL,SAAAA,GAAYC,GACpE,OACIK,0CACIL,UAAWG,EACXP,MAAOA,EACPE,SAAWQ,GAAWR,EAAWA,EAASQ,EAAMC,OAAOX,YAASY,EAChET,SAAUA,EACVE,aAAcA,GACVC,SAEHL,SAAAA,EAASY,IAAKC,GACXL,0BACIM,IAAKD,EAAOC,KAAOD,EAAOd,MAC1BA,MAAOc,EAAOd,MACdG,SAAUW,EAAOX,UAEhBW,EAAOE,QAM5BjB,EAAOkB,YAAc,SACrBlB,EAAOmB,aAAe,CAClBjB,QAAS,GACTE,UAAU"}

package/lib/index.d.ts

@@ -24,20 +24,16 @@ export * from './new-components/tabs';
 export * from './new-components/modal';
 export * from './new-components/avatar';
 export * from './hooks/use-previous';
-export { default as Checkbox } from './components/checkbox';
 export { default as ColorPicker, COLORS } from './components/color-picker';
-export { default as Dropdown } from './components/dropdown';
-export { default as Input } from './components/input';
 export { default as KeyboardShortcut } from './components/keyboard-shortcut';
 export { default as KeyCapturer, SUPPORTED_KEYS } from './components/key-capturer';
-export { default as Popover } from './components/popover';
 export { default as ProgressBar } from './components/progress-bar';
-export { default as Select } from './components/select';
 export { default as Time } from './components/time';
 export { Notification } from './components/notification/notification';
 export { Tooltip } from './components/tooltip';
 export type { TooltipProps } from './components/tooltip';
 export * from './components/menu';
 export { default as DeprecatedButton } from './components/deprecated-button';
-export { default as DeprecatedModal } from './components/deprecated-modal';
-export { DeprecatedLoading } from './components/deprecated-loading';
+export { default as DeprecatedDropdown } from './components/deprecated-dropdown';
+export { default as DeprecatedInput } from './components/deprecated-input';
+export { default as DeprecatedSelect } from './components/deprecated-select';

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./components/tooltip/tooltip.js"),d=require("./new-components/button/button.js"),u=require("./new-components/alert/alert.js"),a=require("./new-components/loading/loading.js"),l=require("./new-components/notice/notice.js"),c=require("./new-components/heading/heading.js"),x=require("./new-components/text/text.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),b=require("./new-components/select-field/select-field.js"),f=require("./new-components/switch-field/switch-field.js"),k=require("./new-components/text-area/text-area.js"),M=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),h=require("./new-components/tabs/tabs.js"),v=require("./new-components/modal/modal.js"),S=require("./new-components/avatar/avatar.js"),g=require("./components/checkbox/index.js"),B=require("./components/deprecated-button/index.js"),L=require("./components/dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),y=require("./components/color-picker/index.js"),C=require("./components/input/index.js"),F=require("./components/keyboard-shortcut/index.js"),A=require("./components/key-capturer/key-capturer.js"),D=require("./components/key-capturer/index.js"),H=require("./components/popover/index.js"),O=require("./components/progress-bar/index.js"),I=require("./components/select/index.js"),E=require("./components/time/index.js"),K=require("./components/notification/notification.js"),N=require("./components/menu/menu.js"),R=require("./components/deprecated-modal/index.js"),_=require("./components/deprecated-loading/deprecated-loading.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Tooltip=p.Tooltip,exports.Button=d.Button,exports.Alert=u.Alert,exports.Loading=a.Loading,exports.Notice=l.Notice,exports.Heading=c.Heading,exports.Text=x.Text,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=b.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=k.TextArea,exports.TextField=M.TextField,exports.usePrevious=T.usePrevious,exports.Tab=h.Tab,exports.TabAwareSlot=h.TabAwareSlot,exports.TabList=h.TabList,exports.TabPanel=h.TabPanel,exports.Tabs=h.Tabs,exports.Modal=v.Modal,exports.ModalActions=v.ModalActions,exports.ModalBody=v.ModalBody,exports.ModalCloseButton=v.ModalCloseButton,exports.ModalFooter=v.ModalFooter,exports.ModalHeader=v.ModalHeader,exports.Avatar=S.Avatar,exports.Checkbox=g.default,exports.DeprecatedButton=B.default,exports.Dropdown=L.default,exports.COLORS=P.COLORS,exports.ColorPicker=y.default,exports.Input=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=A.SUPPORTED_KEYS,exports.KeyCapturer=D.default,exports.Popover=H.default,exports.ProgressBar=O.default,exports.Select=I.default,exports.Time=E.default,exports.Notification=K.Notification,exports.Menu=N.Menu,exports.MenuButton=N.MenuButton,exports.MenuGroup=N.MenuGroup,exports.MenuItem=N.MenuItem,exports.MenuList=N.MenuList,exports.SubMenu=N.SubMenu,exports.DeprecatedModal=R.default,exports.DeprecatedLoading=_.Loading;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./new-components/box/box.js"),o=require("./new-components/columns/columns.js"),t=require("./new-components/divider/divider.js"),r=require("./new-components/inline/inline.js"),n=require("./new-components/stack/stack.js"),s=require("./new-components/hidden/hidden.js"),i=require("./new-components/hidden-visually/hidden-visually.js"),p=require("./components/tooltip/tooltip.js"),d=require("./new-components/button/button.js"),u=require("./new-components/alert/alert.js"),a=require("./new-components/loading/loading.js"),l=require("./new-components/notice/notice.js"),c=require("./new-components/heading/heading.js"),x=require("./new-components/text/text.js"),m=require("./new-components/button-link/button-link.js"),j=require("./new-components/text-link/text-link.js"),q=require("./new-components/checkbox-field/checkbox-field.js"),w=require("./new-components/password-field/password-field.js"),b=require("./new-components/select-field/select-field.js"),k=require("./new-components/switch-field/switch-field.js"),M=require("./new-components/text-area/text-area.js"),f=require("./new-components/text-field/text-field.js"),T=require("./hooks/use-previous/use-previous.js"),S=require("./new-components/tabs/tabs.js"),h=require("./new-components/modal/modal.js"),v=require("./new-components/avatar/avatar.js"),B=require("./components/deprecated-button/index.js"),y=require("./components/deprecated-dropdown/index.js"),P=require("./components/color-picker/color-picker.js"),C=require("./components/color-picker/index.js"),F=require("./components/keyboard-shortcut/index.js"),L=require("./components/key-capturer/key-capturer.js"),g=require("./components/key-capturer/index.js"),A=require("./components/progress-bar/index.js"),D=require("./components/time/index.js"),H=require("./components/notification/notification.js"),O=require("./components/menu/menu.js"),I=require("./components/deprecated-input/index.js"),E=require("./components/deprecated-select/index.js");exports.Box=e.Box,exports.Column=o.Column,exports.Columns=o.Columns,exports.Divider=t.Divider,exports.Inline=r.Inline,exports.Stack=n.Stack,exports.Hidden=s.Hidden,exports.HiddenVisually=i.HiddenVisually,exports.Tooltip=p.Tooltip,exports.Button=d.Button,exports.Alert=u.Alert,exports.Loading=a.Loading,exports.Notice=l.Notice,exports.Heading=c.Heading,exports.Text=x.Text,exports.ButtonLink=m.ButtonLink,exports.TextLink=j.TextLink,exports.CheckboxField=q.CheckboxField,exports.PasswordField=w.PasswordField,exports.SelectField=b.SelectField,exports.SwitchField=k.SwitchField,exports.TextArea=M.TextArea,exports.TextField=f.TextField,exports.usePrevious=T.usePrevious,exports.Tab=S.Tab,exports.TabAwareSlot=S.TabAwareSlot,exports.TabList=S.TabList,exports.TabPanel=S.TabPanel,exports.Tabs=S.Tabs,exports.Modal=h.Modal,exports.ModalActions=h.ModalActions,exports.ModalBody=h.ModalBody,exports.ModalCloseButton=h.ModalCloseButton,exports.ModalFooter=h.ModalFooter,exports.ModalHeader=h.ModalHeader,exports.Avatar=v.Avatar,exports.DeprecatedButton=B.default,exports.DeprecatedDropdown=y.default,exports.COLORS=P.COLORS,exports.ColorPicker=C.default,exports.KeyboardShortcut=F.default,exports.SUPPORTED_KEYS=L.SUPPORTED_KEYS,exports.KeyCapturer=g.default,exports.ProgressBar=A.default,exports.Time=D.default,exports.Notification=H.Notification,exports.Menu=O.Menu,exports.MenuButton=O.MenuButton,exports.MenuGroup=O.MenuGroup,exports.MenuItem=O.MenuItem,exports.MenuList=O.MenuList,exports.SubMenu=O.SubMenu,exports.DeprecatedInput=I.default,exports.DeprecatedSelect=E.default;
 //# sourceMappingURL=index.js.map

package/lib/new-components/base-button/base-button.d.ts

@@ -19,6 +19,13 @@ declare type CommonProps = {
      * @default 'normal'
      */
     size?: ButtonSize;
+    /**
+     * Controls the shape of the button. Specifically, it allows to make it have slightly curved
+     * corners (the default) vs. having them fully curved to the point that they are as round as
+     * possible. In icon-only buttons this allows to have the button be circular.
+     * @default 'normal'
+     */
+    shape?: 'normal' | 'rounded';
     /**
      * Whether the button is disabled or not.
      * @default false
@@ -37,10 +44,6 @@ declare type CommonProps = {
      * A tooltip linked to the button element.
      */
     tooltip?: TooltipProps['content'];
-    /**
-     * The distance between the button element and the linked tooltip.
-     */
-    tooltipGapSize?: TooltipProps['gapSize'];
 };
 declare type AlignmentProps = {
     width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full';

package/lib/new-components/base-button/base-button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),t=require("../../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../../components/tooltip/tooltip.js"),i=require("../spinner/spinner.js"),o=require("./base-button.module.css.js");const r=["as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align"];function s(e){e.preventDefault()}exports.BaseButton=t.polymorphicComponent((function(t,u){let{as:c="div",variant:d,tone:p="normal",size:m="normal",disabled:f=!1,loading:b=!1,tooltip:x,tooltipGapSize:h,onClick:j,exceptionallySetClassName:S,children:v,startIcon:E,endIcon:g,icon:B,width:q="auto",align:y}=t,z=e.objectWithoutProperties(t,r);const C=b||f,I=l.createElement(n.Box,e.objectSpread2(e.objectSpread2({},z),{},{as:c,ref:u,"aria-disabled":C,onClick:C?s:j,width:B?void 0:q,className:[S,o.default.baseButton,o.default["variant-"+d],o.default["tone-"+p],o.default["size-"+m],"auto"!==q&&null==B&&null!=y?o.default["align-"+y]:null,B?o.default.iconButton:null,f?o.default.disabled:null]}),B?b&&l.createElement(i.Spinner,null)||B:l.createElement(l.Fragment,null,E?l.createElement(n.Box,{display:"flex",className:o.default.startIcon,"aria-hidden":!0},b&&!g?l.createElement(i.Spinner,null):E):null,v?l.createElement("span",{className:o.default.label},v):null,g||b&&!E?l.createElement(n.Box,{display:"flex",className:o.default.endIcon,"aria-hidden":!0},b?l.createElement(i.Spinner,null):g):null)),N=B?null!=x?x:z["aria-label"]:x;return N?l.createElement(a.Tooltip,{content:N,gapSize:h},I):I}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),l=require("../../utils/polymorphism.js"),n=require("../box/box.js"),a=require("../../components/tooltip/tooltip.js"),o=require("../spinner/spinner.js"),i=require("./base-button.module.css.js");const r=["as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align"];function s(e){e.preventDefault()}exports.BaseButton=l.polymorphicComponent((function(l,d){let{as:u="div",variant:c,tone:p="normal",size:m="normal",shape:f="normal",disabled:b=!1,loading:h=!1,tooltip:x,onClick:v,exceptionallySetClassName:j,children:B,startIcon:E,endIcon:g,icon:q,width:y="auto",align:S="center"}=l,C=e.objectWithoutProperties(l,r);const I=h||b,N=t.createElement(n.Box,e.objectSpread2(e.objectSpread2({},C),{},{as:u,ref:d,"aria-disabled":I,onClick:I?s:v,width:q?void 0:y,className:[j,i.default.baseButton,i.default["variant-"+c],i.default["tone-"+p],i.default["size-"+m],"rounded"===f?i.default["shape-rounded"]:null,q?i.default.iconButton:null,b?i.default.disabled:null]}),q?h&&t.createElement(o.Spinner,null)||q:t.createElement(t.Fragment,null,E?t.createElement(n.Box,{display:"flex",className:i.default.startIcon,"aria-hidden":!0},h&&!g?t.createElement(o.Spinner,null):E):null,B?t.createElement(n.Box,{as:"span",className:i.default.label,overflow:"hidden",width:"full"===y?"full":void 0,textAlign:"auto"===y?"center":S},B):null,g||h&&!E?t.createElement(n.Box,{display:"flex",className:i.default.endIcon,"aria-hidden":!0},h?t.createElement(o.Spinner,null):g):null)),w=q&&void 0===x?C["aria-label"]:x;return w?t.createElement(a.Tooltip,{content:w},N):N}));
 //# sourceMappingURL=base-button.js.map

package/lib/new-components/base-button/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n    /**\n     * The distance between the button element and the linked tooltip.\n     */\n    tooltipGapSize?: TooltipProps['gapSize']\n}\n\ntype AlignmentProps = {\n    width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n    align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n    width?: 'auto'\n    align?: never\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n    width?: never\n    align?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        tooltipGapSize,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        width = 'auto',\n        align,\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            width={icon ? undefined : width}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                width !== 'auto' && icon == null && align != null ? styles[`align-${align}`] : null,\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? <span className={styles.label}>{children}</span> : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon ? tooltip ?? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent} gapSize={tooltipGapSize}>\n            {buttonElement}\n        </Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","disabled","loading","tooltip","tooltipGapSize","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","tooltipContent","Tooltip","content","gapSize"],"mappings":"0gBAOA,SAASA,EAAeC,GACpBA,EAAMD,oCAmFgBE,wBAA6C,WAoBnEC,OAnBAC,GACIA,EAAK,MADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,SAKIA,GAAW,EALfC,QAMIA,GAAU,UACVC,EAPJC,eAQIA,EARJC,QASIA,EATJC,0BAUIA,EAVJC,SAWIA,EAXJC,UAYIA,EAZJC,QAaIA,EAbJC,KAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,KACGC,iCAIP,MAAMC,EAAaZ,GAAWD,EACxBc,EACFC,gBAACC,yCACOJ,OACJhB,GAAIA,EACJD,IAAKA,kBACUkB,EACfT,QAASS,EAAarB,EAAiBY,EACvCM,MAAOD,OAAOQ,EAAYP,EAC1BQ,UAAW,CACPb,EACAc,UAAOC,WACPD,qBAAkBtB,GAClBsB,kBAAerB,GACfqB,kBAAepB,GACL,SAAVW,GAA4B,MAARD,GAAyB,MAATE,EAAgBQ,mBAAgBR,GAAW,KAC/EF,EAAOU,UAAOE,WAAa,KAC3BrB,EAAWmB,UAAOnB,SAAW,QAGhCS,EACIR,GAAWc,gBAACO,iBAAeb,EAE5BM,gCACKR,EACGQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOZ,4BACjCN,IAAYO,EAAUO,gBAACO,gBAAaf,GAEzC,KACHD,EAAWS,wBAAMG,UAAWC,UAAOK,OAAQlB,GAAmB,KAC9DE,GAAYP,IAAYM,EACrBQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOX,0BACjCP,EAAUc,gBAACO,gBAAad,GAE7B,OAOdiB,EAAiBhB,QAAOP,EAAAA,EAAWU,EAAM,cAAgBV,EAC/D,OAAOuB,EACHV,gBAACW,WAAQC,QAASF,EAAgBG,QAASzB,GACtCW,GAGLA"}
+{"version":3,"file":"base-button.js","sources":["../../../src/new-components/base-button/base-button.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Tooltip, TooltipProps } from '../../components/tooltip'\nimport { polymorphicComponent } from '../../utils/polymorphism'\nimport { Box } from '../box'\nimport { Spinner } from '../spinner'\nimport styles from './base-button.module.css'\n\nfunction preventDefault(event: React.SyntheticEvent) {\n    event.preventDefault()\n}\n\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'quaternary'\ntype ButtonTone = 'normal' | 'destructive'\ntype ButtonSize = 'small' | 'normal' | 'large'\ntype IconElement = React.ReactChild\n\ntype CommonProps = {\n    /**\n     * The button's variant.\n     */\n    variant: ButtonVariant\n\n    /**\n     * The button's tone.\n     * @default 'normal'\n     */\n    tone?: ButtonTone\n\n    /**\n     * The button's size.\n     * @default 'normal'\n     */\n    size?: ButtonSize\n\n    /**\n     * Controls the shape of the button. Specifically, it allows to make it have slightly curved\n     * corners (the default) vs. having them fully curved to the point that they are as round as\n     * possible. In icon-only buttons this allows to have the button be circular.\n     * @default 'normal'\n     */\n    shape?: 'normal' | 'rounded'\n\n    /**\n     * Whether the button is disabled or not.\n     * @default false\n     */\n    disabled?: boolean\n\n    /**\n     * Whether the button is busy/loading.\n     *\n     * A button in this state is functionally and semantically disabled. Visually is does not look\n     * dimmed (as disabled buttons normally do), but it shows a loading spinner instead.\n     *\n     * @default false\n     */\n    loading?: boolean\n\n    /**\n     * A tooltip linked to the button element.\n     */\n    tooltip?: TooltipProps['content']\n}\n\ntype AlignmentProps = {\n    width: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'full'\n    align?: 'start' | 'center' | 'end'\n}\n\ntype AutoWidthProps = {\n    width?: 'auto'\n    align?: never\n}\n\ntype IconButtonProps = {\n    icon: IconElement\n    'aria-label': string\n    children?: never\n    startIcon?: never\n    endIcon?: never\n    width?: never\n    align?: never\n}\n\ntype LabelledButtonProps = {\n    children: NonNullable<React.ReactNode>\n    startIcon?: IconElement\n    endIcon?: IconElement\n    icon?: never\n} & (AutoWidthProps | AlignmentProps)\n\nexport type BaseButtonProps = CommonProps & (IconButtonProps | LabelledButtonProps)\n\n/**\n * The component that powers `Button` and `ButtonLink`, where the button styling logic and some\n * common functionality resides. This component is internal to Reactist.\n *\n * @see Button\n * @see ButtonLink\n */\nexport const BaseButton = polymorphicComponent<'div', BaseButtonProps>(function BaseButton(\n    {\n        as = 'div',\n        variant,\n        tone = 'normal',\n        size = 'normal',\n        shape = 'normal',\n        disabled = false,\n        loading = false,\n        tooltip,\n        onClick,\n        exceptionallySetClassName,\n        children,\n        startIcon,\n        endIcon,\n        icon,\n        width = 'auto',\n        align = 'center',\n        ...props\n    },\n    ref,\n) {\n    const isDisabled = loading || disabled\n    const buttonElement = (\n        <Box\n            {...props}\n            as={as}\n            ref={ref}\n            aria-disabled={isDisabled}\n            onClick={isDisabled ? preventDefault : onClick}\n            width={icon ? undefined : width}\n            className={[\n                exceptionallySetClassName,\n                styles.baseButton,\n                styles[`variant-${variant}`],\n                styles[`tone-${tone}`],\n                styles[`size-${size}`],\n                shape === 'rounded' ? styles['shape-rounded'] : null,\n                icon ? styles.iconButton : null,\n                disabled ? styles.disabled : null,\n            ]}\n        >\n            {icon ? (\n                (loading && <Spinner />) || icon\n            ) : (\n                <>\n                    {startIcon ? (\n                        <Box display=\"flex\" className={styles.startIcon} aria-hidden>\n                            {loading && !endIcon ? <Spinner /> : startIcon}\n                        </Box>\n                    ) : null}\n                    {children ? (\n                        <Box\n                            as=\"span\"\n                            className={styles.label}\n                            overflow=\"hidden\"\n                            width={width === 'full' ? 'full' : undefined}\n                            textAlign={width === 'auto' ? 'center' : align}\n                        >\n                            {children}\n                        </Box>\n                    ) : null}\n                    {endIcon || (loading && !startIcon) ? (\n                        <Box display=\"flex\" className={styles.endIcon} aria-hidden>\n                            {loading ? <Spinner /> : endIcon}\n                        </Box>\n                    ) : null}\n                </>\n            )}\n        </Box>\n    )\n\n    // If it's an icon-only button, make sure it uses the aria-label as tooltip if no tooltip was provided\n    const tooltipContent = icon && tooltip === undefined ? props['aria-label'] : tooltip\n    return tooltipContent ? (\n        <Tooltip content={tooltipContent}>{buttonElement}</Tooltip>\n    ) : (\n        buttonElement\n    )\n})\n"],"names":["preventDefault","event","polymorphicComponent","ref","as","variant","tone","size","shape","disabled","loading","tooltip","onClick","exceptionallySetClassName","children","startIcon","endIcon","icon","width","align","props","isDisabled","buttonElement","React","Box","undefined","className","styles","baseButton","iconButton","Spinner","display","label","overflow","textAlign","tooltipContent","Tooltip","content"],"mappings":"igBAOA,SAASA,EAAeC,GACpBA,EAAMD,oCA4FgBE,wBAA6C,WAoBnEC,OAnBAC,GACIA,EAAK,MADTC,QAEIA,EAFJC,KAGIA,EAAO,SAHXC,KAIIA,EAAO,SAJXC,MAKIA,EAAQ,SALZC,SAMIA,GAAW,EANfC,QAOIA,GAAU,UACVC,EARJC,QASIA,EATJC,0BAUIA,EAVJC,SAWIA,EAXJC,UAYIA,EAZJC,QAaIA,EAbJC,KAcIA,EAdJC,MAeIA,EAAQ,OAfZC,MAgBIA,EAAQ,YACLC,iCAIP,MAAMC,EAAaX,GAAWD,EACxBa,EACFC,gBAACC,yCACOJ,OACJhB,GAAIA,EACJD,IAAKA,kBACUkB,EACfT,QAASS,EAAarB,EAAiBY,EACvCM,MAAOD,OAAOQ,EAAYP,EAC1BQ,UAAW,CACPb,EACAc,UAAOC,WACPD,qBAAkBtB,GAClBsB,kBAAerB,GACfqB,kBAAepB,GACL,YAAVC,EAAsBmB,UAAO,iBAAmB,KAChDV,EAAOU,UAAOE,WAAa,KAC3BpB,EAAWkB,UAAOlB,SAAW,QAGhCQ,EACIP,GAAWa,gBAACO,iBAAeb,EAE5BM,gCACKR,EACGQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOZ,4BACjCL,IAAYM,EAAUO,gBAACO,gBAAaf,GAEzC,KACHD,EACGS,gBAACC,OACGpB,GAAG,OACHsB,UAAWC,UAAOK,MAClBC,SAAS,SACTf,MAAiB,SAAVA,EAAmB,YAASO,EACnCS,UAAqB,SAAVhB,EAAmB,SAAWC,GAExCL,GAEL,KACHE,GAAYN,IAAYK,EACrBQ,gBAACC,OAAIO,QAAQ,OAAOL,UAAWC,UAAOX,0BACjCN,EAAUa,gBAACO,gBAAad,GAE7B,OAOdmB,EAAiBlB,QAAoBQ,IAAZd,EAAwBS,EAAM,cAAgBT,EAC7E,OAAOwB,EACHZ,gBAACa,WAAQC,QAASF,GAAiBb,GAEnCA"}

package/lib/new-components/base-button/base-button.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={baseButton:"_7a2031d6",label:"_09c23660","align-start":"dd82f17a","align-center":"_8a9315ae","align-end":"_6acb4219","size-small":"_1e48abcb","size-normal":"_949f7858","size-large":"_34ac3da9",disabled:"_7e5800ce",iconButton:"_1bdc5d38",startIcon:"_270d7bdf",endIcon:"_471c6e23","variant-primary":"a878a9a4","variant-secondary":"_81c213d2","variant-tertiary":"_12f96f70","variant-quaternary":"_8c546508","tone-destructive":"_441a7e3a"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={baseButton:"a8af2163",label:"bbdb467b","shape-rounded":"ca02fc07","size-small":"_45ffe137","size-normal":"_352995bd","size-large":"_3991076f",disabled:"f82232b7",iconButton:"ef4c88db",startIcon:"a08c25c7",endIcon:"_2f6adc11","variant-primary":"_3d1243b2","variant-secondary":"_16b6b062","variant-tertiary":"cffaea5e","variant-quaternary":"_98cd5c3f","tone-destructive":"_99cb1c4d"};
 //# sourceMappingURL=base-button.module.css.js.map

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

@@ -4,10 +4,35 @@ import type { WithEnhancedClassName } from '../common-types';
 declare type FieldHintProps = {
     id: string;
     children: React.ReactNode;
-    hidden?: boolean;
 };
 declare function FieldHint(props: FieldHintProps): JSX.Element;
+declare type FieldTone = 'neutral' | 'success' | 'error' | 'loading';
+declare type FieldMessageProps = FieldHintProps & {
+    tone: FieldTone;
+};
+declare function FieldMessage({ id, children, tone }: FieldMessageProps): JSX.Element;
+declare type ChildrenRenderProps = {
+    id: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: true;
+};
 declare type HtmlInputProps<T extends HTMLElement> = React.DetailedHTMLProps<React.InputHTMLAttributes<T>, T>;
+declare type BaseFieldVariant = 'default' | 'bordered';
+declare type BaseFieldVariantProps = {
+    /**
+     * Provides alternative visual layouts or modes that the field can be rendered in.
+     *
+     * Namely, there are two variants supported:
+     *
+     * - the default one
+     * - a "bordered" variant, where the border of the field surrounds also the labels, instead
+     *   of just surrounding the actual field element
+     *
+     * In both cases, the message and description texts for the field lie outside the bordered
+     * area.
+     */
+    variant?: BaseFieldVariant;
+};
 declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLInputElement>, 'id' | 'hidden' | 'aria-describedby'> & {
     /**
      * The main label for this field element.
@@ -39,10 +64,45 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      * @see secondaryLabel
      */
     auxiliaryLabel?: React.ReactNode;
+    /**
+     * A message associated with the field. It is rendered below the field, and with an
+     * appearance that conveys the tone of the field (e.g. coloured red for errors, green for
+     * success, etc).
+     *
+     * The message element is associated to the field via the `aria-describedby` attribute. If a
+     * `hint` is provided, both the hint and the message are associated as the field accessible
+     * description.
+     *
+     * In the future, when `aria-errormessage` gets better user agent support, we should use it
+     * to associate the filed with a message when tone is `"error"`.
+     *
+     * @see tone
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid
+     */
+    message?: React.ReactNode;
+    /**
+     * The tone with which the message, if any, is presented.
+     *
+     * If the tone is `"error"`, the field border turns red, and the message, if any, is also
+     * red.
+     *
+     * When the tone is `"loading"`, it is recommended that you also disable the field. However,
+     * this is not enforced by the component. It is only a recommendation.
+     *
+     * @see message
+     * @see hint
+     */
+    tone?: FieldTone;
     /**
      * A hint or help-like content associated as the accessible description of the field. It is
      * generally rendered below it, and with a visual style that reduces its prominence (i.e.
      * as secondary text).
+     *
+     * It sets the `aria-describedby` attribute pointing to the element that holds the hint
+     * content.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
      */
     hint?: React.ReactNode;
     /**
@@ -53,12 +113,9 @@ declare type BaseFieldProps = WithEnhancedClassName & Pick<HtmlInputProps<HTMLIn
      * Used internally by components composed using `BaseField`. It is not exposed as part of
      * the public props of such components.
      */
-    children: (props: {
-        id: string;
-        'aria-describedby'?: string;
-    }) => React.ReactNode;
+    children: (props: ChildrenRenderProps) => React.ReactNode;
 };
-declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
-declare function BaseField({ label, secondaryLabel, auxiliaryLabel, hint, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & WithEnhancedClassName): JSX.Element;
-export { BaseField, FieldHint };
-export type { FieldComponentProps };
+declare type FieldComponentProps<T extends HTMLElement> = Omit<BaseFieldProps, 'children' | 'className' | 'variant'> & Omit<HtmlInputProps<T>, 'className' | 'style'>;
+declare function BaseField({ variant, label, secondaryLabel, auxiliaryLabel, hint, message, tone, className, children, maxWidth, hidden, 'aria-describedby': originalAriaDescribedBy, id: originalId, }: BaseFieldProps & BaseFieldVariantProps & WithEnhancedClassName): JSX.Element;
+export { BaseField, FieldHint, FieldMessage };
+export type { BaseFieldVariant, BaseFieldVariantProps, FieldComponentProps };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),t=require("../stack/stack.js"),r=require("../text/text.js"),s=require("../common-helpers.js"),i=require("./base-field.module.css.js");function n(l){return a.createElement(r.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},l))}exports.BaseField=function({label:e,secondaryLabel:d,auxiliaryLabel:c,hint:u,className:o,children:m,maxWidth:p,hidden:b,"aria-describedby":x,id:y}){const f=s.useId(y),E=s.useId(),h=null!=x?x:u?E:void 0;return a.createElement(t.Stack,{space:"small"},a.createElement(l.Box,{className:[o,i.default.container],maxWidth:p,hidden:b},a.createElement(l.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd",paddingBottom:"small"},a.createElement(r.Text,{size:"body",as:"label",htmlFor:f},e?a.createElement("span",{className:i.default.primaryLabel},e):null,d?a.createElement("span",{className:i.default.secondaryLabel}," (",d,")"):null),c?a.createElement(l.Box,{className:i.default.auxiliaryLabel,paddingLeft:"small"},c):null),m(h?{id:f,"aria-describedby":h}:{id:f})),u?a.createElement(n,{hidden:b,id:E},u):null)},exports.FieldHint=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),l=require("../box/box.js"),r=require("../stack/stack.js"),t=require("../spinner/spinner.js"),n=require("../text/text.js"),i=require("../common-helpers.js"),s=require("./base-field.module.css.js");function d(l){return a.createElement(n.Text,e.objectSpread2({as:"p",tone:"secondary",size:"copy"},l))}function o(l){return a.createElement("svg",e.objectSpread2({width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg"},l),a.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",fill:"currentColor"}))}function c({id:e,children:r,tone:i}){return a.createElement(n.Text,{as:"p",tone:"error"===i?"danger":"success"===i?"positive":"normal",size:"copy",id:e},a.createElement(l.Box,{as:"span",marginRight:"xsmall",display:"inlineFlex",className:s.default.messageIcon},"loading"===i?a.createElement(t.Spinner,{size:16}):a.createElement(o,{"aria-hidden":!0})),r)}exports.BaseField=function({variant:e="default",label:t,secondaryLabel:o,auxiliaryLabel:u,hint:m,message:p,tone:x="neutral",className:b,children:f,maxWidth:C,hidden:E,"aria-describedby":h,id:y}){const g=i.useId(y),j=i.useId(),v=i.useId(),B={id:g,"aria-describedby":null!=h?h:[p?v:null,j].filter(Boolean).join(" "),"aria-invalid":"error"===x||void 0};return a.createElement(r.Stack,{space:"small",hidden:E},a.createElement(l.Box,{className:[b,s.default.container,"error"===x?s.default.error:null,"bordered"===e?s.default.bordered:null],maxWidth:C},a.createElement(l.Box,{as:"span",display:"flex",justifyContent:"spaceBetween",alignItems:"flexEnd"},a.createElement(n.Text,{size:"bordered"===e?"caption":"body",as:"label",htmlFor:g},t?a.createElement("span",{className:s.default.primaryLabel},t):null,o?a.createElement("span",{className:s.default.secondaryLabel}," (",o,")"):null),u?a.createElement(l.Box,{className:s.default.auxiliaryLabel,paddingLeft:"small"},u):null),f(B)),p?a.createElement(c,{id:v,tone:x},p):null,m?a.createElement(d,{id:j},m):null)},exports.FieldHint=d,exports.FieldMessage=c;
 //# sourceMappingURL=base-field.js.map