@activecollab/components 2.0.100 → 2.0.102

package/dist/esm/components/Input/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger","StyledFlagTriggerLabel","span","_ref","StyledOptionFlag","StyledOptionName","StyledOptionWrapper"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n      border: none;\n      border-radius: none;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n    `}\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n\nexport const StyledFlagTriggerLabel = styled.span<{\n  $size: \"small\" | \"regular\" | \"big\";\n}>`\n  font-size: ${({ $size }) => ($size === \"small\" ? \"20px\" : \"24px\")};\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledFlagTriggerLabel\";\n\nexport const StyledOptionFlag = styled.span`\n  font-size: 24px;\n  margin-right: 4px;\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledOptionFlag\";\n\nexport const StyledOptionName = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nStyledOptionName.displayName = \"StyledOptionName\";\n\nexport const StyledOptionWrapper = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 8px;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n`;\n\nStyledOptionWrapper.displayName = \"StyledOptionWrapper\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","InputResetStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger","StyledFlagTriggerLabel","span","_ref","StyledOptionFlag","StyledOptionName","StyledOptionWrapper"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputResetStyle } from \"../InputResetStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n      border: none;\n      border-radius: none;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  ${BoxSizingStyle}\n  ${InputResetStyle}\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      background-color: transparent;\n    `}\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n\nexport const StyledFlagTriggerLabel = styled.span<{\n  $size: \"small\" | \"regular\" | \"big\";\n}>`\n  font-size: ${({ $size }) => ($size === \"small\" ? \"20px\" : \"24px\")};\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledFlagTriggerLabel\";\n\nexport const StyledOptionFlag = styled.span`\n  font-size: 24px;\n  margin-right: 4px;\n`;\n\nStyledFlagTriggerLabel.displayName = \"StyledOptionFlag\";\n\nexport const StyledOptionName = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nStyledOptionName.displayName = \"StyledOptionName\";\n\nexport const StyledOptionWrapper = styled.span`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 8px;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n`;\n\nStyledOptionWrapper.displayName = \"StyledOptionWrapper\";\n"],"mappings":"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"}

package/dist/esm/components/InputResetStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const InputResetStyle: import("styled-components").FlattenSimpleInterpolation;
+//# sourceMappingURL=InputResetStyle.d.ts.map

package/dist/esm/components/InputResetStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputResetStyle.d.ts","sourceRoot":"","sources":["../../../src/components/InputResetStyle.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,wDAM3B,CAAC"}

package/dist/esm/components/InputResetStyle.js

@@ -0,0 +1,3 @@
+import { css } from "styled-components";
+export const InputResetStyle = css(["margin:0;padding:0;border:0;outline:0;font:inherit;"]);
+//# sourceMappingURL=InputResetStyle.js.map

package/dist/esm/components/InputResetStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputResetStyle.js","names":["css","InputResetStyle"],"sources":["../../../src/components/InputResetStyle.ts"],"sourcesContent":["import { css } from \"styled-components\";\n\nexport const InputResetStyle = css`\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  font: inherit;\n`;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,mBAAmB;AAEvC,OAAO,MAAMC,eAAe,GAAGD,GAAG,yDAMjC"}

package/dist/index.js

@@ -11524,6 +11524,8 @@
   });
   Checkbox.displayName = "Checkbox";
 
+  var InputResetStyle = styled.css(["margin:0;padding:0;border:0;outline:0;font:inherit;"]);
+
   var StyledInputWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledInputWrapper",
     componentId: "sc-ce8kcp-0"
@@ -11546,7 +11548,7 @@
   var StyledInput$2 = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-1"
-  })(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], function (props) {
+  })(["", " ", " background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;", " &::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], BoxSizingStyle, InputResetStyle, function (props) {
     return props.$mode === "flat" && styled.css(["background-color:transparent;"]);
   }, function (props) {
     return props.$size === "big" && styled.css(["font-size:1rem;"]);
@@ -13905,6 +13907,12 @@
   });
   InputPassword.displayName = "InputPassword";
 
+  var StyledButton = styled__default["default"].button.withConfig({
+    displayName: "Styles__StyledButton",
+    componentId: "sc-1tom9pu-0"
+  })(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
+  StyledButton.displayName = "StyledButton";
+
   var InputSelect = function InputSelect(_ref) {
     var onChange = _ref.onChange,
       size = _ref.size,
@@ -13924,14 +13932,14 @@
       onChange: onChange,
       forceCloseMenu: true,
       disableSearch: !search,
-      target: /*#__PURE__*/React__default["default"].createElement(StyledInputSelectTrigger, {
+      target: /*#__PURE__*/React__default["default"].createElement(StyledButton, null, /*#__PURE__*/React__default["default"].createElement(StyledInputSelectTrigger, {
         $disabled: disabled,
         $size: size
       }, selectedLabel ? selectedLabel : selected, size === "big" ? /*#__PURE__*/React__default["default"].createElement(ArrowDownIcon$1, {
         fill: "var(--color-theme-700)"
       }) : /*#__PURE__*/React__default["default"].createElement(ArrowDownSmallIcon$1, {
         fill: "var(--color-theme-700)"
-      })),
+      }))),
       options: options,
       disabledInternalSort: disabledInternalSort,
       keepSameOptionsOrder: keepSameOptionsOrder,
@@ -14008,6 +14016,10 @@
     [onChange, prefix]);
     var handleSelectChange = function handleSelectChange(val) {
       setPrefix(val);
+      setTimeout(function () {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }, 200);
       typeof onChange === "function" && onChange(val + value);
     };
     var handlePaste = function handlePaste(e) {
@@ -14125,6 +14137,10 @@
     [onChange, prefix]);
     var handleSelectChange = function handleSelectChange(val) {
       setPrefix(val);
+      setTimeout(function () {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+      }, 200);
       typeof onChange === "function" && onChange("+".concat(l(val)).concat(value));
     };
     var handlePaste = function handlePaste(e) {
@@ -16321,12 +16337,6 @@
   });
   ValueButton.displayName = "ValueButton";
 
-  var StyledButton = styled__default["default"].button.withConfig({
-    displayName: "Styles__StyledButton",
-    componentId: "sc-1tom9pu-0"
-  })(["border:none;margin:0;padding:0;width:auto;overflow:visible;cursor:pointer;background:transparent;outline:none;color:inherit;font:inherit;line-height:inherit;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;&::-moz-focus-inner{border:0;padding:0;}"]);
-  StyledButton.displayName = "StyledButton";
-
   var _excluded$n = ["children", "type"];
   var Trigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,