@synerise/ds-completed-within 1.2.10 → 1.2.11

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@1.2.10...@synerise/ds-completed-within@1.2.11) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-completed-within
+
 ## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@1.2.9...@synerise/ds-completed-within@1.2.10) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-completed-within

package/dist/CompleteWithin.styles.d.ts

@@ -1,7 +1,7 @@
-import { type StyledButton } from '@synerise/ds-button';
+import { StyledButton } from '@synerise/ds-button';
 export declare const TriggerButton: StyledButton;
 export declare const ClearButton: StyledButton;
-export declare const CompletedWithinWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const CompletedWithinWrapper: import('styled-components').StyledComponent<"div", any, {
     withValue: boolean;
     readOnly?: boolean;
 }, never>;

package/dist/CompleteWithin.styles.js

@@ -1,25 +1,20 @@
-import styled, { css } from 'styled-components';
-import Button from '@synerise/ds-button';
-import { IconContainer } from '@synerise/ds-icon';
-export var TriggerButton = styled(Button).withConfig({
+import styled, { css } from "styled-components";
+import Button from "@synerise/ds-button";
+import { IconContainer } from "@synerise/ds-icon";
+const TriggerButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "CompleteWithinstyles__TriggerButton",
   componentId: "sc-1hcip2f-0"
 })(["transition:padding 0s;"]);
-export var ClearButton = styled(Button).withConfig({
+const ClearButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "CompleteWithinstyles__ClearButton",
   componentId: "sc-1hcip2f-1"
-})(["&&&{opacity:0;pointer-events:none;transition:opacity 0.3s ease-in-out,width 0.3s ease-in-out;", "{svg{fill:", ";color:", ";}}&:hover{", "{svg{fill:", " !important;color:", " !important;}}}&:focus{.btn-focus{box-shadow:none;}}}"], IconContainer, function (props) {
-  return props.theme.palette['red-600'];
-}, function (props) {
-  return props.theme.palette['red-600'];
-}, IconContainer, function (props) {
-  return props.theme.palette['red-600'];
-}, function (props) {
-  return props.theme.palette['red-600'];
-});
-export var CompletedWithinWrapper = styled.div.withConfig({
+})(["&&&{opacity:0;pointer-events:none;transition:opacity 0.3s ease-in-out,width 0.3s ease-in-out;", "{svg{fill:", ";color:", ";}}&:hover{", "{svg{fill:", " !important;color:", " !important;}}}&:focus{.btn-focus{box-shadow:none;}}}"], IconContainer, (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-600"], IconContainer, (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-600"]);
+const CompletedWithinWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CompleteWithinstyles__CompletedWithinWrapper",
   componentId: "sc-1hcip2f-2"
-})(["display:flex;align-items:center;justify-content:flex-start;height:32px;position:relative;", ";"], function (props) {
-  return Boolean(props.withValue) && !props.readOnly && css(["&&&{", "{padding-right:32px;}", "{background-color:transparent !important;position:absolute;right:0;opacity:1;pointer-events:all;}}"], TriggerButton, ClearButton);
-});
+})(["display:flex;align-items:center;justify-content:flex-start;height:32px;position:relative;", ";"], (props) => Boolean(props.withValue) && !props.readOnly && css(["&&&{", "{padding-right:32px;}", "{background-color:transparent !important;position:absolute;right:0;opacity:1;pointer-events:all;}}"], TriggerButton, ClearButton));
+export {
+  ClearButton,
+  CompletedWithinWrapper,
+  TriggerButton
+};

package/dist/CompletedWithin.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type CompletedWithinProps } from './CompletedWithin.types';
+import { default as React } from 'react';
+import { CompletedWithinProps } from './CompletedWithin.types';
 export declare const DEFAULT_PERIODS: string[];
 declare const CompletedWithin: ({ value, maxValue, onSetValue, text, periods, placeholder, tooltip, readOnly, }: CompletedWithinProps) => React.JSX.Element;
 export default CompletedWithin;

package/dist/CompletedWithin.js

@@ -1,150 +1,102 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { ClockM, Close3S } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './CompleteWithin.styles';
-import Settings from './Settings/Settings';
-export var DEFAULT_PERIODS = ['SECONDS', 'MINUTES', 'HOURS', 'DAYS', 'MONTHS', 'YEARS'];
-var CompletedWithin = function CompletedWithin(_ref) {
-  var value = _ref.value,
-    maxValue = _ref.maxValue,
-    onSetValue = _ref.onSetValue,
-    text = _ref.text,
-    periods = _ref.periods,
-    placeholder = _ref.placeholder,
-    tooltip = _ref.tooltip,
-    readOnly = _ref.readOnly;
-  var intl = useIntl();
-  var texts = useMemo(function () {
-    return _extends({
-      header: intl.formatMessage({
-        id: 'DS.COMPLETED-WITHIN.HEADER',
-        defaultMessage: 'Completed within'
-      }),
-      completedLabel: intl.formatMessage({
-        id: 'DS.COMPLETED-WITHIN.COMPLETED-WIHITN',
-        defaultMessage: 'Completed within'
-      }),
-      clear: intl.formatMessage({
-        id: 'DS.COMPLETED-WITHIN.CLEAR',
-        defaultMessage: 'Clear'
-      }),
-      periodPlaceholder: intl.formatMessage({
-        id: 'DS.COMPLETED-WITHIN.PERIOD-PLACEHOLDER',
-        defaultMessage: 'Interval'
-      })
-    }, text);
-  }, [text, intl]);
-  var getPeriods = useMemo(function () {
-    if (periods !== undefined && periods.length) {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useCallback } from "react";
+import { useIntl } from "react-intl";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { Close3S, ClockM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { CompletedWithinWrapper, ClearButton, TriggerButton } from "./CompleteWithin.styles.js";
+import Settings from "./Settings/Settings.js";
+const DEFAULT_PERIODS = ["SECONDS", "MINUTES", "HOURS", "DAYS", "MONTHS", "YEARS"];
+const CompletedWithin = ({
+  value,
+  maxValue,
+  onSetValue,
+  text,
+  periods,
+  placeholder,
+  tooltip,
+  readOnly
+}) => {
+  const intl = useIntl();
+  const texts = useMemo(() => ({
+    header: intl.formatMessage({
+      id: "DS.COMPLETED-WITHIN.HEADER",
+      defaultMessage: "Completed within"
+    }),
+    completedLabel: intl.formatMessage({
+      id: "DS.COMPLETED-WITHIN.COMPLETED-WIHITN",
+      defaultMessage: "Completed within"
+    }),
+    clear: intl.formatMessage({
+      id: "DS.COMPLETED-WITHIN.CLEAR",
+      defaultMessage: "Clear"
+    }),
+    periodPlaceholder: intl.formatMessage({
+      id: "DS.COMPLETED-WITHIN.PERIOD-PLACEHOLDER",
+      defaultMessage: "Interval"
+    }),
+    ...text
+  }), [text, intl]);
+  const getPeriods = useMemo(() => {
+    if (periods !== void 0 && periods.length) {
       return periods;
     }
-    return DEFAULT_PERIODS.map(function (period) {
-      return {
-        value: period,
-        label: intl.formatMessage({
-          id: "DS.COMPLETED-WITHIN." + period,
-          defaultMessage: period
-        })
-      };
-    });
+    return DEFAULT_PERIODS.map((period) => ({
+      value: period,
+      label: intl.formatMessage({
+        id: `DS.COMPLETED-WITHIN.${period}`,
+        defaultMessage: period
+      })
+    }));
   }, [periods, intl]);
-  var _useState = useState(value.value),
-    innerValue = _useState[0],
-    setInnerValue = _useState[1];
-  var _useState2 = useState(value.period),
-    innerPeriod = _useState2[0],
-    setInnerPeriod = _useState2[1];
-  var _useState3 = useState(false),
-    tooltipOpen = _useState3[0],
-    setTooltipOpen = _useState3[1];
-  var _useState4 = useState(false),
-    settingsOpen = _useState4[0],
-    setSettingsVisible = _useState4[1];
-  var hasValue = useMemo(function () {
-    return value.value !== undefined && value.value > 0;
-  }, [value]);
-  var handleOpenChange = useCallback(function (visible) {
+  const [innerValue, setInnerValue] = useState(value.value);
+  const [innerPeriod, setInnerPeriod] = useState(value.period);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [settingsOpen, setSettingsVisible] = useState(false);
+  const hasValue = useMemo(() => value.value !== void 0 && value.value > 0, [value]);
+  const handleOpenChange = useCallback((visible) => {
     setSettingsVisible(visible);
     setTooltipOpen(false);
     if (!visible && innerValue && innerPeriod) {
-      var newValue = maxValue && maxValue < Number(innerValue) ? maxValue : innerValue;
+      const newValue = maxValue && maxValue < Number(innerValue) ? maxValue : innerValue;
       onSetValue({
         value: Number(newValue),
         period: innerPeriod
       });
     }
   }, [innerPeriod, innerValue, maxValue, onSetValue]);
-  var handleClear = useCallback(function () {
-    setInnerPeriod(undefined);
-    setInnerValue(undefined);
+  const handleClear = useCallback(() => {
+    setInnerPeriod(void 0);
+    setInnerValue(void 0);
     onSetValue({
-      value: undefined,
-      period: undefined
+      value: void 0,
+      period: void 0
     });
   }, [onSetValue]);
-  var triggerMode = useMemo(function () {
+  const triggerMode = useMemo(() => {
     if (hasValue || placeholder) {
-      return 'icon-label';
+      return "icon-label";
     }
-    return 'single-icon';
+    return "single-icon";
   }, [hasValue, placeholder]);
-  var triggerLabel = useMemo(function () {
-    var _getPeriods$find;
-    return hasValue ? texts.completedLabel + " " + value.value + " " + ((_getPeriods$find = getPeriods.find(function (singlePeriod) {
-      return singlePeriod.value === value.period;
-    })) == null ? void 0 : _getPeriods$find.label) : placeholder;
+  const triggerLabel = useMemo(() => {
+    return hasValue ? `${texts.completedLabel} ${value.value} ${getPeriods.find((singlePeriod) => singlePeriod.value === value.period)?.label}` : placeholder;
   }, [getPeriods, hasValue, texts, value, placeholder]);
-  var trigger = /*#__PURE__*/React.createElement(Tooltip, {
-    type: "largeSimple",
-    description: tooltip,
-    trigger: ['hover'],
-    onOpenChange: setTooltipOpen,
-    open: !settingsOpen && tooltipOpen
-  }, /*#__PURE__*/React.createElement(S.TriggerButton, {
-    "data-testid": "completed-within-trigger",
-    readOnly: readOnly,
-    className: "ds-completed-within",
-    type: "tertiary",
-    mode: triggerMode
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(ClockM, null)
-  }), triggerLabel));
-  return /*#__PURE__*/React.createElement(S.CompletedWithinWrapper, {
-    readOnly: readOnly,
-    withValue: hasValue
-  }, readOnly ? trigger : /*#__PURE__*/React.createElement(Dropdown, {
-    overlay: /*#__PURE__*/React.createElement(Settings, {
-      value: {
-        value: innerValue !== undefined ? Number(innerValue) : undefined,
-        period: innerPeriod
-      },
-      maxValue: maxValue,
-      onValueChange: setInnerValue,
-      onPeriodChange: setInnerPeriod,
-      text: texts,
-      readOnly: readOnly,
-      periods: getPeriods
-    }),
-    trigger: ['click'],
-    open: settingsOpen,
-    onOpenChange: handleOpenChange,
-    placement: "topLeft",
-    size: 238,
-    popoverProps: {
-      testId: 'completed-within'
-    }
-  }, trigger), hasValue && !readOnly && /*#__PURE__*/React.createElement(Tooltip, {
-    title: texts.clear
-  }, /*#__PURE__*/React.createElement(S.ClearButton, {
-    mode: "single-icon",
-    type: "ghost",
-    onClick: handleClear,
-    "data-testid": "clear-button"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Close3S, null)
-  }))));
+  const trigger = /* @__PURE__ */ jsx(Tooltip, { type: "largeSimple", description: tooltip, trigger: ["hover"], onOpenChange: setTooltipOpen, open: !settingsOpen && tooltipOpen, children: /* @__PURE__ */ jsxs(TriggerButton, { "data-testid": "completed-within-trigger", readOnly, className: "ds-completed-within", type: "tertiary", mode: triggerMode, children: [
+    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ClockM, {}) }),
+    triggerLabel
+  ] }) });
+  return /* @__PURE__ */ jsxs(CompletedWithinWrapper, { readOnly, withValue: hasValue, children: [
+    readOnly ? trigger : /* @__PURE__ */ jsx(Dropdown, { overlay: /* @__PURE__ */ jsx(Settings, { value: {
+      value: innerValue !== void 0 ? Number(innerValue) : void 0,
+      period: innerPeriod
+    }, maxValue, onValueChange: setInnerValue, onPeriodChange: setInnerPeriod, text: texts, readOnly, periods: getPeriods }), trigger: ["click"], open: settingsOpen, onOpenChange: handleOpenChange, placement: "topLeft", size: 238, popoverProps: {
+      testId: "completed-within"
+    }, children: trigger }),
+    hasValue && !readOnly && /* @__PURE__ */ jsx(Tooltip, { title: texts.clear, children: /* @__PURE__ */ jsx(ClearButton, { mode: "single-icon", type: "ghost", onClick: handleClear, "data-testid": "clear-button", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3S, {}) }) }) })
+  ] });
+};
+export {
+  DEFAULT_PERIODS,
+  CompletedWithin as default
 };
-export default CompletedWithin;

package/dist/CompletedWithin.types.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import type { LiteralStringUnion } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { LiteralStringUnion } from '@synerise/ds-utils';
 export type CompletedWithinTexts = {
     clear: ReactNode;
     header: ReactNode;

package/dist/CompletedWithin.types.js

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

package/dist/Settings/Settings.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type SettingsProps } from './Settings.types';
+import { default as React } from 'react';
+import { SettingsProps } from './Settings.types';
 declare const Settings: ({ value, text, onPeriodChange, onValueChange, periods, maxValue, readOnly, }: SettingsProps) => React.JSX.Element;
 export default Settings;

package/dist/Settings/Settings.js

@@ -1,48 +1,36 @@
-import React from 'react';
-import { InputGroup } from '@synerise/ds-input';
-import InputNumber from '@synerise/ds-input-number';
-import Select from '@synerise/ds-select';
-import * as S from './Settings.styles';
-var Settings = function Settings(_ref) {
-  var value = _ref.value,
-    text = _ref.text,
-    onPeriodChange = _ref.onPeriodChange,
-    onValueChange = _ref.onValueChange,
-    periods = _ref.periods,
-    maxValue = _ref.maxValue,
-    readOnly = _ref.readOnly;
-  return /*#__PURE__*/React.createElement(S.Settings, {
-    "data-testid": "completed-within-dropdown"
-  }, /*#__PURE__*/React.createElement(InputGroup, {
-    size: "default",
-    label: text.header,
-    resetMargin: true,
-    compact: true
-  }, /*#__PURE__*/React.createElement(InputNumber, {
-    size: "small",
-    raw: true,
-    readOnly: readOnly,
-    value: value.value,
-    onChange: onValueChange,
-    min: 0,
-    max: maxValue != null ? maxValue : Number.MAX_SAFE_INTEGER
-  }), /*#__PURE__*/React.createElement(Select
-  // readOnly={readOnly} - STOR-1872: add readOnly prop to select
-  , {
-    size: 'default',
-    value: value.period,
-    placeholder: text.periodPlaceholder,
-    onChange: function onChange(option) {
-      onPeriodChange(option);
-    },
-    dropdownStyle: {
-      minWidth: '150px'
-    }
-  }, periods.map(function (period) {
-    return /*#__PURE__*/React.createElement(Select.Option, {
-      key: period.value,
-      value: period.value
-    }, period.label);
-  }))));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InputGroup } from "@synerise/ds-input";
+import InputNumber from "@synerise/ds-input-number";
+import Select from "@synerise/ds-select";
+import { Settings as Settings$1 } from "./Settings.styles.js";
+const Settings = ({
+  value,
+  text,
+  onPeriodChange,
+  onValueChange,
+  periods,
+  maxValue,
+  readOnly
+}) => {
+  return /* @__PURE__ */ jsx(Settings$1, { "data-testid": "completed-within-dropdown", children: /* @__PURE__ */ jsxs(InputGroup, { size: "default", label: text.header, resetMargin: true, compact: true, children: [
+    /* @__PURE__ */ jsx(InputNumber, { size: "small", raw: true, readOnly, value: value.value, onChange: onValueChange, min: 0, max: maxValue ?? Number.MAX_SAFE_INTEGER }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        size: "default",
+        value: value.period,
+        placeholder: text.periodPlaceholder,
+        onChange: (option) => {
+          onPeriodChange(option);
+        },
+        dropdownStyle: {
+          minWidth: "150px"
+        },
+        children: periods.map((period) => /* @__PURE__ */ jsx(Select.Option, { value: period.value, children: period.label }, period.value))
+      }
+    )
+  ] }) });
+};
+export {
+  Settings as default
 };
-export default Settings;

package/dist/Settings/Settings.styles.d.ts

@@ -1 +1 @@
-export declare const Settings: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Settings: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Settings/Settings.styles.js

@@ -1,8 +1,9 @@
-import styled from 'styled-components';
-import { InputGroupWrapper } from '@synerise/ds-input/dist/InputGroup.styles';
-export var Settings = styled.div.withConfig({
+import styled from "styled-components";
+import { InputGroupWrapper } from "@synerise/ds-input/dist/InputGroup.styles";
+const Settings = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Settingsstyles__Settings",
   componentId: "sc-11xtzjt-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:20px;background-color:", ";max-width:238px;.ant-select-selection-item,.ant-select-selection-placeholder{font-weight:500;}", "{width:100%;}"], function (props) {
-  return props.theme.palette.white;
-}, InputGroupWrapper);
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:20px;background-color:", ";max-width:238px;.ant-select-selection-item,.ant-select-selection-placeholder{font-weight:500;}", "{width:100%;}"], (props) => props.theme.palette.white, InputGroupWrapper);
+export {
+  Settings
+};

package/dist/Settings/Settings.types.d.ts

@@ -1,5 +1,5 @@
-import type InputNumber from '@synerise/ds-input-number';
-import { type CompletedWithinProps, type CompletedWithinTexts, type CustomPeriod, type Period, type PeriodValue } from '../CompletedWithin.types';
+import { default as InputNumber } from '@synerise/ds-input-number';
+import { CompletedWithinProps, CompletedWithinTexts, CustomPeriod, Period, PeriodValue } from '../CompletedWithin.types';
 type InputProps = React.ComponentProps<typeof InputNumber>;
 export type SettingsProps = Omit<CompletedWithinProps, 'onClear' | 'onSetValue' | 'periods' | 'text'> & {
     onValueChange: InputProps['onChange'];

package/dist/Settings/Settings.types.js

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

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './CompletedWithin';
+import { default as default2 } from "./CompletedWithin.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-completed-within",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "CompletedWithin 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,14 +35,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.17",
-    "@synerise/ds-dropdown": "^1.3.1",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-input": "^1.6.9",
-    "@synerise/ds-input-number": "^1.2.34",
-    "@synerise/ds-select": "^1.3.19",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-dropdown": "^1.3.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-input": "^1.6.10",
+    "@synerise/ds-input-number": "^1.2.35",
+    "@synerise/ds-select": "^1.3.20",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "devDependencies": {
     "vitest": "4"
@@ -54,5 +54,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }