@activecollab/components 2.0.270 → 2.0.272
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Steppers/DateStepper/DateStepper.js +36 -10
- package/dist/cjs/components/Steppers/DateStepper/DateStepper.js.map +1 -1
- package/dist/cjs/components/Steppers/DateStepper/Styles.js +3 -1
- package/dist/cjs/components/Steppers/DateStepper/Styles.js.map +1 -1
- package/dist/esm/components/Steppers/DateStepper/DateStepper.d.ts +2 -0
- package/dist/esm/components/Steppers/DateStepper/DateStepper.d.ts.map +1 -1
- package/dist/esm/components/Steppers/DateStepper/DateStepper.js +35 -10
- package/dist/esm/components/Steppers/DateStepper/DateStepper.js.map +1 -1
- package/dist/esm/components/Steppers/DateStepper/Styles.d.ts +3 -1
- package/dist/esm/components/Steppers/DateStepper/Styles.d.ts.map +1 -1
- package/dist/esm/components/Steppers/DateStepper/Styles.js +1 -1
- package/dist/esm/components/Steppers/DateStepper/Styles.js.map +1 -1
- package/dist/index.js +39 -11
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","ButtonGroup","FontStyle","IconButton","Menu","StyledButton","button","withConfig","displayName","componentId","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","ButtonGroup","FontStyle","IconButton","Menu","StyledButton","button","withConfig","displayName","componentId","props","$step","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","$isTargetable","$isRounded","$mode","$alwaysShowDate","StyledControl"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { IconButton } from \"../../IconButton\";\nimport { Menu } from \"../../Menu\";\n\nexport const StyledButton = styled.button<{ $step: string }>`\n ${FontStyle}\n ${BoxSizingStyle}\n ${(props) =>\n props.$step === \"range\" &&\n css`\n padding: 0 12px !important;\n `}\n\n ${tw`\n tw-relative\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n tw-text-center\n `}\n\n color: var(--color-theme-700);\n margin: 0;\n padding: 0;\n background: none;\n width: 100%;\n height: auto;\n border: none;\n height: 30px;\n line-height: 1;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n`;\n\nexport const StyledMenu = styled(Menu)`\n ${tw`\n tw-w-auto\n tw-h-auto\n tw-py-4\n tw-px-2\n `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n ${FontStyle}\n ${BoxSizingStyle}\n\n button:hover {\n position: relative;\n z-index: 1;\n }\n`;\n\nexport const StyledSpan = styled.span`\n line-height: 30px;\n color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n $isTargetable: boolean;\n $isRounded: boolean;\n $mode: string;\n $alwaysShowDate: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n ${(props) =>\n props.$isTargetable &&\n css`\n ${tw`tw-pointer-events-none`}\n `}\n\n ${(props) =>\n props.$isRounded &&\n css`\n border-radius: var(--ac-br-8);\n padding: 0 12px !important;\n `}\n\n ${(props) =>\n props.$mode !== \"flat\"\n ? tw`\n tw-border\n tw-border-solid\n `\n : tw`tw-border-0`}\n\n ${tw`\n tw-relative\n tw-text-center\n tw-p-0\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\n tw-leading-none\n tw-m-0\n tw-no-underline\n tw-text-sm\n tw-select-none\n tw-cursor-pointer\n `}\n\n height: 32px;\n transition: all 0.3s ease;\n background-color: transparent;\n ${(props) =>\n props.$mode !== \"flat\" &&\n css`\n border: 1px solid var(--color-theme-700);\n `}\n\n color: var(--color-theme-700);\n margin-right: -1px;\n display: block;\n\n ${(props) =>\n !props.$alwaysShowDate &&\n css`\n @media (max-width: 768px) {\n display: none;\n }\n `}\n svg {\n fill: currentColor;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n &:hover {\n ${(props) =>\n props.$mode !== \"flat\" &&\n css`\n border-color: var(--color-primary);\n `}\n color: var(--color-primary);\n text-decoration: none;\n }\n\n &:active {\n ${(props) =>\n props.$mode !== \"flat\" &&\n css`\n border-color: var(--color-primary);\n background-color: var(--color-primary-200);\n `}\n color: var(--color-primary);\n }\n`;\n\nexport const StyledControl = styled(IconButton)`\n border-radius: var(--ac-br-8);\n`;\n\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\nStyledControl.displayName = \"StyledControl\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAO,MAAMC,YAAY,GAAGP,MAAM,CAACQ,MAAM,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uVACrCP,SAAS,EACTF,cAAc,EACbU,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBZ,GAAG,gCAEF,EAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAED,OAAO,MAAMa,UAAU,GAAGd,MAAM,CAACM,IAAI,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAED,OAAO,MAAMI,iBAAiB,GAAGf,MAAM,CAACG,WAAW,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6DAChDP,SAAS,EACTF,cAAc,CAMjB;AAED,OAAO,MAAMc,UAAU,GAAGhB,MAAM,CAACiB,IAAI,CAAAR,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,sDAGpC;AASD,OAAO,MAAMO,SAAS,GAAGlB,MAAM,CAACmB,GAAG,CAAAV,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oZAC9BC,KAAK,IACNA,KAAK,CAACQ,aAAa,IACnBnB,GAAG,WACG;EAAA;AAAuB,CAAC,CAC7B,EAEAW,KAAK,IACNA,KAAK,CAACS,UAAU,IAChBpB,GAAG,6DAGF,EAEEW,KAAK,IACRA,KAAK,CAACU,KAAK,KAAK,MAAM,GAChB;EAAA;EAAA;AAGA,CAAC,GACD;EAAA;AAAY,CAAC,EAEjB;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAcJ,CAAC,EAKEV,KAAK,IACNA,KAAK,CAACU,KAAK,KAAK,MAAM,IACtBrB,GAAG,8CAEF,EAMAW,KAAK,IACN,CAACA,KAAK,CAACW,eAAe,IACtBtB,GAAG,6CAIF,EAoBEW,KAAK,IACNA,KAAK,CAACU,KAAK,KAAK,MAAM,IACtBrB,GAAG,wCAEF,EAMAW,KAAK,IACNA,KAAK,CAACU,KAAK,KAAK,MAAM,IACtBrB,GAAG,kFAGF,CAGN;AAED,OAAO,MAAMuB,aAAa,GAAGxB,MAAM,CAACK,UAAU,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,qCAE9C;AAEDI,iBAAiB,CAACL,WAAW,GAAG,mBAAmB;AACnDM,UAAU,CAACN,WAAW,GAAG,YAAY;AACrCQ,SAAS,CAACR,WAAW,GAAG,WAAW;AACnCI,UAAU,CAACJ,WAAW,GAAG,YAAY;AACrCH,YAAY,CAACG,WAAW,GAAG,cAAc;AACzCc,aAAa,CAACd,WAAW,GAAG,eAAe","ignoreList":[]}
|
package/dist/index.js
CHANGED
|
@@ -12661,7 +12661,9 @@
|
|
|
12661
12661
|
var StyledButton$1 = styled__default["default"].button.withConfig({
|
|
12662
12662
|
displayName: "Styles__StyledButton",
|
|
12663
12663
|
componentId: "sc-1v8h7mt-0"
|
|
12664
|
-
})(["", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
|
|
12664
|
+
})(["", " ", " ", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;line-height:1;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, function (props) {
|
|
12665
|
+
return props.$step === "range" && styled.css(["padding:0 12px !important;"]);
|
|
12666
|
+
}, {
|
|
12665
12667
|
"position": "relative",
|
|
12666
12668
|
"margin": "0px",
|
|
12667
12669
|
"display": "inline-block",
|
|
@@ -14253,7 +14255,9 @@
|
|
|
14253
14255
|
_ref$mode = _ref.mode,
|
|
14254
14256
|
mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
|
|
14255
14257
|
_ref$alwaysShowDate = _ref.alwaysShowDate,
|
|
14256
|
-
alwaysShowDate = _ref$alwaysShowDate === void 0 ? false : _ref$alwaysShowDate
|
|
14258
|
+
alwaysShowDate = _ref$alwaysShowDate === void 0 ? false : _ref$alwaysShowDate,
|
|
14259
|
+
_ref$disableArrows = _ref.disableArrows,
|
|
14260
|
+
disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows;
|
|
14257
14261
|
var _useState = React.useState(moment__default["default"].utc(from)),
|
|
14258
14262
|
_useState2 = _slicedToArray(_useState, 2),
|
|
14259
14263
|
fromDate = _useState2[0],
|
|
@@ -14279,9 +14283,21 @@
|
|
|
14279
14283
|
} else if (step === "yearly") {
|
|
14280
14284
|
date.add(interval, "years");
|
|
14281
14285
|
return [date.clone().startOf("year"), date.clone().endOf("year")];
|
|
14286
|
+
} else if (step === "range") {
|
|
14287
|
+
// For range step, calculate N days based on current selection
|
|
14288
|
+
// Handle case where toDate is invalid or at epoch (1970)
|
|
14289
|
+
var isToDateInvalid = !toDate.isValid() || toDate.year() === 1970;
|
|
14290
|
+
var effectiveToDate = isToDateInvalid ? fromDate : toDate;
|
|
14291
|
+
var daysDiff = effectiveToDate.diff(fromDate, "days");
|
|
14292
|
+
|
|
14293
|
+
// If same day selected (daysDiff = 0), move by 1 day
|
|
14294
|
+
var daysToMove = daysDiff === 0 ? 1 : daysDiff + 1;
|
|
14295
|
+
var newFromDate = fromDate.clone().add(interval * daysToMove, "days");
|
|
14296
|
+
var newToDate = daysDiff === 0 ? newFromDate.clone() : effectiveToDate.clone().add(interval * daysToMove, "days");
|
|
14297
|
+
return [newFromDate, newToDate];
|
|
14282
14298
|
}
|
|
14283
14299
|
return [date, date];
|
|
14284
|
-
}, [fromDate, period, step]);
|
|
14300
|
+
}, [fromDate, toDate, period, step]);
|
|
14285
14301
|
var getDateFormatted = React.useMemo(function () {
|
|
14286
14302
|
if (formatCallback) {
|
|
14287
14303
|
return formatCallback(fromDate, toDate);
|
|
@@ -14310,6 +14326,20 @@
|
|
|
14310
14326
|
} else if (step === "yearly") {
|
|
14311
14327
|
return fromDate.utc().format("YYYY");
|
|
14312
14328
|
} else if (step === "range") {
|
|
14329
|
+
// For range step, if toDate is invalid or at epoch (1970), only show fromDate
|
|
14330
|
+
if (!toDate.isValid() || toDate.year() === 1970) {
|
|
14331
|
+
if (fromDate.year() === actualYear) {
|
|
14332
|
+
return fromDate.utc().format("MMM DD");
|
|
14333
|
+
}
|
|
14334
|
+
return fromDate.utc().format("MMM DD YYYY");
|
|
14335
|
+
}
|
|
14336
|
+
// If from and to are the same date, show only once
|
|
14337
|
+
if (fromDate.format("YYYY-MM-DD") === toDate.format("YYYY-MM-DD")) {
|
|
14338
|
+
if (fromDate.year() === actualYear) {
|
|
14339
|
+
return fromDate.utc().format("MMM DD");
|
|
14340
|
+
}
|
|
14341
|
+
return fromDate.utc().format("MMM DD YYYY");
|
|
14342
|
+
}
|
|
14313
14343
|
return showWeekOrCustomDateFormat(fromDate, toDate);
|
|
14314
14344
|
}
|
|
14315
14345
|
return "";
|
|
@@ -14359,7 +14389,7 @@
|
|
|
14359
14389
|
setFromDate(moment__default["default"].utc(newFrom));
|
|
14360
14390
|
setToDate(moment__default["default"].utc(newTo));
|
|
14361
14391
|
if (onChange) {
|
|
14362
|
-
onChange(moment__default["default"].utc(newFrom), moment__default["default"].utc(newTo));
|
|
14392
|
+
onChange(moment__default["default"].utc(newFrom).toDate(), moment__default["default"].utc(newTo).toDate());
|
|
14363
14393
|
}
|
|
14364
14394
|
if (onForward) {
|
|
14365
14395
|
onForward(moment__default["default"].utc(newFrom).toDate(), moment__default["default"].utc(newTo).toDate());
|
|
@@ -14376,15 +14406,12 @@
|
|
|
14376
14406
|
setFromDate(moment__default["default"].utc(newFrom));
|
|
14377
14407
|
setToDate(moment__default["default"].utc(newTo));
|
|
14378
14408
|
if (onChange) {
|
|
14379
|
-
onChange(moment__default["default"].utc(newFrom), moment__default["default"].utc(newTo));
|
|
14409
|
+
onChange(moment__default["default"].utc(newFrom).toDate(), moment__default["default"].utc(newTo).toDate());
|
|
14380
14410
|
}
|
|
14381
14411
|
if (onBack) {
|
|
14382
14412
|
onBack(moment__default["default"].utc(newFrom).toDate(), moment__default["default"].utc(newTo).toDate());
|
|
14383
14413
|
}
|
|
14384
14414
|
}, [isBeforeMinDate, getDatesByPeriod, onChange, onBack]);
|
|
14385
|
-
var renderLeftRightButtons = React.useMemo(function () {
|
|
14386
|
-
return step !== "range";
|
|
14387
|
-
}, [step]);
|
|
14388
14415
|
React.useEffect(function () {
|
|
14389
14416
|
setFromDate(moment__default["default"].utc(from));
|
|
14390
14417
|
setToDate(moment__default["default"].utc(to));
|
|
@@ -14443,20 +14470,21 @@
|
|
|
14443
14470
|
}, [isDisabled]);
|
|
14444
14471
|
return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup, {
|
|
14445
14472
|
className: classNames__default["default"]("c-date-stepper", className)
|
|
14446
|
-
},
|
|
14473
|
+
}, !disableArrows ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
|
|
14447
14474
|
type: "button",
|
|
14448
14475
|
variant: mode === "flat" ? "text gray" : "secondary",
|
|
14449
14476
|
onClick: onLeftClickHandler,
|
|
14450
14477
|
disabled: isBeforeMinDate
|
|
14451
14478
|
}, /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon$1, null)) : null, /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
|
|
14452
14479
|
$isTargetable: step === "yearly" || !withDatePicker,
|
|
14453
|
-
$isRounded:
|
|
14480
|
+
$isRounded: disableArrows,
|
|
14454
14481
|
$mode: mode,
|
|
14455
14482
|
$alwaysShowDate: alwaysShowDate,
|
|
14456
14483
|
style: dateStepperWidth(fromDate, toDate, step)
|
|
14457
14484
|
}, withDatePicker && step !== "yearly" ? /*#__PURE__*/React__default["default"].createElement(DatePicker, {
|
|
14458
14485
|
month: defaultMonth,
|
|
14459
14486
|
target: /*#__PURE__*/React__default["default"].createElement(StyledButton$1, {
|
|
14487
|
+
$step: step,
|
|
14460
14488
|
type: "button"
|
|
14461
14489
|
}, getDateFormatted),
|
|
14462
14490
|
mode: datePickerMode,
|
|
@@ -14475,7 +14503,7 @@
|
|
|
14475
14503
|
key: datePickerMode,
|
|
14476
14504
|
instant: true,
|
|
14477
14505
|
required: true
|
|
14478
|
-
}) : /*#__PURE__*/React__default["default"].createElement(StyledSpan$1, null, getDateFormatted)),
|
|
14506
|
+
}) : /*#__PURE__*/React__default["default"].createElement(StyledSpan$1, null, getDateFormatted)), !disableArrows ? /*#__PURE__*/React__default["default"].createElement(StyledControl, {
|
|
14479
14507
|
type: "button",
|
|
14480
14508
|
variant: mode === "flat" ? "text gray" : "secondary",
|
|
14481
14509
|
onClick: onRightClickHandler,
|