sag_components 2.0.0-beta278 → 2.0.0-beta279

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/index.js CHANGED
@@ -36120,19 +36120,15 @@ const ToggleInput = styled__default["default"].input`
36120
36120
  const ToggleSlider = styled__default["default"].span`
36121
36121
  display: block;
36122
36122
  position: relative;
36123
- background: ${_ref => {
36124
- let {
36125
- checked,
36126
- disabled
36127
- } = _ref;
36128
- return checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0";
36129
- }};
36123
+ background: ${({
36124
+ checked,
36125
+ disabled
36126
+ }) => checked ? "#006d6a" : disabled ? "#B1B1B1" : "#D0D0D0"};
36130
36127
  border-radius: 999px;
36131
36128
  transition: background 0.2s;
36132
- ${_ref2 => {
36133
- let {
36134
- size
36135
- } = _ref2;
36129
+ ${({
36130
+ size
36131
+ }) => {
36136
36132
  switch (size) {
36137
36133
  case "s":
36138
36134
  return styled.css`width: 40px; height: 20px;`;
@@ -36148,18 +36144,14 @@ const ToggleSlider = styled__default["default"].span`
36148
36144
  left: 3px;
36149
36145
  top: 50%;
36150
36146
  transform: translateY(-50%);
36151
- background: ${_ref3 => {
36152
- let {
36153
- disabled
36154
- } = _ref3;
36155
- return disabled ? "#D0D0D0" : "#fff";
36156
- }};
36147
+ background: ${({
36148
+ disabled
36149
+ }) => disabled ? "#D0D0D0" : "#fff"};
36157
36150
  border-radius: 50%;
36158
36151
  transition: left 0.2s, width 0.2s, height 0.2s;
36159
- ${_ref4 => {
36160
- let {
36161
- size
36162
- } = _ref4;
36152
+ ${({
36153
+ size
36154
+ }) => {
36163
36155
  switch (size) {
36164
36156
  case "s":
36165
36157
  return styled.css`width: 14px; height: 14px;`;
@@ -36169,11 +36161,10 @@ const ToggleSlider = styled__default["default"].span`
36169
36161
  return styled.css`width: 20px; height: 20px;`;
36170
36162
  }
36171
36163
  }}
36172
- left: ${_ref5 => {
36173
- let {
36174
- checked,
36175
- size
36176
- } = _ref5;
36164
+ left: ${({
36165
+ checked,
36166
+ size
36167
+ }) => {
36177
36168
  if (!checked) return "3px";
36178
36169
  switch (size) {
36179
36170
  case "s":
@@ -36187,9 +36178,9 @@ const ToggleSlider = styled__default["default"].span`
36187
36178
  }
36188
36179
  `;
36189
36180
 
36190
- /**
36191
- * ToggleSwitch component for on/off states.
36192
- * Supports small/large sizes and disabled state.
36181
+ /**
36182
+ * ToggleSwitch component for on/off states.
36183
+ * Supports small/large sizes and disabled state.
36193
36184
  */
36194
36185
  function ToggleSwitch(_ref) {
36195
36186
  let {
@@ -37031,104 +37022,104 @@ const LoadingText = styled__default["default"].span`
37031
37022
  const rotation = styled.keyframes`
37032
37023
  0%, 100% {
37033
37024
  box-shadow:
37034
- 0px -16.64px 0px 0px #1F7677,
37035
- 11.52px -11.52px 0 0px rgba(31, 118, 119,0.2),
37036
- 16px 0px 0 0px rgba(31, 118, 119,0.2),
37037
- 11.2px 11.2px 0 0px rgba(31, 118, 119,0.2),
37038
- 0px 16px 0 0px rgba(31, 118, 119,0.2),
37039
- -11.52px 11.52px 0 0px rgba(31, 118, 119,0.2),
37040
- -16.64px 0px 0 0px rgba(31, 118, 119,0.5),
37041
- -11.52px -11.52px 0 0px rgba(31, 118, 119,0.7);
37025
+ 0px -8.32px 0px 0px #1F7677,
37026
+ 5.76px -5.76px 0 0px rgba(31, 118, 119,0.2),
37027
+ 8px 0px 0 0px rgba(31, 118, 119,0.2),
37028
+ 5.6px 5.6px 0 0px rgba(31, 118, 119,0.2),
37029
+ 0px 8px 0 0px rgba(31, 118, 119,0.2),
37030
+ -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2),
37031
+ -8.32px 0px 0 0px rgba(31, 118, 119,0.5),
37032
+ -5.76px -5.76px 0 0px rgba(31, 118, 119,0.7);
37042
37033
  }
37043
37034
 
37044
37035
  12.5% {
37045
37036
  box-shadow:
37046
- 0px -16.64px 0px 0px rgba(31, 118, 119,0.7),
37047
- 11.52px -11.52px 0 0px #1F7677,
37048
- 16px 0px 0 0px rgba(31, 118, 119,0.2),
37049
- 11.2px 11.2px 0 0px rgba(31, 118, 119,0.2),
37050
- 0px 16px 0 0px rgba(31, 118, 119,0.2),
37051
- -11.52px 11.52px 0 0px rgba(31, 118, 119,0.2),
37052
- -16.64px 0px 0 0px rgba(31, 118, 119,0.2),
37053
- -11.52px -11.52px 0 0px rgba(31, 118, 119,0.5);
37037
+ 0px -8.32px 0px 0px rgba(31, 118, 119,0.7),
37038
+ 5.76px -5.76px 0 0px #1F7677,
37039
+ 8px 0px 0 0px rgba(31, 118, 119,0.2),
37040
+ 5.6px 5.6px 0 0px rgba(31, 118, 119,0.2),
37041
+ 0px 8px 0 0px rgba(31, 118, 119,0.2),
37042
+ -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2),
37043
+ -8.32px 0px 0 0px rgba(31, 118, 119,0.2),
37044
+ -5.76px -5.76px 0 0px rgba(31, 118, 119,0.5);
37054
37045
  }
37055
37046
 
37056
37047
  25% {
37057
37048
  box-shadow:
37058
- 0px -16.64px 0px 0px rgba(31, 118, 119,0.5),
37059
- 11.52px -11.52px 0 0px rgba(31, 118, 119,0.7),
37060
- 16px 0px 0 0px #1F7677,
37061
- 11.2px 11.2px 0 0px rgba(31, 118, 119,0.2),
37062
- 0px 16px 0 0px rgba(31, 118, 119,0.2),
37063
- -11.52px 11.52px 0 0px rgba(31, 118, 119,0.2),
37064
- -16.64px 0px 0 0px rgba(31, 118, 119,0.2),
37065
- -11.52px -11.52px 0 0px rgba(31, 118, 119,0.2);
37049
+ 0px -8.32px 0px 0px rgba(31, 118, 119,0.5),
37050
+ 5.76px -5.76px 0 0px rgba(31, 118, 119,0.7),
37051
+ 8px 0px 0 0px #1F7677,
37052
+ 5.6px 5.6px 0 0px rgba(31, 118, 119,0.2),
37053
+ 0px 8px 0 0px rgba(31, 118, 119,0.2),
37054
+ -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2),
37055
+ -8.32px 0px 0 0px rgba(31, 118, 119,0.2),
37056
+ -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
37066
37057
  }
37067
37058
 
37068
37059
  37.5% {
37069
37060
  box-shadow:
37070
- 0px -16.64px 0px 0px rgba(31, 118, 119,0.2),
37071
- 11.52px -11.52px 0 0px rgba(31, 118, 119,0.5),
37072
- 16px 0px 0 0px rgba(31, 118, 119,0.7),
37073
- 11.2px 11.2px 0 0px #1F7677,
37074
- 0px 16px 0 0px rgba(31, 118, 119,0.2),
37075
- -11.52px 11.52px 0 0px rgba(31, 118, 119,0.2),
37076
- -16.64px 0px 0 0px rgba(31, 118, 119,0.2),
37077
- -11.52px -11.52px 0 0px rgba(31, 118, 119,0.2);
37061
+ 0px -8.32px 0px 0px rgba(31, 118, 119,0.2),
37062
+ 5.76px -5.76px 0 0px rgba(31, 118, 119,0.5),
37063
+ 8px 0px 0 0px rgba(31, 118, 119,0.7),
37064
+ 5.6px 5.6px 0 0px #1F7677,
37065
+ 0px 8px 0 0px rgba(31, 118, 119,0.2),
37066
+ -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2),
37067
+ -8.32px 0px 0 0px rgba(31, 118, 119,0.2),
37068
+ -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
37078
37069
  }
37079
37070
 
37080
37071
  50% {
37081
37072
  box-shadow:
37082
- 0px -16.64px 0px 0px rgba(31, 118, 119,0.2),
37083
- 11.52px -11.52px 0 0px rgba(31, 118, 119,0.2),
37084
- 16px 0px 0 0px rgba(31, 118, 119,0.5),
37085
- 11.2px 11.2px 0 0px rgba(31, 118, 119,0.7),
37086
- 0px 16px 0 0px #1F7677,
37087
- -11.52px 11.52px 0 0px rgba(31, 118, 119,0.2),
37088
- -16.64px 0px 0 0px rgba(31, 118, 119,0.2),
37089
- -11.52px -11.52px 0 0px rgba(31, 118, 119,0.2);
37073
+ 0px -8.32px 0px 0px rgba(31, 118, 119,0.2),
37074
+ 5.76px -5.76px 0 0px rgba(31, 118, 119,0.2),
37075
+ 8px 0px 0 0px rgba(31, 118, 119,0.5),
37076
+ 5.6px 5.6px 0 0px rgba(31, 118, 119,0.7),
37077
+ 0px 8px 0 0px #1F7677,
37078
+ -5.76px 5.76px 0 0px rgba(31, 118, 119,0.2),
37079
+ -8.32px 0px 0 0px rgba(31, 118, 119,0.2),
37080
+ -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
37090
37081
  }
37091
37082
 
37092
37083
  62.5% {
37093
37084
  box-shadow:
37094
- 0px -16.64px 0px 0px rgba(31, 118, 119,0.2),
37095
- 11.52px -11.52px 0 0px rgba(31, 118, 119,0.2),
37096
- 16px 0px 0 0px rgba(31, 118, 119,0.2),
37097
- 11.2px 11.2px 0 0px rgba(31, 118, 119,0.5),
37098
- 0px 16px 0 0px rgba(31, 118, 119,0.7),
37099
- -11.52px 11.52px 0 0px #1F7677,
37100
- -16.64px 0px 0 0px rgba(31, 118, 119,0.2),
37101
- -11.52px -11.52px 0 0px rgba(31, 118, 119,0.2);
37085
+ 0px -8.32px 0px 0px rgba(31, 118, 119,0.2),
37086
+ 5.76px -5.76px 0 0px rgba(31, 118, 119,0.2),
37087
+ 8px 0px 0 0px rgba(31, 118, 119,0.2),
37088
+ 5.6px 5.6px 0 0px rgba(31, 118, 119,0.5),
37089
+ 0px 8px 0 0px rgba(31, 118, 119,0.7),
37090
+ -5.76px 5.76px 0 0px #1F7677,
37091
+ -8.32px 0px 0 0px rgba(31, 118, 119,0.2),
37092
+ -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
37102
37093
  }
37103
37094
 
37104
37095
  75% {
37105
37096
  box-shadow:
37106
- 0px -16.64px 0px 0px rgba(31, 118, 119,0.2),
37107
- 11.52px -11.52px 0 0px rgba(31, 118, 119,0.2),
37108
- 16px 0px 0 0px rgba(31, 118, 119,0.2),
37109
- 11.2px 11.2px 0 0px rgba(31, 118, 119,0.2),
37110
- 0px 16px 0 0px rgba(31, 118, 119,0.5),
37111
- -11.52px 11.52px 0 0px rgba(31, 118, 119,0.7),
37112
- -16.64px 0px 0 0px #1F7677,
37113
- -11.52px -11.52px 0 0px rgba(31, 118, 119,0.2);
37097
+ 0px -8.32px 0px 0px rgba(31, 118, 119,0.2),
37098
+ 5.76px -5.76px 0 0px rgba(31, 118, 119,0.2),
37099
+ 8px 0px 0 0px rgba(31, 118, 119,0.2),
37100
+ 5.6px 5.6px 0 0px rgba(31, 118, 119,0.2),
37101
+ 0px 8px 0 0px rgba(31, 118, 119,0.5),
37102
+ -5.76px 5.76px 0 0px rgba(31, 118, 119,0.7),
37103
+ -8.32px 0px 0 0px #1F7677,
37104
+ -5.76px -5.76px 0 0px rgba(31, 118, 119,0.2);
37114
37105
  }
37115
37106
 
37116
37107
  87.5% {
37117
37108
  box-shadow:
37118
- 0px -16.64px 0px 0px rgba(31, 118, 119,0.2),
37119
- 11.52px -11.52px 0 0px rgba(31, 118, 119,0.2),
37120
- 16px 0px 0 0px rgba(31, 118, 119,0.2),
37121
- 11.2px 11.2px 0 0px rgba(31, 118, 119,0.2),
37122
- 0px 16px 0 0px rgba(31, 118, 119,0.2),
37123
- -11.52px 11.52px 0 0px rgba(31, 118, 119,0.5),
37124
- -16.64px 0px 0 0px rgba(31, 118, 119,0.7),
37125
- -11.52px -11.52px 0 0px #1F7677;
37109
+ 0px -8.32px 0px 0px rgba(31, 118, 119,0.2),
37110
+ 5.76px -5.76px 0 0px rgba(31, 118, 119,0.2),
37111
+ 8px 0px 0 0px rgba(31, 118, 119,0.2),
37112
+ 5.6px 5.6px 0 0px rgba(31, 118, 119,0.2),
37113
+ 0px 8px 0 0px rgba(31, 118, 119,0.2),
37114
+ -5.76px 5.76px 0 0px rgba(31, 118, 119,0.5),
37115
+ -8.32px 0px 0 0px rgba(31, 118, 119,0.7),
37116
+ -5.76px -5.76px 0 0px #1F7677;
37126
37117
  }
37127
37118
  `;
37128
37119
  const Loader = styled__default["default"].span`
37129
- font-size: 30px;
37130
- width: 8px;
37131
- height: 8px;
37120
+ font-size: 10px;
37121
+ width: 4px;
37122
+ height: 4px;
37132
37123
  border-radius: 50%;
37133
37124
  position: relative;
37134
37125
  text-indent: -9999em;
@@ -37865,7 +37856,7 @@ const FilterPop = props => {
37865
37856
  }));
37866
37857
  return {
37867
37858
  visibleItems: visible,
37868
- totalHeight: (sortedList.length + 1) * (itemHeight + 8),
37859
+ totalHeight: sortedList.length * itemHeight,
37869
37860
  offsetY: startIndex * itemHeight
37870
37861
  };
37871
37862
  }, [sortedList, scrollTop, itemHeight, overscan, maxHeight]);
@@ -40375,7 +40366,7 @@ const FieldRow$1 = styled__default["default"].div`
40375
40366
  display: flex;
40376
40367
  gap: 8px;
40377
40368
  align-items: center;
40378
- justify-content: center;
40369
+ justify-content: center;
40379
40370
  padding: 16px;
40380
40371
  `;
40381
40372
  const Label$2 = styled__default["default"].label`
@@ -40383,6 +40374,7 @@ const Label$2 = styled__default["default"].label`
40383
40374
  display: flex;
40384
40375
  align-items: center;
40385
40376
  gap: 8px;
40377
+ white-space: nowrap;
40386
40378
  `;
40387
40379
  const Input$1 = styled__default["default"].input`
40388
40380
  width: 64px;
@@ -40610,7 +40602,7 @@ const RangePop = props => {
40610
40602
  max: param.type === "percent" ? 100 : param.type === "week" ? 53 : undefined
40611
40603
  }));
40612
40604
  }
40613
- }), errors[`field_${idx}`] && /*#__PURE__*/React__default["default"].createElement(ErrorText, null, errors[`field_${idx}`]?.message)))), /*#__PURE__*/React__default["default"].createElement(Label$2, null, paramType)), /*#__PURE__*/React__default["default"].createElement(Actions$1, null, /*#__PURE__*/React__default["default"].createElement(LinkButton, {
40605
+ }), errors[`field_${idx}`] && /*#__PURE__*/React__default["default"].createElement(ErrorText, null, errors[`field_${idx}`]?.message)))), /*#__PURE__*/React__default["default"].createElement(Label$2, null, paramType === 'Week' ? paramType : "")), /*#__PURE__*/React__default["default"].createElement(Actions$1, null, /*#__PURE__*/React__default["default"].createElement(LinkButton, {
40614
40606
  leftIcon: "none",
40615
40607
  onClick: handleCancel,
40616
40608
  rightIcon: "none",
@@ -41262,13 +41254,23 @@ const TableHeader = ({
41262
41254
  });
41263
41255
  } else if (rangeFilter) {
41264
41256
  const currentFilterState = filterState[key];
41265
- return /*#__PURE__*/React__default["default"].createElement(RangePop, {
41266
- menuName: title,
41267
- width: "300px",
41268
- height: "auto",
41269
- buttonColor: "#066768",
41270
- hoverColor: "#044d4e",
41271
- paramType: "Week",
41257
+
41258
+ // Determine if this is a price column
41259
+ const isPriceColumn = key.toLowerCase().includes('price') || key.toLowerCase().includes('cost') || key.toLowerCase().includes('amount');
41260
+
41261
+ // Configure RangePop based on column type
41262
+ const rangeConfig = isPriceColumn ? {
41263
+ paramType: '$',
41264
+ params: [{
41265
+ label: 'From $',
41266
+ type: 'price'
41267
+ }, {
41268
+ label: 'To $',
41269
+ type: 'price'
41270
+ }],
41271
+ radioOptions: ['All Prices', 'Custom Range']
41272
+ } : {
41273
+ paramType: 'Week',
41272
41274
  params: [{
41273
41275
  label: 'From',
41274
41276
  type: 'week'
@@ -41276,7 +41278,17 @@ const TableHeader = ({
41276
41278
  label: 'To',
41277
41279
  type: 'week'
41278
41280
  }],
41279
- radioOptions: ['All weeks', 'Custom Range'],
41281
+ radioOptions: ['All Weeks', 'Custom Range']
41282
+ };
41283
+ return /*#__PURE__*/React__default["default"].createElement(RangePop, {
41284
+ menuName: title,
41285
+ width: "300px",
41286
+ height: "auto",
41287
+ buttonColor: "#066768",
41288
+ hoverColor: "#044d4e",
41289
+ paramType: rangeConfig.paramType,
41290
+ params: rangeConfig.params,
41291
+ radioOptions: rangeConfig.radioOptions,
41280
41292
  initialValues: currentFilterState ? {
41281
41293
  selectedRadio: currentFilterState.selectedRadio,
41282
41294
  fields: currentFilterState.fields