@rescui/input 0.9.9 → 0.10.1

package/lib/input.js

@@ -18,7 +18,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { CloseIcon } from '@rescui/icons';
 import cn from 'classnames';
-import { useTheme } from '@rescui/ui-contexts';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import styles from './input.p.module.css.js';
 import { RightIcons } from './parts/right-icons.js';
 import { CustomIcon } from './parts/custom-icon.js';
@@ -65,7 +65,7 @@ function (_ref, ref) {
       boldLabel = _ref.boldLabel,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var theme = useTheme(themeFromProps); // replace with :focus-within when ie11 is not supported anymore
+  var theme = useThemeWithUndefined(themeFromProps); // replace with :focus-within when ie11 is not supported anymore
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -98,11 +98,12 @@ function (_ref, ref) {
   var renderLeftCustomIcon = icon && iconType === 'left';
   var renderRightCustomIcon = icon && (iconType === 'right' || iconType === 'rightAction' || iconType === 'rightActionFocusable');
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.container, styles[theme], styles[mode], sizeStyles[size], (_cn = {}, _defineProperty(_cn, styles.focused, focused), _defineProperty(_cn, styles.filled, filled), _defineProperty(_cn, styles.enabled, enabled), _defineProperty(_cn, styles.error, Boolean(error)), _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.offSystemMicroelements, offSystemMicroelements), _defineProperty(_cn, styles.boldLabel, boldLabel), _cn), className),
+    className: cn(styles.container, styles[theme], styles[mode], sizeStyles[size], (_cn = {}, _defineProperty(_cn, styles.focused, focused), _defineProperty(_cn, styles.filled, filled), _defineProperty(_cn, styles.enabled, enabled), _defineProperty(_cn, styles.error, Boolean(error)), _defineProperty(_cn, styles.disabled, disabled), _defineProperty(_cn, styles.offSystemMicroelements, offSystemMicroelements), _cn), className),
     style: style,
     "data-test": "input"
   }, /*#__PURE__*/React.createElement("label", null, label && /*#__PURE__*/React.createElement("div", {
-    className: styles.label
+    className: styles.label,
+    "data-rs-internal": boldLabel ? 'input__bold-label' : 'input__label'
   }, label), /*#__PURE__*/React.createElement("div", {
     className: styles.wrapper,
     onFocus: function onFocus() {
@@ -141,8 +142,7 @@ function (_ref, ref) {
     icon: icon,
     iconIsAction: false,
     iconIsFocusable: false,
-    iconPosition: "left",
-    size: size
+    iconPosition: "left"
   }), /*#__PURE__*/React.createElement("input", _objectSpread(_objectSpread({}, restProps), {}, {
     id: id,
     className: styles.inner,
@@ -162,12 +162,12 @@ function (_ref, ref) {
     value: value,
     ref: ref,
     "aria-invalid": Boolean(error),
-    "data-test": "input__inner"
+    "data-test": "input__inner",
+    "data-rs-internal": "input__inner"
   })), /*#__PURE__*/React.createElement(RightIcons, {
     icon: renderRightCustomIcon && icon,
     iconIsAction: iconType === 'rightAction' || iconType === 'rightActionFocusable',
     iconIsFocusable: iconType === 'rightActionFocusable',
-    size: size,
     clearIcon: clearIcon,
     onClear: onClear,
     empty: empty,
@@ -176,12 +176,15 @@ function (_ref, ref) {
     className: styles.divider
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.suffix,
-    "data-test": "input__suffix"
+    "data-test": "input__suffix",
+    "data-rs-internal": "input__suffix"
   }, suffix)))), error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
     className: styles.errorMessage,
-    "data-test": "input__error-message"
+    "data-test": "input__error-message",
+    "data-rs-internal": "input__error-message"
   }, error), note && /*#__PURE__*/React.createElement("div", {
-    className: styles.note
+    className: styles.note,
+    "data-rs-internal": "input__note"
   }, note));
 });
 Input.displayName = 'Input';

package/lib/input.p.module.css.js

@@ -1,31 +1,30 @@
 var styles = {
-  "container": "_container_1xc6iin_10",
-  "wrapper": "_wrapper_1xc6iin_14",
-  "light": "_light_1xc6iin_21",
-  "enabled": "_enabled_1xc6iin_27",
-  "filled": "_filled_1xc6iin_27",
-  "focused": "_focused_1xc6iin_39",
-  "classic": "_classic_1xc6iin_44",
-  "rock": "_rock_1xc6iin_48",
-  "dark": "_dark_1xc6iin_52",
-  "error": "_error_1xc6iin_83",
-  "disabled": "_disabled_1xc6iin_103",
-  "field": "_field_1xc6iin_161",
-  "sizeL": "_sizeL_1xc6iin_121",
-  "sizeM": "_sizeM_1xc6iin_125",
-  "sizeS": "_sizeS_1xc6iin_129",
-  "inner": "_inner_1xc6iin_171",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1xc6iin_1",
-  "offSystemMicroelements": "_offSystemMicroelements_1xc6iin_345",
-  "icon": "_icon_1xc6iin_356",
-  "action": "_action_1xc6iin_360",
-  "right": "_right_1xc6iin_441",
-  "left": "_left_1xc6iin_453",
-  "divider": "_divider_1xc6iin_523",
-  "suffix": "_suffix_1xc6iin_558",
-  "errorMessage": "_errorMessage_1xc6iin_596",
-  "note": "_note_1xc6iin_614",
-  "label": "_label_1xc6iin_646",
-  "boldLabel": "_boldLabel_1xc6iin_661"
+  "light": "_light_6gddzg_8",
+  "dark": "_dark_6gddzg_11",
+  "sizeS": "_sizeS_6gddzg_15",
+  "sizeM": "_sizeM_6gddzg_18",
+  "sizeL": "_sizeL_6gddzg_21",
+  "classic": "_classic_6gddzg_25",
+  "rock": "_rock_6gddzg_28",
+  "container": "_container_6gddzg_32",
+  "wrapper": "_wrapper_6gddzg_39",
+  "disabled": "_disabled_6gddzg_51",
+  "error": "_error_6gddzg_57",
+  "enabled": "_enabled_6gddzg_63",
+  "filled": "_filled_6gddzg_63",
+  "focused": "_focused_6gddzg_75",
+  "field": "_field_6gddzg_101",
+  "inner": "_inner_6gddzg_114",
+  "offSystemMicroelements": "_offSystemMicroelements_6gddzg_229",
+  "iconWrapper": "_iconWrapper_6gddzg_239",
+  "action": "_action_6gddzg_254",
+  "right": "_right_6gddzg_292",
+  "left": "_left_6gddzg_296",
+  "icon": "_icon_6gddzg_239",
+  "divider": "_divider_6gddzg_342",
+  "suffix": "_suffix_6gddzg_356",
+  "errorMessage": "_errorMessage_6gddzg_376",
+  "note": "_note_6gddzg_383",
+  "label": "_label_6gddzg_396"
 };
 export { styles as default };

package/lib/parts/custom-icon.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { InputSize } from '../input';
 interface MouseInteractiveProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     onContextMenu?: React.MouseEventHandler<HTMLButtonElement>;
@@ -18,7 +17,6 @@ export declare function transferInteractiveProps(iconProps: MouseInteractiveProp
     icon: MouseInteractiveProps;
 };
 declare type CustomIconProps = {
-    size?: InputSize;
     icon: React.ReactNode;
     iconIsAction?: boolean;
     iconIsFocusable?: boolean;

package/lib/parts/custom-icon.js

@@ -38,19 +38,18 @@ function transferInteractiveProps(iconProps) {
 
 var CustomIcon = function CustomIcon(_ref) {
   var icon = _ref.icon,
-      size = _ref.size,
       iconPosition = _ref.iconPosition,
       iconIsAction = _ref.iconIsAction,
       iconIsFocusable = _ref.iconIsFocusable;
   var mouseEvents = transferInteractiveProps(icon.props);
   var iconJsx = /*#__PURE__*/React.cloneElement(icon, _objectSpread({
-    size: size,
-    focusable: false
+    focusable: false,
+    className: cn(icon.props.className, styles.icon)
   }, mouseEvents.icon));
   return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({
     role: iconIsAction ? 'button' : null,
     key: "icon",
-    className: cn(styles.icon, styles[iconPosition], iconIsAction && styles.action)
+    className: cn(styles.iconWrapper, styles[iconPosition], iconIsAction && styles.action)
   }, mouseEvents.button), {}, {
     "data-test": "input__icon",
     tabIndex: iconIsAction && iconIsFocusable ? 0 : -1

package/lib/parts/right-icons.js

@@ -8,7 +8,6 @@ import { CustomIcon } from './custom-icon.js'; // eslint-disable-next-line compl
 var RightIcons = function RightIcons(_ref) {
   var icon = _ref.icon,
       busy = _ref.busy,
-      size = _ref.size,
       onClear = _ref.onClear,
       clearIcon = _ref.clearIcon,
       iconIsAction = _ref.iconIsAction,
@@ -23,21 +22,19 @@ var RightIcons = function RightIcons(_ref) {
     React.createElement("span", {
       role: "button",
       key: "clear",
-      className: cn(styles.icon, styles.right, styles.action),
+      className: cn(styles.iconWrapper, styles.right, styles.action),
       onClick: onClear,
       "data-test": "input__clear-icon",
       tabIndex: -1
     }, /*#__PURE__*/React.cloneElement(clearIcon, {
-      size: size,
       focusable: false,
-      className: clearIcon.props.className
+      className: cn(clearIcon.props.className, styles.icon)
     })));
   }
 
   if (icon) {
     icons.push( /*#__PURE__*/React.createElement(CustomIcon, {
       key: "custom-icon",
-      size: size,
       iconPosition: 'right',
       iconIsFocusable: iconIsFocusable,
       iconIsAction: iconIsAction,
@@ -47,10 +44,10 @@ var RightIcons = function RightIcons(_ref) {
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, _sliceInstanceProperty(icons).call(icons, 0, busy ? -1 : icons.length), busy && /*#__PURE__*/React.createElement("span", {
     key: "loading",
-    className: cn(styles.icon, styles.right)
+    className: cn(styles.iconWrapper, styles.right)
   }, /*#__PURE__*/React.createElement(LoadingIcon, {
-    size: size,
-    "data-test": "input__busy-icon"
+    "data-test": "input__busy-icon",
+    className: styles.icon
   })));
 };