@economic/taco 0.0.26-alpha.6 → 0.0.26-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/components/Field/Field.js +1 -1
- package/dist/esm/components/Field/Field.js.map +1 -1
- package/dist/esm/components/IconButton/IconButton.js +1 -1
- package/dist/esm/components/IconButton/IconButton.js.map +1 -1
- package/dist/taco.cjs.development.js +2 -2
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
|
@@ -18,7 +18,7 @@ var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
|
|
|
18
18
|
var idRef = useRef((_children$props$id = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.id) !== null && _children$props$id !== void 0 ? _children$props$id : v4());
|
|
19
19
|
var isInvalid = (_children$props$inval = children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.invalid) !== null && _children$props$inval !== void 0 ? _children$props$inval : invalid;
|
|
20
20
|
var isRequired = (_children$props$requi = children === null || children === void 0 ? void 0 : (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.required) !== null && _children$props$requi !== void 0 ? _children$props$requi : required;
|
|
21
|
-
var className = cn('flex flex-col mb-
|
|
21
|
+
var className = cn('flex flex-col mb-4', {
|
|
22
22
|
'pt-5': !label
|
|
23
23
|
}, props.className);
|
|
24
24
|
var labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport './Field.css';\n\nexport type FieldProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: JSX.Element;\n disabled?: boolean;\n invalid?: boolean;\n label?: string | JSX.Element;\n message?: string | JSX.Element;\n required?: boolean;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLDivElement>) {\n const { children, disabled, invalid, label, message, required, ...otherProps } = props;\n const idRef = React.useRef(children?.props?.id ?? uuid());\n const isInvalid = children?.props?.invalid ?? invalid;\n const isRequired = children?.props?.required ?? required;\n const className = cn(\n 'flex flex-col mb-
|
|
1
|
+
{"version":3,"file":"Field.js","sources":["../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport './Field.css';\n\nexport type FieldProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n children: JSX.Element;\n disabled?: boolean;\n invalid?: boolean;\n label?: string | JSX.Element;\n message?: string | JSX.Element;\n required?: boolean;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLDivElement>) {\n const { children, disabled, invalid, label, message, required, ...otherProps } = props;\n const idRef = React.useRef(children?.props?.id ?? uuid());\n const isInvalid = children?.props?.invalid ?? invalid;\n const isRequired = children?.props?.required ?? required;\n const className = cn(\n 'flex flex-col mb-4',\n {\n 'pt-5': !label,\n },\n props.className\n );\n\n const labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {\n 'text-grey-dark': disabled,\n });\n\n const messageClassName = cn('text-xs leading-normal truncate flex-none', {\n 'text-grey-darkest': !isInvalid,\n 'text-red': isInvalid,\n 'opacity-50': disabled,\n });\n\n if (!label && !children?.props['aria-label']) {\n console.warn(\n 'TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.'\n );\n }\n\n return (\n <div {...otherProps} className={className} data-taco=\"field\" ref={ref}>\n {label && (\n <label htmlFor={idRef.current} className={labelClassName} data-taco=\"label\">\n {label}\n {isRequired ? '*' : ''}\n </label>\n )}\n {idRef.current !== children?.props?.id ? React.cloneElement(children, { id: idRef.current }) : children}\n {message && (\n <span className={messageClassName} role={isInvalid ? 'alert' : undefined}>\n {message}\n </span>\n )}\n </div>\n );\n});\n"],"names":["Field","React","props","ref","children","disabled","invalid","label","message","required","otherProps","idRef","id","uuid","isInvalid","isRequired","className","cn","labelClassName","messageClassName","console","warn","htmlFor","current","role","undefined"],"mappings":";;;;;;IAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;;;AAClC,MAAQC,QAAR,GAAiFF,KAAjF,CAAQE,QAAR;AAAA,MAAkBC,QAAlB,GAAiFH,KAAjF,CAAkBG,QAAlB;AAAA,MAA4BC,OAA5B,GAAiFJ,KAAjF,CAA4BI,OAA5B;AAAA,MAAqCC,KAArC,GAAiFL,KAAjF,CAAqCK,KAArC;AAAA,MAA4CC,OAA5C,GAAiFN,KAAjF,CAA4CM,OAA5C;AAAA,MAAqDC,QAArD,GAAiFP,KAAjF,CAAqDO,QAArD;AAAA,MAAkEC,UAAlE,iCAAiFR,KAAjF;;AACA,MAAMS,KAAK,GAAGV,MAAA,uBAAaG,QAAb,aAAaA,QAAb,0CAAaA,QAAQ,CAAEF,KAAvB,oDAAa,gBAAiBU,EAA9B,mEAAoCC,EAAI,EAAxC,CAAd;AACA,MAAMC,SAAS,4BAAGV,QAAH,aAAGA,QAAH,2CAAGA,QAAQ,CAAEF,KAAb,qDAAG,iBAAiBI,OAApB,yEAA+BA,OAA9C;AACA,MAAMS,UAAU,4BAAGX,QAAH,aAAGA,QAAH,2CAAGA,QAAQ,CAAEF,KAAb,qDAAG,iBAAiBO,QAApB,yEAAgCA,QAAhD;AACA,MAAMO,SAAS,GAAGC,EAAE,CAChB,oBADgB,EAEhB;AACI,YAAQ,CAACV;AADb,GAFgB,EAKhBL,KAAK,CAACc,SALU,CAApB;AAQA,MAAME,cAAc,GAAGD,EAAE,CAAC,+CAAD,EAAkD;AACvE,sBAAkBZ;AADqD,GAAlD,CAAzB;AAIA,MAAMc,gBAAgB,GAAGF,EAAE,CAAC,2CAAD,EAA8C;AACrE,yBAAqB,CAACH,SAD+C;AAErE,gBAAYA,SAFyD;AAGrE,kBAAcT;AAHuD,GAA9C,CAA3B;;AAMA,MAAI,CAACE,KAAD,IAAU,EAACH,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAEF,KAAV,CAAgB,YAAhB,CAAD,CAAd,EAA8C;AAC1CkB,IAAAA,OAAO,CAACC,IAAR,CACI,wJADJ;AAGH;;AAED,SACIpB,aAAA,MAAA,oBAASS;AAAYM,IAAAA,SAAS,EAAEA;iBAAqB;AAAQb,IAAAA,GAAG,EAAEA;IAAlE,EACKI,KAAK,IACFN,aAAA,QAAA;AAAOqB,IAAAA,OAAO,EAAEX,KAAK,CAACY;AAASP,IAAAA,SAAS,EAAEE;iBAA0B;GAApE,EACKX,KADL,EAEKQ,UAAU,GAAG,GAAH,GAAS,EAFxB,CAFR,EAOKJ,KAAK,CAACY,OAAN,MAAkBnB,QAAlB,aAAkBA,QAAlB,2CAAkBA,QAAQ,CAAEF,KAA5B,qDAAkB,iBAAiBU,EAAnC,IAAwCX,YAAA,CAAmBG,QAAnB,EAA6B;AAAEQ,IAAAA,EAAE,EAAED,KAAK,CAACY;AAAZ,GAA7B,CAAxC,GAA8FnB,QAPnG,EAQKI,OAAO,IACJP,aAAA,OAAA;AAAMe,IAAAA,SAAS,EAAEG;AAAkBK,IAAAA,IAAI,EAAEV,SAAS,GAAG,OAAH,GAAaW;GAA/D,EACKjB,OADL,CATR,CADJ;AAgBH,CA7CoB;;;;"}
|
|
@@ -12,7 +12,7 @@ var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
|
|
|
12
12
|
rounded = _props$rounded === void 0 ? false : _props$rounded,
|
|
13
13
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
14
14
|
|
|
15
|
-
var className = cn(getButtonClasses(), getAppearanceClasses(appearance, true), {
|
|
15
|
+
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(appearance, true), {
|
|
16
16
|
'rounded-full': rounded,
|
|
17
17
|
rounded: !rounded,
|
|
18
18
|
'cursor-not-allowed opacity-50': props.disabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /** Hanger component associated with the button. */\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /** Set which icon should be rendered within button */\n icon: IconName; // this dynamic type causes the type extraction for props to fail\n /** Menu component associated with the button. */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /**\n * Set whether the button is rounded.\n * Default value is `false`\n */\n rounded?: boolean;\n /** A tooltip to show when hovering over the button */\n tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n const { appearance, icon, rounded = false, ...otherProps } = props;\n\n const className = cn(\n getButtonClasses(),\n getAppearanceClasses(appearance, true),\n {\n 'rounded-full': rounded,\n rounded: !rounded,\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n },\n props.className\n );\n\n if (!icon) {\n return null;\n }\n\n return createButton(\n { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n className,\n ref\n );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,UAAR,GAA6DF,KAA7D,CAAQE,UAAR;AAAA,MAAoBC,IAApB,GAA6DH,KAA7D,CAAoBG,IAApB;AAAA,uBAA6DH,KAA7D,CAA0BI,OAA1B;AAAA,MAA0BA,OAA1B,+BAAoC,KAApC;AAAA,MAA8CC,UAA9C,iCAA6DL,KAA7D;;AAEA,MAAMM,SAAS,GAAGC,EAAE,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n /** Appearance will change the style of the button */\n appearance?: Appearance;\n /**\n * Dialog component associated with the button, clicking the button will open the dialog.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated dialog when clicked.\n */\n dialog?: (props: Partial<DialogProps>) => JSX.Element;\n /** Hanger component associated with the button. */\n hanger?: (props: Partial<HangerProps>) => JSX.Element;\n /** Set which icon should be rendered within button */\n icon: IconName; // this dynamic type causes the type extraction for props to fail\n /** Menu component associated with the button. */\n menu?: (props: Partial<MenuProps>) => JSX.Element;\n /**\n * Popover component associated with the button, clicking the button will open the popover.\n * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n * the button should be only to open the associated popover when clicked.\n */\n popover?: (props: Partial<PopoverProps>) => JSX.Element;\n /**\n * Set whether the button is rounded.\n * Default value is `false`\n */\n rounded?: boolean;\n /** A tooltip to show when hovering over the button */\n tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n const { appearance, icon, rounded = false, ...otherProps } = props;\n\n const className = cn(\n 'w-8',\n getButtonClasses(),\n getAppearanceClasses(appearance, true),\n {\n 'rounded-full': rounded,\n rounded: !rounded,\n 'cursor-not-allowed opacity-50': props.disabled,\n 'focus:yt-focus active:focus:yt-focus': !props.disabled,\n },\n props.className\n );\n\n if (!icon) {\n return null;\n }\n\n return createButton(\n { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n className,\n ref\n );\n});\n"],"names":["IconButton","React","props","ref","appearance","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,UAAR,GAA6DF,KAA7D,CAAQE,UAAR;AAAA,MAAoBC,IAApB,GAA6DH,KAA7D,CAAoBG,IAApB;AAAA,uBAA6DH,KAA7D,CAA0BI,OAA1B;AAAA,MAA0BA,OAA1B,+BAAoC,KAApC;AAAA,MAA8CC,UAA9C,iCAA6DL,KAA7D;;AAEA,MAAMM,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACP,UAAD,EAAa,IAAb,CAHJ,EAIhB;AACI,oBAAgBE,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCJ,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAJgB,EAUhBV,KAAK,CAACM,SAVU,CAApB;;AAaA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOQ,YAAY,cACVN,UADU;AACEO,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEX;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,SAFe,EAGfL,GAHe,CAAnB;AAKH,CAzByB;;;;"}
|
|
@@ -3467,7 +3467,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
|
|
|
3467
3467
|
rounded = _props$rounded === void 0 ? false : _props$rounded,
|
|
3468
3468
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
|
|
3469
3469
|
|
|
3470
|
-
var className = cn(getButtonClasses(), getAppearanceClasses(appearance, true), {
|
|
3470
|
+
var className = cn('w-8', getButtonClasses(), getAppearanceClasses(appearance, true), {
|
|
3471
3471
|
'rounded-full': rounded,
|
|
3472
3472
|
rounded: !rounded,
|
|
3473
3473
|
'cursor-not-allowed opacity-50': props.disabled,
|
|
@@ -5955,7 +5955,7 @@ var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
|
|
|
5955
5955
|
var idRef = React.useRef((_children$props$id = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.id) !== null && _children$props$id !== void 0 ? _children$props$id : uuid.v4());
|
|
5956
5956
|
var isInvalid = (_children$props$inval = children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.invalid) !== null && _children$props$inval !== void 0 ? _children$props$inval : invalid;
|
|
5957
5957
|
var isRequired = (_children$props$requi = children === null || children === void 0 ? void 0 : (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.required) !== null && _children$props$requi !== void 0 ? _children$props$requi : required;
|
|
5958
|
-
var className = cn('flex flex-col mb-
|
|
5958
|
+
var className = cn('flex flex-col mb-4', {
|
|
5959
5959
|
'pt-5': !label
|
|
5960
5960
|
}, props.className);
|
|
5961
5961
|
var labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {
|