@synerise/ds-subtle-form 1.1.58 → 1.1.60

package/dist/SubtleForm.styles.js

@@ -1,65 +1,68 @@
-import styled, { css, keyframes } from 'styled-components';
-import FormField from '@synerise/ds-form-field';
-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']);
+import styled, { css, keyframes } from "styled-components";
+import FormField from "@synerise/ds-form-field";
+import { TextareaWrapper } from "@synerise/ds-input/dist/Textarea/Textarea.styles";
+import { hexToRgba } from "@synerise/ds-utils";
+import { MaskedDatePlaceholder } from "./Elements/DatePicker/DatePicker.styles.js";
+const VERTICAL_PADDING = "8px";
+const VERTICAL_PADDING_TEXTAREA = "6px";
+const getFocusPadding = ({
+  hasSuffix = true,
+  state = "hovered"
+}) => {
+  const verticalPadding = state === "focused" ? VERTICAL_PADDING_TEXTAREA : VERTICAL_PADDING;
+  return `${verticalPadding} ${hasSuffix ? "28px" : "8px"} ${verticalPadding}  ${state === "focused" ? "8px" : "7px"}`;
 };
-export var blurPadding = "7px 40px 7px 0px";
-export var focusPadding = "7px 28px 7px 12px";
-export var blurAnimation = keyframes(["0%{padding:", ";}100%{padding:", ";}"], focusPadding, blurPadding);
-export var MainContent = styled.div.withConfig({
+const getBlurPadding = ({
+  hasSuffix = true
+}) => {
+  return hasSuffix ? `8px 16px 8px 0` : `8px 40px 8px 0`;
+};
+const getBlurAnimation = (props) => {
+  return keyframes(["0%{padding:", ";}100%{padding:", "}"], getFocusPadding(props), getBlurPadding(props));
+};
+const MainContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__MainContent",
   componentId: "sc-1wunvof-0"
-})(["", " width:100%;height:100%;transition:color 0.1s ease-in 0.2s;", ""], function (props) {
-  return props.breakWord ? css(["display:flex;align-items:flex-start;flex:1;word-wrap:break-word;overflow-wrap:break-word;"]) : css(["overflow-wrap:nowrap;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
-}, function (props) {
-  return !!props.hasMargin && "margin-top:1px;\n";
-});
-export var Suffix = styled.div.withConfig({
+})(["", " width:100%;height:100%;transition:color 0.1s ease-in 0.2s;", ""], (props) => props.breakWord ? css(["display:flex;align-items:flex-start;flex:1;word-wrap:break-word;overflow-wrap:break-word;"]) : css(["overflow-wrap:nowrap;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]), (props) => !!props.hasMargin && `margin-top:1px;
+`);
+const Suffix = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Suffix",
   componentId: "sc-1wunvof-1"
-})(["position:absolute;right:", ";top:6px;display:flex;opacity:0;height:24px;transition:opacity 0.1s ease-in;transition-delay:0.2s;margin-top:-2px;cursor:pointer;"], function (props) {
-  return props.select ? "9px" : "6px";
-});
-export var Inactive = styled.div.withConfig({
+})(["position:absolute;right:", ";top:6px;display:flex;opacity:0;height:24px;transition:opacity 0.1s ease-in;transition-delay:0.2s;margin-top:-2px;cursor:pointer;"], (props) => props.select ? `9px` : `6px`);
+const Inactive = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Inactive",
   componentId: "sc-1wunvof-2"
-})(["position:relative;width:100%;height:32px;display:flex;", " align-items:flex-start;background:", ";padding:", ";opacity:", ";border-radius:3px;transition:padding 0.1s ease-in,background 0.1s ease-in;transition-delay:0.2s;&&{", "}", " ", ""], function (props) {
-  return !!props.rows && "height: " + (props.rows * 17 + 17) + "px;";
-}, function (props) {
-  return props.theme.palette.white;
-}, blurPadding, function (props) {
-  return props.disabled ? "0.5" : "1";
-}, function (props) {
-  return !!props.disabled && css(["animation:none;textarea{cursor:not-allowed;}"]);
-}, function (props) {
-  return props.blurred && !props.disabled && css(["animation:", " 0.1s ease-in;"], blurAnimation);
-}, function (props) {
-  return !props.disabled && css(["&:hover{padding:", ";background:", ";", "{", " ", "{left:12px;", "}}", "{opacity:1;}}"], focusPadding, props.theme.palette['grey-050'], MainContent, props.mask && "color: transparent;", MaskedDatePlaceholder, props.mask && "color: " + props.theme.palette['grey-600'] + ";", Suffix);
-});
-export var ValueArea = styled.textarea.withConfig({
+})(["position:relative;width:100%;height:32px;display:flex;", " align-items:flex-start;background:transparent;padding:", ";opacity:", ";border-radius:3px;transition:padding 0.1s ease-in,background 0.1s ease-in;transition-delay:0.2s;&&{", "}", " ", ""], (props) => !!props.$rows && `height: ${props.$rows * 17 + 17}px;`, (props) => getBlurPadding({
+  hasSuffix: props.isSuffixVisible
+}), (props) => props.$disabled ? `0.5` : `1`, (props) => !!props.$disabled && css(["animation:none;textarea{cursor:not-allowed;}"]), (props) => props.$blurred && !props.$disabled && css(["animation:", " 0.1s ease-in;"], getBlurAnimation({
+  hasSuffix: props.isSuffixVisible
+})), (props) => !props.$disabled && css(["&:hover{padding:", ";background:", ";", "{", " ", "{left:12px;", "}}", "{opacity:1;}}"], getFocusPadding({
+  hasSuffix: props.isSuffixVisible
+}), hexToRgba(props.theme.palette["grey-300"], 0.4), MainContent, props.$mask && `color: transparent;`, MaskedDatePlaceholder, props.$mask && `color: ${props.theme.palette["grey-600"]};`, Suffix));
+const ValueArea = /* @__PURE__ */ styled.textarea.withConfig({
   displayName: "SubtleFormstyles__ValueArea",
   componentId: "sc-1wunvof-3"
-})(["&&{font-variant-numeric:normal;word-wrap:break-word;overflow-wrap:break-word;", " width:100%;height:100%;background:transparent;border:none;padding:0;margin:0;overflow:auto;outline:none;box-shadow:none;resize:none;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}}"], function (props) {
-  return disableBlinkingCursor(props);
-});
-export var Container = styled.div.withConfig({
+})(["&&{font-variant-numeric:normal;word-wrap:break-word;overflow-wrap:break-word;color:transparent;text-shadow:0 1px ", ";width:100%;height:100%;background:transparent;border:none;padding:0;margin:0;overflow:auto;outline:none;box-shadow:none;resize:none;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}}"], (props) => props.isPlaceholder ? props.theme.palette["grey-500"] : props.theme.palette["grey-600"]);
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Container",
   componentId: "sc-1wunvof-4"
-})(["&.ds-subtle-input{", "{line-height:18px;}.ant-input::placeholder{line-height:16px;}}position:relative;width:100%;", " > div{margin:0;}.ds-subtle-select{.ant-select-selector:{transition:all 0s linear !important;}}&& .ant-input-number-input::placeholder{padding-bottom:8px;}", ""], Inactive, function (props) {
-  return !!props.active && css(["margin:-1px 0 0 -1px;"]);
-}, function (props) {
-  return !!props.disabled && css(["&&{cursor:not-allowed;}"]);
-});
-export var Subtle = styled.div.withConfig({
+})(["&.ds-subtle-input{", "{line-height:18px;}.ant-input::placeholder{line-height:16px;}}position:relative;width:100%;", " > div{margin:0;}.ds-subtle-select{.ant-select-selector:{transition:all 0s linear !important;}}&& .ant-input-number-input::placeholder{padding-bottom:8px;}", ""], Inactive, (props) => !!props.active && css(["margin:-1px 0 0 -1px;"]), (props) => !!props.disabled && css(["&&{cursor:not-allowed;}"]));
+const Subtle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Subtle",
   componentId: "sc-1wunvof-5"
-})(["", ""], function (props) {
-  return !!props.disabled && css(["&&{cursor:not-allowed;}"]);
-});
-export var SubtleFormField = styled(FormField).withConfig({
+})(["", " ", "{", "}"], (props) => !!props.$disabled && css(["&&{cursor:not-allowed;}"]), TextareaWrapper, (props) => props.hasError ? `background-color: ${hexToRgba(props.theme.palette["red-100"], 0.4)};` : `background-color: ${hexToRgba(props.theme.palette["blue-100"], 0.4)};`);
+const SubtleFormField = /* @__PURE__ */ styled(FormField).withConfig({
   displayName: "SubtleFormstyles__SubtleFormField",
   componentId: "sc-1wunvof-6"
-})(["gap:", ";"], function (props) {
-  return props.active ? "10px" : "8px";
-});
+})(["gap:", ";"], (props) => props.$active ? `9px` : `8px`);
+export {
+  Container,
+  Inactive,
+  MainContent,
+  Subtle,
+  SubtleFormField,
+  Suffix,
+  ValueArea,
+  getBlurPadding,
+  getFocusPadding
+};

package/dist/SubtleForm.types.d.ts

@@ -1,10 +1,10 @@
-import type { ReactElement, ReactNode } from 'react';
-import { type FormFieldCommonProps } from '@synerise/ds-form-field';
+import { ReactElement, ReactNode } from 'react';
+import { FormFieldCommonProps } from '@synerise/ds-form-field';
 export type SubtleFieldProps = {
     active?: boolean;
     disabled?: boolean;
     labelTooltip?: FormFieldCommonProps['tooltip'];
-    suffix?: ReactNode;
+    suffix?: boolean;
     suffixTooltip?: ReactNode;
     activeElement?: () => ReactElement;
     inactiveElement?: () => ReactElement;

package/dist/SubtleForm.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './SubtleForm';
+import { default as default2 } from "./SubtleForm.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subtle-form",
-  "version": "1.1.58",
+  "version": "1.1.60",
   "description": "SubtleForm UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,13 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-date-picker": "^1.4.1",
-    "@synerise/ds-form-field": "^1.3.9",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-input": "^1.6.9",
-    "@synerise/ds-select": "^1.3.19",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-date-picker": "^1.4.3",
+    "@synerise/ds-form-field": "^1.3.11",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-input": "^1.6.11",
+    "@synerise/ds-select": "^1.3.21",
+    "@synerise/ds-tooltip": "^1.4.11",
+    "@synerise/ds-utils": "^1.7.1",
     "calculate-size": "^1.1.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }