@semcore/input 3.4.0 → 3.4.2

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.4.2] - 2022-12-06
+
+### Added
+
+- Added type `IInputCtx` for export.
+
+## [3.4.1] - 2022-11-30
+
+### Fixed
+
+- Fix style for disabled state.
+
 ## [3.4.0] - 2022-11-30
 
 ### Changed

package/lib/cjs/Input.js

@@ -52,26 +52,26 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SInput_1txj6_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1txj6_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1txj6_gg_ input:-webkit-autofill~.___SOutline_1txj6_gg_{background-color:#faffbd}.___SValue_1txj6_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1txj6_gg_:focus{outline:none}.___SValue_1txj6_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1txj6_gg_::placeholder{color:#a9abb6}.___SValue_1txj6_gg_:-moz-read-only~.___SOutline_1txj6_gg_{background:#f4f5f9}.___SValue_1txj6_gg_:read-only~.___SOutline_1txj6_gg_{background:#f4f5f9}.___SValue_1txj6_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_1txj6_gg_:disabled~.___SOutline_1txj6_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1txj6_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1txj6_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1txj6_gg_.__interactive_1txj6_gg_{cursor:pointer}.___SAddon_1txj6_gg_.__interactive_1txj6_gg_:hover{color:#8a8e9b}.___SAddon_1txj6_gg_.__disabled_1txj6_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1txj6_gg_._size_m_1txj6_gg_{font-size:14px;height:28px}.___SValue_1txj6_gg_._size_l_1txj6_gg_,.___SValue_1txj6_gg_._size_m_1txj6_gg_{padding:0 8px}.___SInput_1txj6_gg_._size_l_1txj6_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1txj6_gg_.__focused_1txj6_gg_{z-index:1}.___SInput_1txj6_gg_._state_normal_1txj6_gg_ .___SOutline_1txj6_gg_{border-color:#c4c7cf}.___SInput_1txj6_gg_._state_normal_1txj6_gg_ .___SValue_1txj6_gg_:focus~.___SOutline_1txj6_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_1txj6_gg_._state_valid_1txj6_gg_ .___SOutline_1txj6_gg_{border-color:#59ddaa}.___SInput_1txj6_gg_._state_valid_1txj6_gg_ .___SValue_1txj6_gg_:focus~.___SOutline_1txj6_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_1txj6_gg_._state_invalid_1txj6_gg_ .___SOutline_1txj6_gg_{border-color:#ffaeb5}.___SInput_1txj6_gg_._state_invalid_1txj6_gg_ .___SValue_1txj6_gg_:focus~.___SOutline_1txj6_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_1txj6_gg_._neighborLocation_right_1txj6_gg_ .___SOutline_1txj6_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1txj6_gg_._neighborLocation_both_1txj6_gg_ .___SOutline_1txj6_gg_{border-radius:0;border-left:none}.___SInput_1txj6_gg_._neighborLocation_left_1txj6_gg_ .___SOutline_1txj6_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1txj6_gg_._neighborLocation_right_1txj6_gg_{padding-right:0}.___SValue_1txj6_gg_._neighborLocation_both_1txj6_gg_{padding-left:0;padding-right:0}.___SValue_1txj6_gg_._neighborLocation_left_1txj6_gg_{padding-left:0}"
+".___SInput_me7lq_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_me7lq_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_me7lq_gg_ input:-webkit-autofill~.___SOutline_me7lq_gg_{background-color:#faffbd}.___SValue_me7lq_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_me7lq_gg_:focus{outline:none}.___SValue_me7lq_gg_::-moz-placeholder{color:#a9abb6}.___SValue_me7lq_gg_::placeholder{color:#a9abb6}.___SValue_me7lq_gg_:not(:disabled):-moz-read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:not(:disabled):read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_me7lq_gg_:disabled~.___SOutline_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_me7lq_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_me7lq_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_{cursor:pointer}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_:hover{color:#8a8e9b}.___SAddon_me7lq_gg_.__disabled_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_me7lq_gg_._size_m_me7lq_gg_{font-size:14px;height:28px}.___SValue_me7lq_gg_._size_l_me7lq_gg_,.___SValue_me7lq_gg_._size_m_me7lq_gg_{padding:0 8px}.___SInput_me7lq_gg_._size_l_me7lq_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_me7lq_gg_.__focused_me7lq_gg_{z-index:1}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#c4c7cf}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#59ddaa}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#ffaeb5}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_me7lq_gg_._neighborLocation_right_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_me7lq_gg_._neighborLocation_both_me7lq_gg_ .___SOutline_me7lq_gg_{border-radius:0;border-left:none}.___SInput_me7lq_gg_._neighborLocation_left_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_me7lq_gg_._neighborLocation_right_me7lq_gg_{padding-right:0}.___SValue_me7lq_gg_._neighborLocation_both_me7lq_gg_{padding-left:0;padding-right:0}.___SValue_me7lq_gg_._neighborLocation_left_me7lq_gg_{padding-left:0}"
 /*__inner_css_end__*/
-, "1txj6_gg_")
+, "me7lq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInput": "___SInput_1txj6_gg_",
-  "__SOutline": "___SOutline_1txj6_gg_",
-  "__SValue": "___SValue_1txj6_gg_",
-  "__SAddon": "___SAddon_1txj6_gg_",
-  "_interactive": "__interactive_1txj6_gg_",
-  "_disabled": "__disabled_1txj6_gg_",
-  "_size_m": "_size_m_1txj6_gg_",
-  "_size_l": "_size_l_1txj6_gg_",
-  "_focused": "__focused_1txj6_gg_",
-  "_state_normal": "_state_normal_1txj6_gg_",
-  "_state_valid": "_state_valid_1txj6_gg_",
-  "_state_invalid": "_state_invalid_1txj6_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1txj6_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1txj6_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1txj6_gg_"
+  "__SInput": "___SInput_me7lq_gg_",
+  "__SOutline": "___SOutline_me7lq_gg_",
+  "__SValue": "___SValue_me7lq_gg_",
+  "__SAddon": "___SAddon_me7lq_gg_",
+  "_interactive": "__interactive_me7lq_gg_",
+  "_disabled": "__disabled_me7lq_gg_",
+  "_size_m": "_size_m_me7lq_gg_",
+  "_size_l": "_size_l_me7lq_gg_",
+  "_focused": "__focused_me7lq_gg_",
+  "_state_normal": "_state_normal_me7lq_gg_",
+  "_state_valid": "_state_valid_me7lq_gg_",
+  "_state_invalid": "_state_invalid_me7lq_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_me7lq_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_me7lq_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_me7lq_gg_"
 });
 
 var Input = /*#__PURE__*/function (_Component) {

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n  /**\n   * Sets the input and addons to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n  /**\n   * Sets the input state\n   * @default normal\n   */\n  state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n  extends IBoxProps,\n    INeighborItemProps,\n    IWithAutoFocusEnhanceProps {\n  /**\n   * Input value\n   */\n  value?: string;\n  /**\n   * Default value if `value` property is not provided\n   */\n  defaultValue?: string;\n  /**\n   * Handler for changing the value\n   */\n  onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n  /**\n   * Sets the input to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Sets the input to the read-only state\n   * */\n  readOnly?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n  /**\n   * Adds styles for interactive icons\n   */\n  interactive?: boolean;\n  /**\n   * Blocks the addon\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\ninterface IInputCtx {\n  getValueProps: PropGetterFn;\n  getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n  Value: <T>(props: IInputValueProps & T) => ReturnEl;\n  Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n  /**\n   * Sets the input and addons to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n  /**\n   * Sets the input state\n   * @default normal\n   */\n  state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n  extends IBoxProps,\n    INeighborItemProps,\n    IWithAutoFocusEnhanceProps {\n  /**\n   * Input value\n   */\n  value?: string;\n  /**\n   * Default value if `value` property is not provided\n   */\n  defaultValue?: string;\n  /**\n   * Handler for changing the value\n   */\n  onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n  /**\n   * Sets the input to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Sets the input to the read-only state\n   * */\n  readOnly?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n  /**\n   * Adds styles for interactive icons\n   */\n  interactive?: boolean;\n  /**\n   * Blocks the addon\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\nexport interface IInputCtx {\n  getValueProps: PropGetterFn;\n  getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n  Value: <T>(props: IInputValueProps & T) => ReturnEl;\n  Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}

package/lib/cjs/style/input.shadow.css

@@ -42,7 +42,7 @@ SValue {
     color: var(--gray-300);
   }
 
-  &:read-only ~ SOutline {
+  &:not(:disabled):read-only ~ SOutline {
     background: var(--gray-50);
   }
 

package/lib/es6/Input.js

@@ -30,26 +30,26 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SInput_1txj6_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1txj6_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1txj6_gg_ input:-webkit-autofill~.___SOutline_1txj6_gg_{background-color:#faffbd}.___SValue_1txj6_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1txj6_gg_:focus{outline:none}.___SValue_1txj6_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1txj6_gg_::placeholder{color:#a9abb6}.___SValue_1txj6_gg_:-moz-read-only~.___SOutline_1txj6_gg_{background:#f4f5f9}.___SValue_1txj6_gg_:read-only~.___SOutline_1txj6_gg_{background:#f4f5f9}.___SValue_1txj6_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_1txj6_gg_:disabled~.___SOutline_1txj6_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1txj6_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1txj6_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1txj6_gg_.__interactive_1txj6_gg_{cursor:pointer}.___SAddon_1txj6_gg_.__interactive_1txj6_gg_:hover{color:#8a8e9b}.___SAddon_1txj6_gg_.__disabled_1txj6_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1txj6_gg_._size_m_1txj6_gg_{font-size:14px;height:28px}.___SValue_1txj6_gg_._size_l_1txj6_gg_,.___SValue_1txj6_gg_._size_m_1txj6_gg_{padding:0 8px}.___SInput_1txj6_gg_._size_l_1txj6_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1txj6_gg_.__focused_1txj6_gg_{z-index:1}.___SInput_1txj6_gg_._state_normal_1txj6_gg_ .___SOutline_1txj6_gg_{border-color:#c4c7cf}.___SInput_1txj6_gg_._state_normal_1txj6_gg_ .___SValue_1txj6_gg_:focus~.___SOutline_1txj6_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_1txj6_gg_._state_valid_1txj6_gg_ .___SOutline_1txj6_gg_{border-color:#59ddaa}.___SInput_1txj6_gg_._state_valid_1txj6_gg_ .___SValue_1txj6_gg_:focus~.___SOutline_1txj6_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_1txj6_gg_._state_invalid_1txj6_gg_ .___SOutline_1txj6_gg_{border-color:#ffaeb5}.___SInput_1txj6_gg_._state_invalid_1txj6_gg_ .___SValue_1txj6_gg_:focus~.___SOutline_1txj6_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_1txj6_gg_._neighborLocation_right_1txj6_gg_ .___SOutline_1txj6_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1txj6_gg_._neighborLocation_both_1txj6_gg_ .___SOutline_1txj6_gg_{border-radius:0;border-left:none}.___SInput_1txj6_gg_._neighborLocation_left_1txj6_gg_ .___SOutline_1txj6_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1txj6_gg_._neighborLocation_right_1txj6_gg_{padding-right:0}.___SValue_1txj6_gg_._neighborLocation_both_1txj6_gg_{padding-left:0;padding-right:0}.___SValue_1txj6_gg_._neighborLocation_left_1txj6_gg_{padding-left:0}"
+".___SInput_me7lq_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_me7lq_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_me7lq_gg_ input:-webkit-autofill~.___SOutline_me7lq_gg_{background-color:#faffbd}.___SValue_me7lq_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_me7lq_gg_:focus{outline:none}.___SValue_me7lq_gg_::-moz-placeholder{color:#a9abb6}.___SValue_me7lq_gg_::placeholder{color:#a9abb6}.___SValue_me7lq_gg_:not(:disabled):-moz-read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:not(:disabled):read-only~.___SOutline_me7lq_gg_{background:#f4f5f9}.___SValue_me7lq_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_me7lq_gg_:disabled~.___SOutline_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_me7lq_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_me7lq_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_{cursor:pointer}.___SAddon_me7lq_gg_.__interactive_me7lq_gg_:hover{color:#8a8e9b}.___SAddon_me7lq_gg_.__disabled_me7lq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_me7lq_gg_._size_m_me7lq_gg_{font-size:14px;height:28px}.___SValue_me7lq_gg_._size_l_me7lq_gg_,.___SValue_me7lq_gg_._size_m_me7lq_gg_{padding:0 8px}.___SInput_me7lq_gg_._size_l_me7lq_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_me7lq_gg_.__focused_me7lq_gg_{z-index:1}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#c4c7cf}.___SInput_me7lq_gg_._state_normal_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#59ddaa}.___SInput_me7lq_gg_._state_valid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SOutline_me7lq_gg_{border-color:#ffaeb5}.___SInput_me7lq_gg_._state_invalid_me7lq_gg_ .___SValue_me7lq_gg_:focus~.___SOutline_me7lq_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_me7lq_gg_._neighborLocation_right_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_me7lq_gg_._neighborLocation_both_me7lq_gg_ .___SOutline_me7lq_gg_{border-radius:0;border-left:none}.___SInput_me7lq_gg_._neighborLocation_left_me7lq_gg_ .___SOutline_me7lq_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_me7lq_gg_._neighborLocation_right_me7lq_gg_{padding-right:0}.___SValue_me7lq_gg_._neighborLocation_both_me7lq_gg_{padding-left:0;padding-right:0}.___SValue_me7lq_gg_._neighborLocation_left_me7lq_gg_{padding-left:0}"
 /*__inner_css_end__*/
-, "1txj6_gg_")
+, "me7lq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SInput": "___SInput_1txj6_gg_",
-  "__SOutline": "___SOutline_1txj6_gg_",
-  "__SValue": "___SValue_1txj6_gg_",
-  "__SAddon": "___SAddon_1txj6_gg_",
-  "_interactive": "__interactive_1txj6_gg_",
-  "_disabled": "__disabled_1txj6_gg_",
-  "_size_m": "_size_m_1txj6_gg_",
-  "_size_l": "_size_l_1txj6_gg_",
-  "_focused": "__focused_1txj6_gg_",
-  "_state_normal": "_state_normal_1txj6_gg_",
-  "_state_valid": "_state_valid_1txj6_gg_",
-  "_state_invalid": "_state_invalid_1txj6_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1txj6_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1txj6_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1txj6_gg_"
+  "__SInput": "___SInput_me7lq_gg_",
+  "__SOutline": "___SOutline_me7lq_gg_",
+  "__SValue": "___SValue_me7lq_gg_",
+  "__SAddon": "___SAddon_me7lq_gg_",
+  "_interactive": "__interactive_me7lq_gg_",
+  "_disabled": "__disabled_me7lq_gg_",
+  "_size_m": "_size_m_me7lq_gg_",
+  "_size_l": "_size_l_me7lq_gg_",
+  "_focused": "__focused_me7lq_gg_",
+  "_state_normal": "_state_normal_me7lq_gg_",
+  "_state_valid": "_state_valid_me7lq_gg_",
+  "_state_invalid": "_state_invalid_me7lq_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_me7lq_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_me7lq_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_me7lq_gg_"
 });
 
 var Input = /*#__PURE__*/function (_Component) {

package/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n  /**\n   * Sets the input and addons to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n  /**\n   * Sets the input state\n   * @default normal\n   */\n  state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n  extends IBoxProps,\n    INeighborItemProps,\n    IWithAutoFocusEnhanceProps {\n  /**\n   * Input value\n   */\n  value?: string;\n  /**\n   * Default value if `value` property is not provided\n   */\n  defaultValue?: string;\n  /**\n   * Handler for changing the value\n   */\n  onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n  /**\n   * Sets the input to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Sets the input to the read-only state\n   * */\n  readOnly?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n  /**\n   * Adds styles for interactive icons\n   */\n  interactive?: boolean;\n  /**\n   * Blocks the addon\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\ninterface IInputCtx {\n  getValueProps: PropGetterFn;\n  getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n  Value: <T>(props: IInputValueProps & T) => ReturnEl;\n  Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n  children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n  /**\n   * Sets the input and addons to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n  /**\n   * Sets the input state\n   * @default normal\n   */\n  state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n  extends IBoxProps,\n    INeighborItemProps,\n    IWithAutoFocusEnhanceProps {\n  /**\n   * Input value\n   */\n  value?: string;\n  /**\n   * Default value if `value` property is not provided\n   */\n  defaultValue?: string;\n  /**\n   * Handler for changing the value\n   */\n  onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n  /**\n   * Sets the input to the disabled state\n   * */\n  disabled?: boolean;\n  /**\n   * Sets the input to the read-only state\n   * */\n  readOnly?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n  /**\n   * Adds styles for interactive icons\n   */\n  interactive?: boolean;\n  /**\n   * Blocks the addon\n   * */\n  disabled?: boolean;\n  /**\n   * Input size\n   * @default m\n   */\n  size?: InputSize;\n}\n\nexport interface IInputCtx {\n  getValueProps: PropGetterFn;\n  getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n  Value: <T>(props: IInputValueProps & T) => ReturnEl;\n  Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}

package/lib/es6/style/input.shadow.css

@@ -42,7 +42,7 @@ SValue {
     color: var(--gray-300);
   }
 
-  &:read-only ~ SOutline {
+  &:not(:disabled):read-only ~ SOutline {
     background: var(--gray-50);
   }
 

package/lib/types/index.d.ts

@@ -77,7 +77,7 @@ export interface IInputAddonProps extends IBoxProps, INeighborItemProps {
   size?: InputSize;
 }
 
-interface IInputCtx {
+export interface IInputCtx {
   getValueProps: PropGetterFn;
   getAddonProps: PropGetterFn;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/input",
   "description": "Semrush Input Component",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",