@economic/taco 1.17.1 → 1.17.3

package/dist/esm/packages/taco/src/components/Input/Input.js

@@ -43,7 +43,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
     'pr-8': !!postfix
   }, attributes.className);
   return /*#__PURE__*/createElement("div", {
-    className: "relative inline-flex w-full"
+    className: "relative inline-flex w-full",
+    "data-taco": "input-container",
+    style: {
+      opacity: 0.999
+    }
   }, /*#__PURE__*/createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
@@ -73,7 +77,7 @@ const Affix = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Affix(props, r
     type
   } = props;
   if (children) {
-    return /*#__PURE__*/createElement("span", {
+    return /*#__PURE__*/createElement("div", {
       className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
       // icon
       '[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
@@ -97,9 +101,7 @@ const Input = /*#__PURE__*/forwardRef(function LegacyInput(props, ref) {
   let postfix;
   if (button) {
     const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none', {
-      [getButtonStateClasses(attributes.invalid)]: !props.disabled
-    }, button.props.className);
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
     postfix = /*#__PURE__*/cloneElement(button, {
       className: buttonClassName,
       disabled

package/dist/esm/packages/taco/src/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    let handleKeyDown = onKeyDown;\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n    if (validSetSelectionRangeTypes.includes(type)) {\n        handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n\n            if (typeof onKeyDown === 'function') {\n                onKeyDown(event);\n            }\n        };\n    }\n\n    const prefixRef = React.useRef<HTMLSpanElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLSpanElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    return (\n        <div className=\"relative inline-flex w-full\">\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n                type={type}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children?: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLSpanElement>) {\n        const { children, disabled, type } = props;\n\n        if (children) {\n            return (\n                <span\n                    className={cn(\n                        'group absolute top-0 flex h-full items-center justify-center px-2',\n                        // icon\n                        '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                        {\n                            'text-grey-300': disabled,\n                            'text-grey-700': !disabled,\n                            'left-0 [&>button]:!-ml-2': type === 'prefix',\n                            'right-0 [&>button]:!-mr-2': type === 'postfix',\n                        }\n                    )}\n                    ref={ref}>\n                    {children}\n                </span>\n            );\n        }\n\n        return null;\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            {\n                [getButtonStateClasses(attributes.invalid)]: !props.disabled,\n            },\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","includes","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../../../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getButtonStateClasses, getInputClasses } from './util';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\nexport type InputWithoutDeprecatedFeaturesProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix'> & {\n    /** Draws attention to the input by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    postfix?: string | JSX.Element;\n    prefix?: string | JSX.Element;\n};\n\nconst validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];\n\nconst InputWithoutDeprecatedFeatures = React.forwardRef(function InputWithoutDeprecatedFeatures(\n    props: InputWithoutDeprecatedFeaturesProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { highlighted, invalid, onKeyDown, postfix, prefix, type = 'text', ...attributes } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n\n    let handleKeyDown = onKeyDown;\n\n    // home and end keys only navigate to the start/end of input value if the input container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange\n    if (validSetSelectionRangeTypes.includes(type)) {\n        handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {\n                event.preventDefault();\n                const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n                event.currentTarget.setSelectionRange(position, position);\n            }\n\n            if (typeof onKeyDown === 'function') {\n                onKeyDown(event);\n            }\n        };\n    }\n\n    const prefixRef = React.useRef<HTMLDivElement>(null);\n    const prefixRect = useBoundingClientRectListener(prefixRef);\n    const postfixRef = React.useRef<HTMLDivElement>(null);\n    const postfixRect = useBoundingClientRectListener(postfixRef);\n\n    const className = cn(\n        getInputClasses(props),\n        {\n            'pl-8': !!prefix,\n            'pr-8': !!postfix,\n        },\n        attributes.className\n    );\n\n    return (\n        <div className=\"relative inline-flex w-full\" data-taco=\"input-container\" style={{ opacity: 0.999 }}>\n            <input\n                {...attributes}\n                className={className}\n                data-taco=\"input\"\n                onKeyDown={handleKeyDown}\n                ref={internalRef}\n                style={{\n                    paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,\n                    paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined,\n                }}\n                type={type}\n            />\n            {prefix ? <Affix type=\"prefix\" children={prefix} disabled={attributes.disabled} ref={prefixRef} /> : null}\n            {postfix ? <Affix type=\"postfix\" children={postfix} disabled={attributes.disabled} ref={postfixRef} /> : null}\n        </div>\n    );\n});\n\ntype AffixProps = {\n    children?: string | JSX.Element;\n    disabled?: boolean;\n    type: 'prefix' | 'postfix';\n};\nconst Affix = React.memo(\n    React.forwardRef(function Affix(props: AffixProps, ref: React.Ref<HTMLDivElement>) {\n        const { children, disabled, type } = props;\n\n        if (children) {\n            return (\n                <div\n                    className={cn(\n                        'group absolute top-0 flex h-full items-center justify-center px-2',\n                        // icon\n                        '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n                        {\n                            'text-grey-300': disabled,\n                            'text-grey-700': !disabled,\n                            'left-0 [&>button]:!-ml-2': type === 'prefix',\n                            'right-0 [&>button]:!-mr-2': type === 'postfix',\n                        }\n                    )}\n                    ref={ref}>\n                    {children}\n                </div>\n            );\n        }\n\n        return null;\n    })\n);\n\nexport type InputProps = InputWithoutDeprecatedFeaturesProps & {\n    /** Shows a button within the input field */\n    button?: React.ReactElement;\n    /** Shows an icon within the input field  */\n    icon?: IconName | JSX.Element;\n};\n\nexport const Input = React.forwardRef(function LegacyInput(props: InputProps, ref: React.Ref<HTMLInputElement>) {\n    const { button, icon, ...attributes } = props;\n\n    let postfix;\n\n    if (button) {\n        const disabled = button.props.disabled || attributes.disabled;\n        const buttonClassName = cn(\n            'items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none',\n            getButtonStateClasses(attributes.invalid),\n            button.props.className\n        );\n        postfix = React.cloneElement(button, {\n            className: buttonClassName,\n            disabled,\n        });\n    } else if (icon) {\n        postfix = typeof icon === 'string' ? <Icon name={icon} /> : icon;\n    }\n\n    return <InputWithoutDeprecatedFeatures {...attributes} postfix={attributes.postfix ?? postfix} ref={ref} />;\n});\n"],"names":["validSetSelectionRangeTypes","InputWithoutDeprecatedFeatures","React","props","ref","highlighted","invalid","onKeyDown","postfix","prefix","type","attributes","internalRef","useMergedRef","handleKeyDown","includes","event","shiftKey","key","preventDefault","position","currentTarget","value","length","setSelectionRange","prefixRef","prefixRect","useBoundingClientRectListener","postfixRef","postfixRect","className","cn","getInputClasses","style","opacity","paddingLeft","width","undefined","paddingRight","Affix","children","disabled","Input","LegacyInput","button","icon","buttonClassName","getButtonStateClasses","Icon","name"],"mappings":";;;;;;;AAgBA,MAAMA,2BAA2B,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC;AAEhF,MAAMC,8BAA8B,gBAAGC,UAAgB,CAAC,SAASD,8BAA8B,CAC3FE,KAA0C,EAC1CC,GAAgC;EAEhC,MAAM;IAAEC,WAAW;IAAEC,OAAO;IAAEC,SAAS;IAAEC,OAAO;IAAEC,MAAM;IAAEC,IAAI,GAAG,MAAM;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAChG,MAAMS,WAAW,GAAGC,YAAY,CAAmBT,GAAG,CAAC;EAEvD,IAAIU,aAAa,GAAGP,SAAS;;;;;EAM7B,IAAIP,2BAA2B,CAACe,QAAQ,CAACL,IAAI,CAAC,EAAE;IAC5CI,aAAa,GAAIE,KAA4C;MACzD,IAAI,CAACA,KAAK,CAACC,QAAQ,KAAKD,KAAK,CAACE,GAAG,KAAK,MAAM,IAAIF,KAAK,CAACE,GAAG,KAAK,KAAK,CAAC,EAAE;QAClEF,KAAK,CAACG,cAAc,EAAE;QACtB,MAAMC,QAAQ,GAAGJ,KAAK,CAACE,GAAG,KAAK,KAAK,GAAGF,KAAK,CAACK,aAAa,CAACC,KAAK,CAACC,MAAM,GAAG,CAAC;QAC3EP,KAAK,CAACK,aAAa,CAACG,iBAAiB,CAACJ,QAAQ,EAAEA,QAAQ,CAAC;;MAG7D,IAAI,OAAOb,SAAS,KAAK,UAAU,EAAE;QACjCA,SAAS,CAACS,KAAK,CAAC;;KAEvB;;EAGL,MAAMS,SAAS,GAAGvB,MAAY,CAAiB,IAAI,CAAC;EACpD,MAAMwB,UAAU,GAAGC,6BAA6B,CAACF,SAAS,CAAC;EAC3D,MAAMG,UAAU,GAAG1B,MAAY,CAAiB,IAAI,CAAC;EACrD,MAAM2B,WAAW,GAAGF,6BAA6B,CAACC,UAAU,CAAC;EAE7D,MAAME,SAAS,GAAGC,EAAE,CAChBC,eAAe,CAAC7B,KAAK,CAAC,EACtB;IACI,MAAM,EAAE,CAAC,CAACM,MAAM;IAChB,MAAM,EAAE,CAAC,CAACD;GACb,EACDG,UAAU,CAACmB,SAAS,CACvB;EAED,oBACI5B;IAAK4B,SAAS,EAAC,6BAA6B;iBAAW,iBAAiB;IAACG,KAAK,EAAE;MAAEC,OAAO,EAAE;;kBACvFhC,yCACQS,UAAU;IACdmB,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBvB,SAAS,EAAEO,aAAa;IACxBV,GAAG,EAAEQ,WAAW;IAChBqB,KAAK,EAAE;MACHE,WAAW,EAAET,UAAU,MAAMA,UAAU,CAACU,KAAK,GAAG,KAAK,GAAGC,SAAS;MACjEC,YAAY,EAAET,WAAW,MAAMA,WAAW,CAACO,KAAK,GAAG,KAAK,GAAGC;KAC9D;IACD3B,IAAI,EAAEA;KACR,EACDD,MAAM,gBAAGP,cAACqC,KAAK;IAAC7B,IAAI,EAAC,QAAQ;IAAC8B,QAAQ,EAAE/B,MAAM;IAAEgC,QAAQ,EAAE9B,UAAU,CAAC8B,QAAQ;IAAErC,GAAG,EAAEqB;IAAa,GAAG,IAAI,EACxGjB,OAAO,gBAAGN,cAACqC,KAAK;IAAC7B,IAAI,EAAC,SAAS;IAAC8B,QAAQ,EAAEhC,OAAO;IAAEiC,QAAQ,EAAE9B,UAAU,CAAC8B,QAAQ;IAAErC,GAAG,EAAEwB;IAAc,GAAG,IAAI,CAC3G;AAEd,CAAC,CAAC;AAOF,MAAMW,KAAK,gBAAGrC,IAAU,eACpBA,UAAgB,CAAC,SAASqC,KAAK,CAACpC,KAAiB,EAAEC,GAA8B;EAC7E,MAAM;IAAEoC,QAAQ;IAAEC,QAAQ;IAAE/B;GAAM,GAAGP,KAAK;EAE1C,IAAIqC,QAAQ,EAAE;IACV,oBACItC;MACI4B,SAAS,EAAEC,EAAE,CACT,mEAAmE;;MAEnE,yDAAyD,EACzD;QACI,eAAe,EAAEU,QAAQ;QACzB,eAAe,EAAE,CAACA,QAAQ;QAC1B,0BAA0B,EAAE/B,IAAI,KAAK,QAAQ;QAC7C,2BAA2B,EAAEA,IAAI,KAAK;OACzC,CACJ;MACDN,GAAG,EAAEA;OACJoC,QAAQ,CACP;;EAId,OAAO,IAAI;AACf,CAAC,CAAC,CACL;MASYE,KAAK,gBAAGxC,UAAgB,CAAC,SAASyC,WAAW,CAACxC,KAAiB,EAAEC,GAAgC;;EAC1G,MAAM;IAAEwC,MAAM;IAAEC,IAAI;IAAE,GAAGlC;GAAY,GAAGR,KAAK;EAE7C,IAAIK,OAAO;EAEX,IAAIoC,MAAM,EAAE;IACR,MAAMH,QAAQ,GAAGG,MAAM,CAACzC,KAAK,CAACsC,QAAQ,IAAI9B,UAAU,CAAC8B,QAAQ;IAC7D,MAAMK,eAAe,GAAGf,EAAE,CACtB,8GAA8G,EAC9GgB,qBAAqB,CAACpC,UAAU,CAACL,OAAO,CAAC,EACzCsC,MAAM,CAACzC,KAAK,CAAC2B,SAAS,CACzB;IACDtB,OAAO,gBAAGN,YAAkB,CAAC0C,MAAM,EAAE;MACjCd,SAAS,EAAEgB,eAAe;MAC1BL;KACH,CAAC;GACL,MAAM,IAAII,IAAI,EAAE;IACbrC,OAAO,GAAG,OAAOqC,IAAI,KAAK,QAAQ,gBAAG3C,cAAC8C,IAAI;MAACC,IAAI,EAAEJ;MAAQ,GAAGA,IAAI;;EAGpE,oBAAO3C,cAACD,8BAA8B,oBAAKU,UAAU;IAAEH,OAAO,yBAAEG,UAAU,CAACH,OAAO,qEAAIA,OAAO;IAAEJ,GAAG,EAAEA;KAAO;AAC/G,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Input/util.js

@@ -22,9 +22,9 @@ const getInputClasses = props => {
 };
 const getButtonStateClasses = invalid => {
   if (invalid) {
-    return '!border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
   }
-  return 'border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
 };
 
 export { getButtonStateClasses, getInputClasses };

package/dist/esm/packages/taco/src/components/Input/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]',\n        {\n            // default\n            'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,\n            'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,\n            // disabled\n            'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,\n            // invalid\n            'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,\n            'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return '!border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';\n    }\n\n    return 'border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,iOAAiO,EACjO;;IAEI,sDAAsD,EAAE,CAACD,OAAO;IAChE,yEAAyE,EAAE,CAACA,OAAO,IAAI,CAACF,QAAQ;;IAEhG,8EAA8E,EAAEA,QAAQ;;IAExF,4BAA4B,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IAC3D,0BAA0B,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE1D,0EAA0E,EAAEE,OAAO;IACnF,kDAAkD,EAAEA,OAAO,IAAI,CAACF,QAAQ;;IAExE,2CAA2C,EAAEC;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAIH,OAA4B;EAC9D,IAAIA,OAAO,EAAE;IACT,OAAO,wIAAwI;;EAGnJ,OAAO,2KAA2K;AACtL;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Input/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getInputClasses = props => {\n    const disabled = props.disabled || !!props['aria-disabled'];\n    const readOnly = props.readOnly || !!props['aria-readonly'];\n    const invalid = props.invalid || !!props['aria-invalid'];\n\n    return cn(\n        'peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]',\n        {\n            // default\n            'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,\n            'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,\n            // disabled\n            'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,\n            // highlighted\n            'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,\n            'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,\n            // invalid\n            'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,\n            'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,\n            // readOnly\n            'cursor-not-allowed text-black bg-grey-200': readOnly,\n        }\n    );\n};\n\nexport const getButtonStateClasses = (invalid: boolean | undefined): string => {\n    if (invalid) {\n        return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';\n    }\n\n    return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';\n};\n"],"names":["getInputClasses","props","disabled","readOnly","invalid","cn","highlighted","getButtonStateClasses"],"mappings":";;MAEaA,eAAe,GAAGC,KAAK;EAChC,MAAMC,QAAQ,GAAGD,KAAK,CAACC,QAAQ,IAAI,CAAC,CAACD,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAME,QAAQ,GAAGF,KAAK,CAACE,QAAQ,IAAI,CAAC,CAACF,KAAK,CAAC,eAAe,CAAC;EAC3D,MAAMG,OAAO,GAAGH,KAAK,CAACG,OAAO,IAAI,CAAC,CAACH,KAAK,CAAC,cAAc,CAAC;EAExD,OAAOI,EAAE,CACL,iOAAiO,EACjO;;IAEI,sDAAsD,EAAE,CAACD,OAAO;IAChE,yEAAyE,EAAE,CAACA,OAAO,IAAI,CAACF,QAAQ;;IAEhG,8EAA8E,EAAEA,QAAQ;;IAExF,4BAA4B,EAAED,KAAK,CAACK,WAAW,IAAIJ,QAAQ;IAC3D,0BAA0B,EAAED,KAAK,CAACK,WAAW,IAAI,CAACJ,QAAQ;;IAE1D,0EAA0E,EAAEE,OAAO;IACnF,kDAAkD,EAAEA,OAAO,IAAI,CAACF,QAAQ;;IAExE,2CAA2C,EAAEC;GAChD,CACJ;AACL;MAEaI,qBAAqB,GAAIH,OAA4B;EAC9D,IAAIA,OAAO,EAAE;IACT,OAAO,+IAA+I;;EAG1J,OAAO,kLAAkL;AAC7L;;;;"}

package/dist/esm/packages/taco/src/components/Table/components/BaseTable.js

@@ -32,7 +32,7 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
   }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => /*#__PURE__*/React__default.createElement("div", {
     key: index,
     role: "row",
-    className: "border-grey-100 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
+    className: "border-grey-300 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
   }, headerGroup.headers.map((cell, index) => /*#__PURE__*/React__default.createElement(Column, {
     key: index,
     index: index,

package/dist/esm/packages/taco/src/components/Table/components/BaseTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTable.js","sources":["../../../../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { HeaderGroup } from 'react-table';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n    const tableRef = useMergedRef<HTMLDivElement>(ref);\n    const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n    React.useEffect(() => {\n        if (autoFocus && tableRef.current) {\n            tableRef.current.focus();\n        }\n    }, []);\n\n    const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n    return (\n        <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n            <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n                {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n                    <div\n                        key={index}\n                        role=\"row\"\n                        className=\"border-grey-100 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\">\n                        {headerGroup.headers.map((cell: any, index: number) => (\n                            <Column key={index} index={index} cell={cell} />\n                        ))}\n                    </div>\n                ))}\n            </div>\n\n            <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n                {children}\n            </div>\n        </div>\n    );\n});\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useMergedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,SAAS,CAACG,KAAwB,EAAEC,GAA8B;EACjH,MAAMC,QAAQ,GAAGC,YAAY,CAAiBF,GAAG,CAAC;EAClD,MAAM;IAAEG,SAAS;IAAEC,QAAQ;IAAEC,cAAc,EAAEC,CAAC;IAAEC,YAAY;IAAEC,SAAS;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGX,KAAK;EAEzGF,cAAK,CAACc,SAAS,CAAC;IACZ,IAAIR,SAAS,IAAIF,QAAQ,CAACW,OAAO,EAAE;MAC/BX,QAAQ,CAACW,OAAO,CAACC,KAAK,EAAE;;GAE/B,EAAE,EAAE,CAAC;EAEN,MAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAwD,EAAEhB,KAAK,CAACe,SAAS,CAAC;EAE/F,oBACIjB,sDAASa,UAAU;IAAEM,IAAI,EAAC,OAAO;IAACF,SAAS,EAAEA,SAAS;IAAEd,GAAG,EAAEC;mBACzDJ;IAAKmB,IAAI,EAAC,UAAU;IAACF,SAAS,EAAC,gBAAgB;IAACd,GAAG,EAAEQ;KAChDD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEU,GAAG,CAAC,CAACC,WAAgC,EAAEC,KAAa,kBAC/DtB;IACIuB,GAAG,EAAED,KAAK;IACVH,IAAI,EAAC,KAAK;IACVF,SAAS,EAAC;KACTI,WAAW,CAACG,OAAO,CAACJ,GAAG,CAAC,CAACK,IAAS,EAAEH,KAAa,kBAC9CtB,6BAAC0B,MAAM;IAACH,GAAG,EAAED,KAAK;IAAEA,KAAK,EAAEA,KAAK;IAAEG,IAAI,EAAEA;IAC3C,CAAC,CAET,CAAC,CACA,eAENzB;IAAKmB,IAAI,EAAC,UAAU;IAACF,SAAS,EAAC,gBAAgB;IAACd,GAAG,EAAES;KAChDL,QAAQ,CACP,CACJ;AAEd,CAAC;;;;"}
+{"version":3,"file":"BaseTable.js","sources":["../../../../../../../../src/components/Table/components/BaseTable.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { HeaderGroup } from 'react-table';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { InternalBaseTable } from '../types';\nimport './Table.css';\nimport { Column } from '../util/renderColumn';\n\nexport const DefaultEmptyState = (): React.ReactNode => null;\n\nexport const BaseTable = React.forwardRef(function BaseTable(props: InternalBaseTable, ref: React.Ref<HTMLDivElement>) {\n    const tableRef = useMergedRef<HTMLDivElement>(ref);\n    const { autoFocus, children, disableSorting: _, headerGroups, headerRef, bodyRef, ...otherProps } = props;\n\n    React.useEffect(() => {\n        if (autoFocus && tableRef.current) {\n            tableRef.current.focus();\n        }\n    }, []);\n\n    const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);\n\n    return (\n        <div {...otherProps} role=\"table\" className={className} ref={tableRef}>\n            <div role=\"rowgroup\" className=\"yt-table__head\" ref={headerRef}>\n                {headerGroups?.map((headerGroup: HeaderGroup<object>, index: number) => (\n                    <div\n                        key={index}\n                        role=\"row\"\n                        className=\"border-grey-300 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold\">\n                        {headerGroup.headers.map((cell: any, index: number) => (\n                            <Column key={index} index={index} cell={cell} />\n                        ))}\n                    </div>\n                ))}\n            </div>\n\n            <div role=\"rowgroup\" className=\"yt-table__body\" ref={bodyRef}>\n                {children}\n            </div>\n        </div>\n    );\n});\n"],"names":["DefaultEmptyState","BaseTable","React","forwardRef","props","ref","tableRef","useMergedRef","autoFocus","children","disableSorting","_","headerGroups","headerRef","bodyRef","otherProps","useEffect","current","focus","className","cn","role","map","headerGroup","index","key","headers","cell","Column"],"mappings":";;;;;MAQaA,iBAAiB,GAAG,MAAuB;MAE3CC,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,SAAS,CAACG,KAAwB,EAAEC,GAA8B;EACjH,MAAMC,QAAQ,GAAGC,YAAY,CAAiBF,GAAG,CAAC;EAClD,MAAM;IAAEG,SAAS;IAAEC,QAAQ;IAAEC,cAAc,EAAEC,CAAC;IAAEC,YAAY;IAAEC,SAAS;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGX,KAAK;EAEzGF,cAAK,CAACc,SAAS,CAAC;IACZ,IAAIR,SAAS,IAAIF,QAAQ,CAACW,OAAO,EAAE;MAC/BX,QAAQ,CAACW,OAAO,CAACC,KAAK,EAAE;;GAE/B,EAAE,EAAE,CAAC;EAEN,MAAMC,SAAS,GAAGC,EAAE,CAAC,wDAAwD,EAAEhB,KAAK,CAACe,SAAS,CAAC;EAE/F,oBACIjB,sDAASa,UAAU;IAAEM,IAAI,EAAC,OAAO;IAACF,SAAS,EAAEA,SAAS;IAAEd,GAAG,EAAEC;mBACzDJ;IAAKmB,IAAI,EAAC,UAAU;IAACF,SAAS,EAAC,gBAAgB;IAACd,GAAG,EAAEQ;KAChDD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEU,GAAG,CAAC,CAACC,WAAgC,EAAEC,KAAa,kBAC/DtB;IACIuB,GAAG,EAAED,KAAK;IACVH,IAAI,EAAC,KAAK;IACVF,SAAS,EAAC;KACTI,WAAW,CAACG,OAAO,CAACJ,GAAG,CAAC,CAACK,IAAS,EAAEH,KAAa,kBAC9CtB,6BAAC0B,MAAM;IAACH,GAAG,EAAED,KAAK;IAAEA,KAAK,EAAEA,KAAK;IAAEG,IAAI,EAAEA;IAC3C,CAAC,CAET,CAAC,CACA,eAENzB;IAAKmB,IAAI,EAAC,UAAU;IAACF,SAAS,EAAC,gBAAgB;IAACd,GAAG,EAAES;KAChDL,QAAQ,CACP,CACJ;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowSelect.js

@@ -76,7 +76,7 @@ const useRowSelect = onSelectedRows => {
             lastSelectedSortedIndex.current = sortedIndex;
           };
           return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, props, {
-            className: "mt-2.5",
+            className: "!mt-2.5",
             onClick: onClick,
             // this is necessary to remove console spam from eslint
             onChange: () => false

package/dist/esm/packages/taco/src/components/Table/hooks/plugins/useRowSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRowSelect.js","sources":["../../../../../../../../../src/components/Table/hooks/plugins/useRowSelect.tsx"],"sourcesContent":["// this wraps react-table's internal useRowSelect hook\nimport React from 'react';\nimport { useRowSelect as useBaseRowSelect, Row, PluginHook } from 'react-table';\nimport { Checkbox } from '../../../Checkbox/Checkbox';\nimport { SelectedRowsHandler } from '../../types';\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\n// react-table calls \"index paths\" row ids. we named them indexPaths to reduce confusion with natural ids\n// the selection hook usess react-table's row selection, so this hok references row.id - it is the index path\n\nexport const useRowSelect = (onSelectedRows: SelectedRowsHandler | undefined): PluginHook<{}> => {\n    const plugin = (hooks: any): void => {\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useBaseRowSelect(hooks);\n\n        if (onSelectedRows) {\n            const toggleRowSelected = (indexPath: string, checked: boolean): void =>\n                onSelectedRows(state => {\n                    const nextState = { ...state };\n\n                    if (checked) {\n                        nextState[indexPath] = true;\n                    } else {\n                        delete nextState[indexPath];\n                    }\n\n                    return nextState;\n                });\n\n            const prepareRow = (row: any) => {\n                row.toggleRowSelected = () => toggleRowSelected(row.id, !row.isSelected);\n            };\n\n            hooks.prepareRow.push(prepareRow);\n\n            // eslint-disable-next-line react-hooks/rules-of-hooks\n            const lastSelectedSortedIndex = React.useRef();\n\n            hooks.visibleColumns.push((columns: any) => [\n                {\n                    id: 'selection',\n                    Header: ({ getToggleAllRowsSelectedProps, rows }: any) => {\n                        const { onChange: _, ...props } = getToggleAllRowsSelectedProps();\n\n                        const onChange = (checked): void => {\n                            if (checked) {\n                                // this intentionally only selects top level rows - sub rows add too much complexity\n                                onSelectedRows(Object.assign({}, Array(rows.length).fill(true)));\n                            } else {\n                                onSelectedRows({});\n                            }\n                        };\n\n                        return <Checkbox {...props} onChange={onChange} />;\n                    },\n                    Cell: ({ row, rows }: any) => {\n                        const { onChange: _, ...props } = row.getToggleRowSelectedProps();\n                        // row.index refers to the index in the original data, not the current index\n                        const sortedIndex = rows.findIndex((r: Row) => r.index === row.index);\n\n                        const onClick = (event: React.MouseEvent): void => {\n                            if (event.shiftKey) {\n                                const [fromIndex, toIndex] = toggleBetween(lastSelectedSortedIndex.current || 0, sortedIndex);\n\n                                for (let i = fromIndex; i <= toIndex; i++) {\n                                    toggleRowSelected(rows[i].id, true);\n                                }\n                            } else {\n                                toggleRowSelected(row.id, !props.checked);\n                            }\n\n                            lastSelectedSortedIndex.current = sortedIndex;\n                        };\n\n                        return (\n                            <Checkbox\n                                {...props}\n                                className=\"mt-2.5\"\n                                onClick={onClick}\n                                // this is necessary to remove console spam from eslint\n                                onChange={() => false}\n                            />\n                        );\n                    },\n                    flex: '0 0 36px',\n                    className: 'flex-col justify-start !py-0',\n                },\n                ...columns,\n            ]);\n        }\n    };\n    plugin.pluginName = 'useRowSelect';\n    return plugin;\n};\n"],"names":["toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","useRowSelect","onSelectedRows","plugin","hooks","useBaseRowSelect","toggleRowSelected","indexPath","checked","state","nextState","prepareRow","row","id","isSelected","push","lastSelectedSortedIndex","React","useRef","visibleColumns","columns","Header","getToggleAllRowsSelectedProps","rows","onChange","_","props","Object","assign","Array","length","fill","Checkbox","Cell","getToggleRowSelectedProps","sortedIndex","findIndex","r","index","onClick","event","shiftKey","current","i","className","flex","pluginName"],"mappings":"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"}
+{"version":3,"file":"useRowSelect.js","sources":["../../../../../../../../../src/components/Table/hooks/plugins/useRowSelect.tsx"],"sourcesContent":["// this wraps react-table's internal useRowSelect hook\nimport React from 'react';\nimport { useRowSelect as useBaseRowSelect, Row, PluginHook } from 'react-table';\nimport { Checkbox } from '../../../Checkbox/Checkbox';\nimport { SelectedRowsHandler } from '../../types';\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\n// react-table calls \"index paths\" row ids. we named them indexPaths to reduce confusion with natural ids\n// the selection hook usess react-table's row selection, so this hok references row.id - it is the index path\n\nexport const useRowSelect = (onSelectedRows: SelectedRowsHandler | undefined): PluginHook<{}> => {\n    const plugin = (hooks: any): void => {\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useBaseRowSelect(hooks);\n\n        if (onSelectedRows) {\n            const toggleRowSelected = (indexPath: string, checked: boolean): void =>\n                onSelectedRows(state => {\n                    const nextState = { ...state };\n\n                    if (checked) {\n                        nextState[indexPath] = true;\n                    } else {\n                        delete nextState[indexPath];\n                    }\n\n                    return nextState;\n                });\n\n            const prepareRow = (row: any) => {\n                row.toggleRowSelected = () => toggleRowSelected(row.id, !row.isSelected);\n            };\n\n            hooks.prepareRow.push(prepareRow);\n\n            // eslint-disable-next-line react-hooks/rules-of-hooks\n            const lastSelectedSortedIndex = React.useRef();\n\n            hooks.visibleColumns.push((columns: any) => [\n                {\n                    id: 'selection',\n                    Header: ({ getToggleAllRowsSelectedProps, rows }: any) => {\n                        const { onChange: _, ...props } = getToggleAllRowsSelectedProps();\n\n                        const onChange = (checked): void => {\n                            if (checked) {\n                                // this intentionally only selects top level rows - sub rows add too much complexity\n                                onSelectedRows(Object.assign({}, Array(rows.length).fill(true)));\n                            } else {\n                                onSelectedRows({});\n                            }\n                        };\n\n                        return <Checkbox {...props} onChange={onChange} />;\n                    },\n                    Cell: ({ row, rows }: any) => {\n                        const { onChange: _, ...props } = row.getToggleRowSelectedProps();\n                        // row.index refers to the index in the original data, not the current index\n                        const sortedIndex = rows.findIndex((r: Row) => r.index === row.index);\n\n                        const onClick = (event: React.MouseEvent): void => {\n                            if (event.shiftKey) {\n                                const [fromIndex, toIndex] = toggleBetween(lastSelectedSortedIndex.current || 0, sortedIndex);\n\n                                for (let i = fromIndex; i <= toIndex; i++) {\n                                    toggleRowSelected(rows[i].id, true);\n                                }\n                            } else {\n                                toggleRowSelected(row.id, !props.checked);\n                            }\n\n                            lastSelectedSortedIndex.current = sortedIndex;\n                        };\n\n                        return (\n                            <Checkbox\n                                {...props}\n                                className=\"!mt-2.5\"\n                                onClick={onClick}\n                                // this is necessary to remove console spam from eslint\n                                onChange={() => false}\n                            />\n                        );\n                    },\n                    flex: '0 0 36px',\n                    className: 'flex-col justify-start !py-0',\n                },\n                ...columns,\n            ]);\n        }\n    };\n    plugin.pluginName = 'useRowSelect';\n    return plugin;\n};\n"],"names":["toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","useRowSelect","onSelectedRows","plugin","hooks","useBaseRowSelect","toggleRowSelected","indexPath","checked","state","nextState","prepareRow","row","id","isSelected","push","lastSelectedSortedIndex","React","useRef","visibleColumns","columns","Header","getToggleAllRowsSelectedProps","rows","onChange","_","props","Object","assign","Array","length","fill","Checkbox","Cell","getToggleRowSelectedProps","sortedIndex","findIndex","r","index","onClick","event","shiftKey","current","i","className","flex","pluginName"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Tabs/Tabs.js

@@ -26,7 +26,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-100 flex flex-row m-0 mb-4', props.className);
+  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
   return /*#__PURE__*/createElement(List, Object.assign({}, props, {
     className: className,
     ref: ref

package/dist/esm/packages/taco/src/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-100 flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-500'\n            : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;MA+DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SAAS,cACGH,aAAa,EACzB;IACI,aAAa,EAAEA,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAAC,8DAA8D,EAAET,KAAK,CAACQ,SAAS,CAAC;EAErG,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEC,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAC7C,MAAMQ,SAAS,GAAGC,EAAE,CAChB,iFAAiF,EACjFS,QAAQ,GACF,mCAAmC,GACnC,wOAAwO,EAC9OlB,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,OAAqB,oBACdH,UAAU;IACdC,SAAS,EAAEA,SAAS;IACpBU,QAAQ,EAAEA,QAAQ;IAClBjB,GAAG,EAAEA,GAAG;IACRkB,KAAK,EAAE;MACHC,UAAU,EAAE;KACf;IACDN,KAAK,EAAEZ;KACT;AAEV,CAAC,CAAC;AAEF,MAAMmB,UAAU,gBAAGtB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAA4B,EAAET,KAAK,CAACQ,SAAS,CAAC;EAEnE,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAACwB,IAAI,GAAGP,OAAO;AACnBjB,IAAI,CAACyB,OAAO,GAAGN,UAAU;AACzBnB,IAAI,CAAC0B,OAAO,GAAGH,UAAU;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-500'\n            : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;MA+DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SAAS,cACGH,aAAa,EACzB;IACI,aAAa,EAAEA,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAAC,8DAA8D,EAAET,KAAK,CAACQ,SAAS,CAAC;EAErG,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEC,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAC7C,MAAMQ,SAAS,GAAGC,EAAE,CAChB,iFAAiF,EACjFS,QAAQ,GACF,mCAAmC,GACnC,wOAAwO,EAC9OlB,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,OAAqB,oBACdH,UAAU;IACdC,SAAS,EAAEA,SAAS;IACpBU,QAAQ,EAAEA,QAAQ;IAClBjB,GAAG,EAAEA,GAAG;IACRkB,KAAK,EAAE;MACHC,UAAU,EAAE;KACf;IACDN,KAAK,EAAEZ;KACT;AAEV,CAAC,CAAC;AAEF,MAAMmB,UAAU,gBAAGtB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAA4B,EAAET,KAAK,CAACQ,SAAS,CAAC;EAEnE,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAACwB,IAAI,GAAGP,OAAO;AACnBjB,IAAI,CAACyB,OAAO,GAAGN,UAAU;AACzBnB,IAAI,CAAC0B,OAAO,GAAGH,UAAU;;;;"}

package/dist/taco.cjs.development.js

@@ -3904,9 +3904,9 @@ const getInputClasses = props => {
 };
 const getButtonStateClasses = invalid => {
   if (invalid) {
-    return '!border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
   }
-  return 'border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
 };
 
 const debounce = (fn, delay) => {
@@ -4008,7 +4008,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
     'pr-8': !!postfix
   }, attributes.className);
   return /*#__PURE__*/React.createElement("div", {
-    className: "relative inline-flex w-full"
+    className: "relative inline-flex w-full",
+    "data-taco": "input-container",
+    style: {
+      opacity: 0.999
+    }
   }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
     className: className,
     "data-taco": "input",
@@ -4038,7 +4042,7 @@ const Affix = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Af
     type
   } = props;
   if (children) {
-    return /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("div", {
       className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
       // icon
       '[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
@@ -4062,9 +4066,7 @@ const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
   let postfix;
   if (button) {
     const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center border rounded-l-none rounded-r h-full focus:rounded focus:outline-none', {
-      [getButtonStateClasses(attributes.invalid)]: !props.disabled
-    }, button.props.className);
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
     postfix = /*#__PURE__*/React.cloneElement(button, {
       className: buttonClassName,
       disabled
@@ -9258,7 +9260,7 @@ const useRowSelect = onSelectedRows => {
             lastSelectedSortedIndex.current = sortedIndex;
           };
           return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, props, {
-            className: "mt-2.5",
+            className: "!mt-2.5",
             onClick: onClick,
             // this is necessary to remove console spam from eslint
             onChange: () => false
@@ -9844,7 +9846,7 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
   }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => /*#__PURE__*/React__default.createElement("div", {
     key: index,
     role: "row",
-    className: "border-grey-100 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
+    className: "border-grey-300 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
   }, headerGroup.headers.map((cell, index) => /*#__PURE__*/React__default.createElement(Column, {
     key: index,
     index: index,
@@ -10224,7 +10226,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-100 flex flex-row m-0 mb-4', props.className);
+  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref