@economic/taco 1.17.1 → 1.17.2
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/packages/taco/src/components/Input/Input.js +7 -5
- package/dist/esm/packages/taco/src/components/Input/Input.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Input/util.js +2 -2
- package/dist/esm/packages/taco/src/components/Input/util.js.map +1 -1
- package/dist/taco.cjs.development.js +9 -7
- 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
|
@@ -43,7 +43,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/forwardRef(function InputWit
|
|
|
43
43
|
'pr-8': !!postfix
|
|
44
44
|
}, attributes.className);
|
|
45
45
|
return /*#__PURE__*/createElement("div", {
|
|
46
|
-
className: "relative inline-flex w-full"
|
|
46
|
+
className: "relative inline-flex w-full",
|
|
47
|
+
"data-taco": "input-container",
|
|
48
|
+
style: {
|
|
49
|
+
opacity: 0.999
|
|
50
|
+
}
|
|
47
51
|
}, /*#__PURE__*/createElement("input", Object.assign({}, attributes, {
|
|
48
52
|
className: className,
|
|
49
53
|
"data-taco": "input",
|
|
@@ -73,7 +77,7 @@ const Affix = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Affix(props, r
|
|
|
73
77
|
type
|
|
74
78
|
} = props;
|
|
75
79
|
if (children) {
|
|
76
|
-
return /*#__PURE__*/createElement("
|
|
80
|
+
return /*#__PURE__*/createElement("div", {
|
|
77
81
|
className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
|
|
78
82
|
// icon
|
|
79
83
|
'[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
|
|
@@ -97,9 +101,7 @@ const Input = /*#__PURE__*/forwardRef(function LegacyInput(props, ref) {
|
|
|
97
101
|
let postfix;
|
|
98
102
|
if (button) {
|
|
99
103
|
const disabled = button.props.disabled || attributes.disabled;
|
|
100
|
-
const buttonClassName = cn('items-center focus:z-10 flex justify-center
|
|
101
|
-
[getButtonStateClasses(attributes.invalid)]: !props.disabled
|
|
102
|
-
}, button.props.className);
|
|
104
|
+
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);
|
|
103
105
|
postfix = /*#__PURE__*/cloneElement(button, {
|
|
104
106
|
className: buttonClassName,
|
|
105
107
|
disabled
|
|
@@ -1 +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<
|
|
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<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":"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"}
|
|
@@ -22,9 +22,9 @@ const getInputClasses = props => {
|
|
|
22
22
|
};
|
|
23
23
|
const getButtonStateClasses = invalid => {
|
|
24
24
|
if (invalid) {
|
|
25
|
-
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';
|
|
25
|
+
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';
|
|
26
26
|
}
|
|
27
|
-
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';
|
|
27
|
+
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';
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
export { getButtonStateClasses, getInputClasses };
|
|
@@ -1 +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
|
|
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 !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;;;;"}
|
|
@@ -3904,9 +3904,9 @@ const getInputClasses = props => {
|
|
|
3904
3904
|
};
|
|
3905
3905
|
const getButtonStateClasses = invalid => {
|
|
3906
3906
|
if (invalid) {
|
|
3907
|
-
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';
|
|
3907
|
+
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';
|
|
3908
3908
|
}
|
|
3909
|
-
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';
|
|
3909
|
+
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';
|
|
3910
3910
|
};
|
|
3911
3911
|
|
|
3912
3912
|
const debounce = (fn, delay) => {
|
|
@@ -4008,7 +4008,11 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
|
|
|
4008
4008
|
'pr-8': !!postfix
|
|
4009
4009
|
}, attributes.className);
|
|
4010
4010
|
return /*#__PURE__*/React.createElement("div", {
|
|
4011
|
-
className: "relative inline-flex w-full"
|
|
4011
|
+
className: "relative inline-flex w-full",
|
|
4012
|
+
"data-taco": "input-container",
|
|
4013
|
+
style: {
|
|
4014
|
+
opacity: 0.999
|
|
4015
|
+
}
|
|
4012
4016
|
}, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
|
|
4013
4017
|
className: className,
|
|
4014
4018
|
"data-taco": "input",
|
|
@@ -4038,7 +4042,7 @@ const Affix = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Af
|
|
|
4038
4042
|
type
|
|
4039
4043
|
} = props;
|
|
4040
4044
|
if (children) {
|
|
4041
|
-
return /*#__PURE__*/React.createElement("
|
|
4045
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
4042
4046
|
className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
|
|
4043
4047
|
// icon
|
|
4044
4048
|
'[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
|
|
@@ -4062,9 +4066,7 @@ const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
|
|
|
4062
4066
|
let postfix;
|
|
4063
4067
|
if (button) {
|
|
4064
4068
|
const disabled = button.props.disabled || attributes.disabled;
|
|
4065
|
-
const buttonClassName = cn('items-center focus:z-10 flex justify-center
|
|
4066
|
-
[getButtonStateClasses(attributes.invalid)]: !props.disabled
|
|
4067
|
-
}, button.props.className);
|
|
4069
|
+
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);
|
|
4068
4070
|
postfix = /*#__PURE__*/React.cloneElement(button, {
|
|
4069
4071
|
className: buttonClassName,
|
|
4070
4072
|
disabled
|