@activecollab/components 1.0.130 → 1.0.133

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,eAAO,MAAM,mBAAmB;;;SA2D/B,CAAC;AAIF,eAAO,MAAM,eAAe,wqPAI3B,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,eAAO,MAAM,mBAAmB;;;SA4D/B,CAAC;AAIF,eAAO,MAAM,eAAe,wqPAI3B,CAAC"}
@@ -4,7 +4,7 @@ import { Trigger } from "../Trigger";
4
4
  export var StyledSelectTrigger = styled(Trigger).withConfig({
5
5
  displayName: "Styles__StyledSelectTrigger",
6
6
  componentId: "sc-9799p2-0"
7
- })(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 8px;width:300px;transition:border-color 0.3s ease;", " ", " ", " ", " ", " ", ";"], function (_ref) {
7
+ })(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 8px;width:300px;transition:border-color 0.3s ease;background-color:var(--input-background-color);", " ", " ", " ", " ", " ", ";"], function (_ref) {
8
8
  var disabled = _ref.disabled;
9
9
  return disabled && css(["opacity:50%;cursor:default;"]);
10
10
  }, function (_ref2) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","disabled","$invalid","$size","displayName","StyledCaretIcon"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,wBAAT,QAAyC,UAAzC;AACA,SAASC,OAAT,QAAwB,YAAxB;AAGA,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAD,CAAT;AAAA;AAAA;AAAA,yMAY5B;AAAA,MAAGE,QAAH,QAAGA,QAAH;AAAA,SACAA,QAAQ,IACRJ,GADQ,iCADR;AAAA,CAZ4B,EAmB5B;AAAA,MAAGK,QAAH,SAAGA,QAAH;AAAA,MAAaD,QAAb,SAAaA,QAAb;AAAA,SACA,CAACC,QAAD,IACA,CAACD,QADD,IAEAJ,GAFA,6DADA;AAAA,CAnB4B,EA6B5B;AAAA,MAAGK,QAAH,SAAGA,QAAH;AAAA,SACAA,QAAQ,IACRL,GADQ,yBAEF;AAAA;AAAA,GAFE,EAKA;AAAA;AAAA,GALA,CADR;AAAA,CA7B4B,EAuC5B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,OAAV,IACAN,GADA,+CADA;AAAA,CAvC4B,EA8C5B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,SAAV,IACAN,GADA,+CADA;AAAA,CA9C4B,EAqD1B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACFA,KAAK,KAAK,KAAV,IACAN,GADA,+CADE;AAAA,CArD0B,CAAzB;AA6DPG,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMC,eAAe,GAAGT,MAAM,CAACE,wBAAD,CAAT;AAAA;AAAA;AAAA,+DAArB;AAMPO,eAAe,CAACD,WAAhB,GAA8B,iBAA9B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { Size } from \"./SelectTrigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n $size?: Size;\n $invalid?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: 1px solid var(--color-theme-500);\n padding: 0 8px;\n width: 300px;\n transition: border-color 0.3s ease;\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 50%;\n cursor: default;\n `}\n\n ${({ $invalid, disabled }) =>\n !$invalid &&\n !disabled &&\n css`\n &:hover,\n &:focus {\n border-color: var(--color-primary-700);\n }\n `}\n\n ${({ $invalid }) =>\n $invalid &&\n css`\n ${tw`tw-border-alert`}\n\n &:hover {\n ${tw`tw-border-alert`}\n }\n `}\n\n ${({ $size }) =>\n $size === \"small\" &&\n css`\n height: 24px;\n border-radius: var(--ac-br-6);\n `}\n\n ${({ $size }) =>\n $size === \"regular\" &&\n css`\n height: 32px;\n border-radius: var(--ac-br-8);\n `}\n\n ${({ $size }) =>\n $size === \"big\" &&\n css`\n height: 40px;\n border-radius: var(--ac-br-8);\n `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)`\n transform: rotate(180deg);\n margin-left: 8px;\n flex-shrink: 0;\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/SelectTrigger/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","Trigger","StyledSelectTrigger","disabled","$invalid","$size","displayName","StyledCaretIcon"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,wBAAT,QAAyC,UAAzC;AACA,SAASC,OAAT,QAAwB,YAAxB;AAGA,OAAO,IAAMC,mBAAmB,GAAGJ,MAAM,CAACG,OAAD,CAAT;AAAA;AAAA;AAAA,wPAa5B;AAAA,MAAGE,QAAH,QAAGA,QAAH;AAAA,SACAA,QAAQ,IACRJ,GADQ,iCADR;AAAA,CAb4B,EAoB5B;AAAA,MAAGK,QAAH,SAAGA,QAAH;AAAA,MAAaD,QAAb,SAAaA,QAAb;AAAA,SACA,CAACC,QAAD,IACA,CAACD,QADD,IAEAJ,GAFA,6DADA;AAAA,CApB4B,EA8B5B;AAAA,MAAGK,QAAH,SAAGA,QAAH;AAAA,SACAA,QAAQ,IACRL,GADQ,yBAEF;AAAA;AAAA,GAFE,EAKA;AAAA;AAAA,GALA,CADR;AAAA,CA9B4B,EAwC5B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,OAAV,IACAN,GADA,+CADA;AAAA,CAxC4B,EA+C5B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACAA,KAAK,KAAK,SAAV,IACAN,GADA,+CADA;AAAA,CA/C4B,EAsD1B;AAAA,MAAGM,KAAH,SAAGA,KAAH;AAAA,SACFA,KAAK,KAAK,KAAV,IACAN,GADA,+CADE;AAAA,CAtD0B,CAAzB;AA8DPG,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMC,eAAe,GAAGT,MAAM,CAACE,wBAAD,CAAT;AAAA;AAAA;AAAA,+DAArB;AAMPO,eAAe,CAACD,WAAhB,GAA8B,iBAA9B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CollapseExpandSingleIcon } from \"../Icons\";\nimport { Trigger } from \"../Trigger\";\nimport { Size } from \"./SelectTrigger\";\n\nexport const StyledSelectTrigger = styled(Trigger)<{\n $size?: Size;\n $invalid?: boolean;\n}>`\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: 1px solid var(--color-theme-500);\n padding: 0 8px;\n width: 300px;\n transition: border-color 0.3s ease;\n background-color: var(--input-background-color);\n\n ${({ disabled }) =>\n disabled &&\n css`\n opacity: 50%;\n cursor: default;\n `}\n\n ${({ $invalid, disabled }) =>\n !$invalid &&\n !disabled &&\n css`\n &:hover,\n &:focus {\n border-color: var(--color-primary-700);\n }\n `}\n\n ${({ $invalid }) =>\n $invalid &&\n css`\n ${tw`tw-border-alert`}\n\n &:hover {\n ${tw`tw-border-alert`}\n }\n `}\n\n ${({ $size }) =>\n $size === \"small\" &&\n css`\n height: 24px;\n border-radius: var(--ac-br-6);\n `}\n\n ${({ $size }) =>\n $size === \"regular\" &&\n css`\n height: 32px;\n border-radius: var(--ac-br-8);\n `}\n\n ${({ $size }) =>\n $size === \"big\" &&\n css`\n height: 40px;\n border-radius: var(--ac-br-8);\n `};\n`;\n\nStyledSelectTrigger.displayName = \"StyledSelectTrigger\";\n\nexport const StyledCaretIcon = styled(CollapseExpandSingleIcon)`\n transform: rotate(180deg);\n margin-left: 8px;\n flex-shrink: 0;\n`;\n\nStyledCaretIcon.displayName = \"StyledCaretIcon\";\n"],"file":"Styles.js"}
package/dist/index.js CHANGED
@@ -9816,23 +9816,34 @@
9816
9816
  renderDay: renderDay
9817
9817
  });
9818
9818
  }, [handleMonthChange, month, mode, selectionMode, dateRequired, newDates, firstDayOfWeek, saveButtonText, cancelButtonText, clearButtonText, onDayClick, handleSave, handleChange, handleCancel, handleClear, disabledSaveButton, modifiers, renderDay]);
9819
- return /*#__PURE__*/React__default["default"].createElement(StyledSelectDate, {
9820
- className: "select-date"
9821
- }, labelType !== "inline" ? /*#__PURE__*/React__default["default"].createElement(Menu, {
9822
- target: labelType === "icon" && icon ? /*#__PURE__*/React__default["default"].createElement(SelectDateTarget, {
9823
- icon: icon,
9824
- title: tooltipText,
9825
- targetIconClassName: targetIconClassName,
9826
- forceHideTooltip: showDatePicker,
9827
- popperTooltipClassName: popperTooltipClassName,
9828
- popperTooltipStyle: popperTooltipStyle,
9829
- active: showDatePicker
9830
- }) : /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButton, {
9819
+ var renderTargetEl = React.useMemo(function () {
9820
+ if (labelType === "icon" && icon) {
9821
+ return /*#__PURE__*/React__default["default"].createElement(SelectDateTarget, {
9822
+ icon: icon,
9823
+ title: tooltipText,
9824
+ targetIconClassName: targetIconClassName,
9825
+ forceHideTooltip: showDatePicker,
9826
+ popperTooltipClassName: popperTooltipClassName,
9827
+ popperTooltipStyle: popperTooltipStyle,
9828
+ active: showDatePicker
9829
+ });
9830
+ }
9831
+
9832
+ if (typeof labelType === "function") {
9833
+ return labelType(labelText);
9834
+ }
9835
+
9836
+ return /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButton, {
9831
9837
  type: "button",
9832
9838
  className: classnames__default["default"]("date-picker-target", targetClassName)
9833
9839
  }, /*#__PURE__*/React__default["default"].createElement("span", {
9834
9840
  className: targetTextClassName
9835
- }, labelText)),
9841
+ }, labelText));
9842
+ }, [icon, labelText, labelType, popperTooltipClassName, popperTooltipStyle, showDatePicker, targetClassName, targetIconClassName, targetTextClassName, tooltipText]);
9843
+ return /*#__PURE__*/React__default["default"].createElement(StyledSelectDate, {
9844
+ className: "select-date"
9845
+ }, labelType !== "inline" ? /*#__PURE__*/React__default["default"].createElement(Menu, {
9846
+ target: renderTargetEl,
9836
9847
  open: showDatePicker,
9837
9848
  onOpen: handleShowDatePicker,
9838
9849
  onBeforeClose: handleBeforeCloseMenu,
@@ -10256,7 +10267,7 @@
10256
10267
  var StyledSelectTrigger = styled__default["default"](Trigger).withConfig({
10257
10268
  displayName: "Styles__StyledSelectTrigger",
10258
10269
  componentId: "sc-9799p2-0"
10259
- })(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 8px;width:300px;transition:border-color 0.3s ease;", " ", " ", " ", " ", " ", ";"], function (_ref) {
10270
+ })(["display:flex;align-items:center;justify-content:space-between;border:1px solid var(--color-theme-500);padding:0 8px;width:300px;transition:border-color 0.3s ease;background-color:var(--input-background-color);", " ", " ", " ", " ", " ", ";"], function (_ref) {
10260
10271
  var disabled = _ref.disabled;
10261
10272
  return disabled && styled.css(["opacity:50%;cursor:default;"]);
10262
10273
  }, function (_ref2) {
@@ -11044,7 +11055,7 @@
11044
11055
  return width;
11045
11056
  }, [progress]);
11046
11057
  var normalizedRadius = React.useMemo(function () {
11047
- return radius - stroke;
11058
+ return radius - stroke / 2;
11048
11059
  }, [radius, stroke]);
11049
11060
  var circumference = React.useMemo(function () {
11050
11061
  return normalizedRadius * 2 * Math.PI;