@synerise/ds-subtle-form 0.9.136 → 0.9.138

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.9.138](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@0.9.137...@synerise/ds-subtle-form@0.9.138) (2024-11-29)
+
+**Note:** Version bump only for package @synerise/ds-subtle-form
+
+
+
+
+
+## [0.9.137](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@0.9.136...@synerise/ds-subtle-form@0.9.137) (2024-11-28)
+
+**Note:** Version bump only for package @synerise/ds-subtle-form
+
+
+
+
+
 ## [0.9.136](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@0.9.135...@synerise/ds-subtle-form@0.9.136) (2024-11-21)
 
 **Note:** Version bump only for package @synerise/ds-subtle-form

package/dist/Elements/DatePicker/DatePicker.js

@@ -1,9 +1,6 @@
 var _excluded = ["value", "suffix", "suffixTooltip", "format", "label", "children", "labelTooltip", "placeholder", "onApply", "onClear", "errorText", "error", "activeProp", "onDropdownVisibleChange", "disabled"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import Icon, { CalendarM } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
@@ -14,33 +11,29 @@ import format from '@synerise/ds-date-picker/dist/format';
 import * as S from '../../SubtleForm.styles';
 import { SelectContainer, ContentAbove, MaskedDatePlaceholder } from './DatePicker.styles';
 import { getFormattingString, replaceLettersWithUnderscore } from './utils';
-
 var SubtleDatePicker = function SubtleDatePicker(_ref) {
   var value = _ref.value,
-      suffix = _ref.suffix,
-      suffixTooltip = _ref.suffixTooltip,
-      dateFormat = _ref.format,
-      label = _ref.label,
-      children = _ref.children,
-      labelTooltip = _ref.labelTooltip,
-      placeholder = _ref.placeholder,
-      _onApply = _ref.onApply,
-      onClear = _ref.onClear,
-      errorText = _ref.errorText,
-      error = _ref.error,
-      activeProp = _ref.activeProp,
-      _onDropdownVisibleChange = _ref.onDropdownVisibleChange,
-      disabled = _ref.disabled,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    suffix = _ref.suffix,
+    suffixTooltip = _ref.suffixTooltip,
+    dateFormat = _ref.format,
+    label = _ref.label,
+    children = _ref.children,
+    labelTooltip = _ref.labelTooltip,
+    placeholder = _ref.placeholder,
+    _onApply = _ref.onApply,
+    onClear = _ref.onClear,
+    errorText = _ref.errorText,
+    error = _ref.error,
+    activeProp = _ref.activeProp,
+    _onDropdownVisibleChange = _ref.onDropdownVisibleChange,
+    disabled = _ref.disabled,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _React$useState = React.useState(false),
-      active = _React$useState[0],
-      setActive = _React$useState[1];
-
+    active = _React$useState[0],
+    setActive = _React$useState[1];
   var _React$useState2 = React.useState(false),
-      blurred = _React$useState2[0],
-      setBlurred = _React$useState2[1];
-
+    blurred = _React$useState2[0],
+    setBlurred = _React$useState2[1];
   var containerRef = React.useRef(null);
   var hasError = error || !!errorText;
   var showTime = rest.showTime;
@@ -115,5 +108,4 @@ var SubtleDatePicker = function SubtleDatePicker(_ref) {
     color: theme.palette['grey-600']
   }))))));
 };
-
 export default SubtleDatePicker;

package/dist/Elements/DatePicker/utils.js

@@ -5,6 +5,5 @@ export var getFormattingString = function getFormattingString(formatProp, showTi
   if (!formatProp) {
     return showTime ? 'dd-MM-yyyy, HH:mm' : 'dd-MM-yyyy';
   }
-
   return formatProp;
 };

package/dist/Elements/Field/Field.js

@@ -7,27 +7,23 @@ import { useOnClickOutside } from '@synerise/ds-utils';
 import * as S from '../../SubtleForm.styles';
 import { ContentAbove } from './Field.styles';
 import { MaskedDatePlaceholder } from '../DatePicker/DatePicker.styles';
-
 var SubtleField = function SubtleField(_ref) {
   var disabled = _ref.disabled,
-      suffix = _ref.suffix,
-      suffixTooltip = _ref.suffixTooltip,
-      label = _ref.label,
-      labelTooltip = _ref.labelTooltip,
-      activeElement = _ref.activeElement,
-      inactiveElement = _ref.inactiveElement,
-      mask = _ref.mask,
-      maskVisible = _ref.maskVisible,
-      activeProp = _ref.active;
-
+    suffix = _ref.suffix,
+    suffixTooltip = _ref.suffixTooltip,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    activeElement = _ref.activeElement,
+    inactiveElement = _ref.inactiveElement,
+    mask = _ref.mask,
+    maskVisible = _ref.maskVisible,
+    activeProp = _ref.active;
   var _React$useState = React.useState(activeProp),
-      active = _React$useState[0],
-      setActive = _React$useState[1];
-
+    active = _React$useState[0],
+    setActive = _React$useState[1];
   var _React$useState2 = React.useState(false),
-      blurred = _React$useState2[0],
-      setBlurred = _React$useState2[1];
-
+    blurred = _React$useState2[0],
+    setBlurred = _React$useState2[1];
   var containerRef = React.useRef(null);
   var handleDeactivate = React.useCallback(function () {
     setActive(false);
@@ -74,5 +70,4 @@ var SubtleField = function SubtleField(_ref) {
     color: theme.palette['grey-600']
   }))))));
 };
-
 export default SubtleField;

package/dist/Elements/Field/Field.styles.js

@@ -1,5 +1,6 @@
-import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
+import styled from 'styled-components';
 
+// eslint-disable-next-line import/prefer-default-export
 export var ContentAbove = styled.div.withConfig({
   displayName: "Fieldstyles__ContentAbove",
   componentId: "sc-1etqryf-0"

package/dist/Elements/Input/Input.js

@@ -1,9 +1,6 @@
 var _excluded = ["disabled", "value", "onChange", "placeholder", "label", "labelTooltip", "suffixTooltip", "suffix", "error", "errorText", "inputProps"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { EditS } from '@synerise/ds-icon';
@@ -11,29 +8,25 @@ import { theme } from '@synerise/ds-core';
 import { Input, Label } from '@synerise/ds-input';
 import * as S from '../../SubtleForm.styles';
 import { focusPadding } from '../../SubtleForm.styles';
-
 var SubtleTextArea = function SubtleTextArea(_ref) {
   var disabled = _ref.disabled,
-      value = _ref.value,
-      _onChange = _ref.onChange,
-      placeholder = _ref.placeholder,
-      label = _ref.label,
-      labelTooltip = _ref.labelTooltip,
-      suffixTooltip = _ref.suffixTooltip,
-      suffix = _ref.suffix,
-      error = _ref.error,
-      errorText = _ref.errorText,
-      inputProps = _ref.inputProps,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    suffixTooltip = _ref.suffixTooltip,
+    suffix = _ref.suffix,
+    error = _ref.error,
+    errorText = _ref.errorText,
+    inputProps = _ref.inputProps,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _React$useState = React.useState(false),
-      active = _React$useState[0],
-      setActive = _React$useState[1];
-
+    active = _React$useState[0],
+    setActive = _React$useState[1];
   var _React$useState2 = React.useState(false),
-      blurred = _React$useState2[0],
-      setBlurred = _React$useState2[1];
-
+    blurred = _React$useState2[0],
+    setBlurred = _React$useState2[1];
   var containerRef = React.useRef(null);
   var hasError = error || !!errorText;
   var handleDeactivate = React.useCallback(function (e) {
@@ -41,7 +34,6 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
       var onBlur = inputProps.onBlur;
       onBlur && onBlur(e);
     }
-
     setActive(false);
     setBlurred(true);
   }, [inputProps]);
@@ -90,5 +82,4 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
     color: theme.palette['grey-600']
   }))))));
 };
-
 export default SubtleTextArea;

package/dist/Elements/Select/Select.js

@@ -1,19 +1,11 @@
 var _excluded = ["disabled", "value", "suffix", "suffixTooltip", "label", "children", "labelTooltip", "placeholder", "error", "errorText", "dropdownAlign"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
@@ -22,30 +14,26 @@ import { Label } from '@synerise/ds-input';
 import Select from '@synerise/ds-select';
 import * as S from '../../SubtleForm.styles';
 import { SelectContainer, ContentAbove } from './Select.styles';
-
 var SubtleSelect = function SubtleSelect(_ref) {
   var disabled = _ref.disabled,
-      value = _ref.value,
-      suffix = _ref.suffix,
-      suffixTooltip = _ref.suffixTooltip,
-      label = _ref.label,
-      children = _ref.children,
-      labelTooltip = _ref.labelTooltip,
-      placeholder = _ref.placeholder,
-      error = _ref.error,
-      errorText = _ref.errorText,
-      _ref$dropdownAlign = _ref.dropdownAlign,
-      dropdownAlign = _ref$dropdownAlign === void 0 ? {} : _ref$dropdownAlign,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    value = _ref.value,
+    suffix = _ref.suffix,
+    suffixTooltip = _ref.suffixTooltip,
+    label = _ref.label,
+    children = _ref.children,
+    labelTooltip = _ref.labelTooltip,
+    placeholder = _ref.placeholder,
+    error = _ref.error,
+    errorText = _ref.errorText,
+    _ref$dropdownAlign = _ref.dropdownAlign,
+    dropdownAlign = _ref$dropdownAlign === void 0 ? {} : _ref$dropdownAlign,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _React$useState = React.useState(false),
-      active = _React$useState[0],
-      setActive = _React$useState[1];
-
+    active = _React$useState[0],
+    setActive = _React$useState[1];
   var _React$useState2 = React.useState(false),
-      blurred = _React$useState2[0],
-      setBlurred = _React$useState2[1];
-
+    blurred = _React$useState2[0],
+    setBlurred = _React$useState2[1];
   var containerRef = React.useRef(null);
   var hasError = error || !!errorText;
   var handleDeactivate = React.useCallback(function () {
@@ -98,5 +86,4 @@ var SubtleSelect = function SubtleSelect(_ref) {
     color: theme.palette['grey-600']
   }))))));
 };
-
 export default SubtleSelect;

package/dist/Elements/TextArea/TextArea.js

@@ -1,9 +1,6 @@
 var _excluded = ["disabled", "minRows", "maxRows", "value", "onChange", "placeholder", "label", "labelTooltip", "suffixTooltip", "suffix", "error", "errorText", "textAreaProps"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React from 'react';
 import Icon, { EditS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
@@ -17,70 +14,58 @@ var FONT_SIZE = '13px';
 var ROW_HEIGHT_PX = 17;
 var HORIZONTAL_PADDING_PX = 20;
 var VERTICAL_PADDING_PX = 7;
-
 var SubtleTextArea = function SubtleTextArea(_ref) {
   var disabled = _ref.disabled,
-      _ref$minRows = _ref.minRows,
-      minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
-      maxRows = _ref.maxRows,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      placeholder = _ref.placeholder,
-      label = _ref.label,
-      labelTooltip = _ref.labelTooltip,
-      suffixTooltip = _ref.suffixTooltip,
-      suffix = _ref.suffix,
-      error = _ref.error,
-      errorText = _ref.errorText,
-      textAreaProps = _ref.textAreaProps,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    _ref$minRows = _ref.minRows,
+    minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
+    maxRows = _ref.maxRows,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    suffixTooltip = _ref.suffixTooltip,
+    suffix = _ref.suffix,
+    error = _ref.error,
+    errorText = _ref.errorText,
+    textAreaProps = _ref.textAreaProps,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _React$useState = React.useState(false),
-      active = _React$useState[0],
-      setActive = _React$useState[1];
-
+    active = _React$useState[0],
+    setActive = _React$useState[1];
   var _React$useState2 = React.useState(false),
-      blurred = _React$useState2[0],
-      setBlurred = _React$useState2[1];
-
+    blurred = _React$useState2[0],
+    setBlurred = _React$useState2[1];
   var containerRef = React.useRef(null);
-
   var _React$useState3 = React.useState(minRows),
-      visibleRows = _React$useState3[0],
-      setVisibleRows = _React$useState3[1];
-
+    visibleRows = _React$useState3[0],
+    setVisibleRows = _React$useState3[1];
   var hasError = error || !!errorText;
   var calculateTextHeight = React.useCallback(function () {
     var textHeight = 0;
-
     if (!!value && !!containerRef.current) {
       var _calculateSize = calculateSize(value, {
-        width: containerRef.current.offsetWidth - 2 * HORIZONTAL_PADDING_PX + "px",
-        font: FONT,
-        fontSize: FONT_SIZE
-      }),
-          height = _calculateSize.height;
-
+          width: containerRef.current.offsetWidth - 2 * HORIZONTAL_PADDING_PX + "px",
+          font: FONT,
+          fontSize: FONT_SIZE
+        }),
+        height = _calculateSize.height;
       textHeight = height;
     }
-
     return textHeight;
   }, [value, containerRef]);
   React.useEffect(function () {
     var keyboardBasedLines = Number(value == null ? void 0 : value.split('\n').length);
     var refBasedLines = Math.floor((calculateTextHeight() + 2 * VERTICAL_PADDING_PX) / ROW_HEIGHT_PX);
     var lines = Math.max(Number(refBasedLines), keyboardBasedLines);
-
     if (lines && lines < minRows) {
       setVisibleRows(minRows);
       return;
     }
-
     if (lines && !!maxRows && lines > maxRows) {
       setVisibleRows(maxRows);
       return;
     }
-
     if (lines) {
       setVisibleRows(lines);
     }
@@ -90,7 +75,6 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
       var onBlur = textAreaProps.onBlur;
       onBlur && onBlur(e);
     }
-
     setActive(false);
     setBlurred(true);
   }, [textAreaProps]);
@@ -147,5 +131,4 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
     color: theme.palette['grey-600']
   }))))));
 };
-
 export default SubtleTextArea;

package/dist/SubtleForm.js

@@ -3,38 +3,27 @@ import SubtleSelect from './Elements/Select/Select';
 import SubtleDatePicker from './Elements/DatePicker/DatePicker';
 import SubtleField from './Elements/Field/Field';
 import SubtleInput from './Elements/Input/Input';
-
 var SubtleForm = function SubtleForm() {
   return null;
 };
-
 SubtleForm.TextArea = function (props) {
   return SubtleTextArea(props);
 };
-
 SubtleForm.TextArea.displayName = 'SubtleTextArea';
-
 SubtleForm.Select = function (props) {
   return SubtleSelect(props);
 };
-
 SubtleForm.Select.displayName = 'SubtleSelect';
-
 SubtleForm.DatePicker = function (props) {
   return SubtleDatePicker(props);
 };
-
 SubtleForm.DatePicker.displayName = 'SubtleDatePicker';
-
 SubtleForm.Field = function (props) {
   return SubtleField(props);
 };
-
 SubtleForm.Field.displayName = 'SubtleField';
-
 SubtleForm.Input = function (props) {
   return SubtleInput(props);
 };
-
 SubtleForm.Input.displayName = 'SubtleInput';
 export default SubtleForm;

package/dist/SubtleForm.styles.js

@@ -1,10 +1,8 @@
 import styled, { css, keyframes } from 'styled-components';
 import { MaskedDatePlaceholder } from './Elements/DatePicker/DatePicker.styles';
-
 var disableBlinkingCursor = function disableBlinkingCursor(props) {
   return css(["color:transparent;text-shadow:0 1px ", ";"], props.grey ? props.theme.palette['grey-500'] : props.theme.palette['grey-600']);
 };
-
 export var blurPadding = "7px 40px 7px 0px";
 export var focusPadding = "7px 28px 7px 12px";
 export var blurAnimation = keyframes(["0%{padding:", ";}100%{padding:", ";}"], focusPadding, blurPadding);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subtle-form",
-  "version": "0.9.136",
+  "version": "0.9.138",
   "description": "SubtleForm UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,11 +34,11 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-date-picker": "^0.13.2",
-    "@synerise/ds-icon": "^0.67.0",
-    "@synerise/ds-input": "^0.24.14",
-    "@synerise/ds-select": "^0.16.26",
-    "@synerise/ds-tooltip": "^0.14.49",
+    "@synerise/ds-date-picker": "^0.13.4",
+    "@synerise/ds-icon": "^0.68.0",
+    "@synerise/ds-input": "^0.24.16",
+    "@synerise/ds-select": "^0.16.28",
+    "@synerise/ds-tooltip": "^0.14.51",
     "@synerise/ds-utils": "^0.31.2",
     "calculate-size": "^1.1.1"
   },
@@ -48,5 +48,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "9ebd107163650754a5f55680d62d30812d740084"
 }