@shoplflow/base 0.32.47 → 0.33.1

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.cjs CHANGED
@@ -2896,8 +2896,8 @@ var getDropdownStyleBySizeVar = (size2) => {
2896
2896
  var getDisabledStyle2 = (disabled) => {
2897
2897
  if (disabled) {
2898
2898
  return react$1.css`
2899
- opacity: 50%;
2900
2899
  cursor: not-allowed;
2900
+ background: ${exports.colorTokens.neutral100};
2901
2901
  `;
2902
2902
  }
2903
2903
  };
@@ -3330,12 +3330,12 @@ var StyledTreeItem = styled6__default.default(framerMotion.motion.li)`
3330
3330
  gap: 4px;
3331
3331
  align-items: center;
3332
3332
  justify-content: space-between;
3333
- padding: 8px 8px 8px 0;
3333
+ padding: 8px 8px 8px 0px;
3334
3334
  border-radius: 8px;
3335
3335
  background: transparent;
3336
3336
  cursor: ${({ onClick }) => onClick ? "pointer" : "initial"};
3337
3337
  ${({ depth }) => depth && react$1.css`
3338
- padding-left: ${depth * 16}px;
3338
+ padding-left: ${(depth - 1) * 24 + 12}px;
3339
3339
  `};
3340
3340
  &:hover {
3341
3341
  background: ${exports.colorTokens.neutral400_5};
@@ -3401,6 +3401,7 @@ exports.TreeItem = (_a) => {
3401
3401
  "onClick"
3402
3402
  ]);
3403
3403
  const [isOpened, setIsOpened] = React3__namespace.default.useState(initialIsOpen != null ? initialIsOpen : false);
3404
+ const uniqueId = React3.useId();
3404
3405
  const CloneChildren = React3__namespace.default.Children.map(children, (child) => {
3405
3406
  if (!React3__namespace.default.isValidElement(child)) {
3406
3407
  return child;
@@ -3422,15 +3423,16 @@ exports.TreeItem = (_a) => {
3422
3423
  }
3423
3424
  return onClick(e);
3424
3425
  };
3425
- const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues({
3426
+ const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues(__spreadValues({
3426
3427
  disabled,
3427
3428
  onClick
3428
- }, rest)) : leftSource;
3429
+ }, rest), leftSource.props)) : leftSource;
3429
3430
  React3.useEffect(() => {
3430
3431
  if (isOpen !== void 0) {
3431
3432
  setIsOpened(isOpen);
3432
3433
  }
3433
3434
  }, [isOpen]);
3435
+ const isLastTree = !children && depth > 0;
3434
3436
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
3435
3437
  /* @__PURE__ */ React3.createElement(
3436
3438
  StyledTreeItem,
@@ -3440,28 +3442,27 @@ exports.TreeItem = (_a) => {
3440
3442
  variants: fadeInOut
3441
3443
  }, AnimateKey), {
3442
3444
  layout: true,
3443
- key: String(label),
3445
+ key: uniqueId,
3444
3446
  onClick: handleClickTreeItem
3445
3447
  }), rest),
3446
3448
  /* @__PURE__ */ jsxRuntime.jsxs(LeftElementWrapper, { children: [
3447
- LeftSourceClone && LeftSourceClone,
3448
- /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: disabled ? "neutral350" : "neutral700", children: label }) })
3449
- ] }),
3450
- /* @__PURE__ */ jsxRuntime.jsxs(RightElementWrapper, { children: [
3451
- rightSource,
3452
- children && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "S", children: /* @__PURE__ */ jsxRuntime.jsx(
3449
+ children && !isLastTree && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "XS", children: /* @__PURE__ */ jsxRuntime.jsx(
3453
3450
  IconWrapper,
3454
3451
  {
3455
3452
  animate: {
3456
- rotate: isOpened ? 180 : 0,
3453
+ rotate: isOpened ? 90 : 0,
3457
3454
  transition: {
3458
3455
  duration: 0.2
3459
3456
  }
3460
3457
  },
3461
- children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.DownArrowIcon, sizeVar: "S", color: "neutral400" })
3458
+ children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowSolidXsmallIcon, sizeVar: "XS", color: "neutral400" })
3462
3459
  }
3463
- ) })
3464
- ] })
3460
+ ) }),
3461
+ isLastTree && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
3462
+ LeftSourceClone && LeftSourceClone,
3463
+ /* @__PURE__ */ jsxRuntime.jsx(exports.StackContainer, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: disabled ? "neutral350" : "neutral700", children: label }) })
3464
+ ] }),
3465
+ /* @__PURE__ */ jsxRuntime.jsx(RightElementWrapper, { children: rightSource })
3465
3466
  ),
3466
3467
  /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children: isOpened && children && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren)) })
3467
3468
  ] });
@@ -3833,6 +3834,7 @@ var StyledInputButton = styled6__default.default.div`
3833
3834
  ${({ disabled }) => disabled && react$1.css`
3834
3835
  background-color: ${exports.colorTokens.neutral100};
3835
3836
  cursor: not-allowed;
3837
+ color: ${exports.colorTokens.neutral350};
3836
3838
  `}
3837
3839
  `;
3838
3840
  var StyledInputButtonContent = styled6__default.default.input`
@@ -4145,6 +4147,9 @@ var SelectInputButton = (_a) => {
4145
4147
  setIsHovered(false);
4146
4148
  onMouseLeave && onMouseLeave(e);
4147
4149
  };
4150
+ const getTextColor = (disabled2) => {
4151
+ return disabled2 ? "neutral350" : "neutral700";
4152
+ };
4148
4153
  return /* @__PURE__ */ jsxRuntime.jsx(
4149
4154
  InputWrapper,
4150
4155
  __spreadProps(__spreadValues({
@@ -4159,9 +4164,9 @@ var SelectInputButton = (_a) => {
4159
4164
  }, rest), {
4160
4165
  "data-shoplflow": "SelectInputButton",
4161
4166
  children: /* @__PURE__ */ jsxRuntime.jsxs(StyledSelectInputButton, { children: [
4162
- value && value.length > 0 && label ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, children: value[0][label] }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4167
+ value && value.length > 0 && label ? /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: getTextColor(disabled), children: value[0][label] }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4163
4168
  /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack.Horizontal, { align: "center", spacing: "spacing04", children: [
4164
- value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: "neutral700", children: [
4169
+ value && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Text, { typography: "body1_400", color: getTextColor(disabled), children: [
4165
4170
  "+",
4166
4171
  value.length - 1
4167
4172
  ] }),
@@ -4625,6 +4630,12 @@ var Pagination = (_a) => {
4625
4630
  Pagination.SizeSelector = PaginationSizeSelector_default;
4626
4631
  exports.Pagination = Pagination;
4627
4632
  var getLabelStyleByStatus = (selected, disabled) => {
4633
+ if (disabled && selected) {
4634
+ return react$1.css`
4635
+ background-color: ${exports.colorTokens.neutral0};
4636
+ cursor: not-allowed;
4637
+ `;
4638
+ }
4628
4639
  if (disabled) {
4629
4640
  return react$1.css`
4630
4641
  cursor: not-allowed;
@@ -4731,6 +4742,12 @@ var ToggleInnerRadio = React3.forwardRef(
4731
4742
  if (selectedValue && selectedValue === value) {
4732
4743
  selected = true;
4733
4744
  }
4745
+ const getLabelColor = ({ selected: selected2, disabled: disabled2 }) => {
4746
+ if (selected2) {
4747
+ return disabled2 ? "neutral400" : "neutral700";
4748
+ }
4749
+ return "neutral500";
4750
+ };
4734
4751
  return /* @__PURE__ */ jsxRuntime.jsxs(StyledToggleInner, { disabled, type: "button", children: [
4735
4752
  /* @__PURE__ */ jsxRuntime.jsx(
4736
4753
  StyledToggleInnerInput,
@@ -4759,7 +4776,7 @@ var ToggleInnerRadio = React3.forwardRef(
4759
4776
  exports.Text,
4760
4777
  {
4761
4778
  lineClamp: 1,
4762
- color: selected ? "neutral700" : "neutral500",
4779
+ color: getLabelColor({ selected, disabled: Boolean(disabled) }),
4763
4780
  wordBreak: "break-all",
4764
4781
  typography: selected ? "body2_500" : "body2_400",
4765
4782
  children: label
package/dist/index.d.cts CHANGED
@@ -934,6 +934,7 @@ interface DropdownOptionProps {
934
934
  */
935
935
  option?: DropdownOptionVariantType;
936
936
  width?: CSSProperties['width'];
937
+ disabled?: boolean;
937
938
  }
938
939
  interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
939
940
  /**
package/dist/index.d.ts CHANGED
@@ -934,6 +934,7 @@ interface DropdownOptionProps {
934
934
  */
935
935
  option?: DropdownOptionVariantType;
936
936
  width?: CSSProperties['width'];
937
+ disabled?: boolean;
937
938
  }
938
939
  interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, ChildrenProps {
939
940
  /**
package/dist/index.js CHANGED
@@ -11,7 +11,7 @@ import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/
11
11
  export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
12
12
  import { useFloating } from '@floating-ui/react-dom';
13
13
  import * as ShoplAssets from '@shoplflow/shopl-assets';
14
- import { DownArrowSolidXsmallIcon, DownArrowIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
14
+ import { DownArrowSolidXsmallIcon, RightArrowSolidXsmallIcon, FirstPageIcon, LeftArrowIcon, RightArrowIcon, EndPageIcon } from '@shoplflow/shopl-assets';
15
15
  import { shift, flip, offset as offset$1 } from '@floating-ui/core';
16
16
  import * as HadaAssets from '@shoplflow/hada-assets';
17
17
  import DatePicker2 from 'react-datepicker';
@@ -2869,8 +2869,8 @@ var getDropdownStyleBySizeVar = (size2) => {
2869
2869
  var getDisabledStyle2 = (disabled) => {
2870
2870
  if (disabled) {
2871
2871
  return css`
2872
- opacity: 50%;
2873
2872
  cursor: not-allowed;
2873
+ background: ${colorTokens.neutral100};
2874
2874
  `;
2875
2875
  }
2876
2876
  };
@@ -3303,12 +3303,12 @@ var StyledTreeItem = styled6(motion.li)`
3303
3303
  gap: 4px;
3304
3304
  align-items: center;
3305
3305
  justify-content: space-between;
3306
- padding: 8px 8px 8px 0;
3306
+ padding: 8px 8px 8px 0px;
3307
3307
  border-radius: 8px;
3308
3308
  background: transparent;
3309
3309
  cursor: ${({ onClick }) => onClick ? "pointer" : "initial"};
3310
3310
  ${({ depth }) => depth && css`
3311
- padding-left: ${depth * 16}px;
3311
+ padding-left: ${(depth - 1) * 24 + 12}px;
3312
3312
  `};
3313
3313
  &:hover {
3314
3314
  background: ${colorTokens.neutral400_5};
@@ -3374,6 +3374,7 @@ var TreeItem = (_a) => {
3374
3374
  "onClick"
3375
3375
  ]);
3376
3376
  const [isOpened, setIsOpened] = React3__default.useState(initialIsOpen != null ? initialIsOpen : false);
3377
+ const uniqueId = useId();
3377
3378
  const CloneChildren = React3__default.Children.map(children, (child) => {
3378
3379
  if (!React3__default.isValidElement(child)) {
3379
3380
  return child;
@@ -3395,15 +3396,16 @@ var TreeItem = (_a) => {
3395
3396
  }
3396
3397
  return onClick(e);
3397
3398
  };
3398
- const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadValues({
3399
+ const LeftSourceClone = leftSource ? React3__default.cloneElement(leftSource, __spreadValues(__spreadValues({
3399
3400
  disabled,
3400
3401
  onClick
3401
- }, rest)) : leftSource;
3402
+ }, rest), leftSource.props)) : leftSource;
3402
3403
  useEffect(() => {
3403
3404
  if (isOpen !== void 0) {
3404
3405
  setIsOpened(isOpen);
3405
3406
  }
3406
3407
  }, [isOpen]);
3408
+ const isLastTree = !children && depth > 0;
3407
3409
  return /* @__PURE__ */ jsxs(Fragment, { children: [
3408
3410
  /* @__PURE__ */ createElement(
3409
3411
  StyledTreeItem,
@@ -3413,28 +3415,27 @@ var TreeItem = (_a) => {
3413
3415
  variants: fadeInOut
3414
3416
  }, AnimateKey), {
3415
3417
  layout: true,
3416
- key: String(label),
3418
+ key: uniqueId,
3417
3419
  onClick: handleClickTreeItem
3418
3420
  }), rest),
3419
3421
  /* @__PURE__ */ jsxs(LeftElementWrapper, { children: [
3420
- LeftSourceClone && LeftSourceClone,
3421
- /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: disabled ? "neutral350" : "neutral700", children: label }) })
3422
- ] }),
3423
- /* @__PURE__ */ jsxs(RightElementWrapper, { children: [
3424
- rightSource,
3425
- children && /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "S", children: /* @__PURE__ */ jsx(
3422
+ children && !isLastTree && /* @__PURE__ */ jsx(IconButton_default, { styleVar: "GHOST", onClick: handleToggle, sizeVar: "XS", children: /* @__PURE__ */ jsx(
3426
3423
  IconWrapper,
3427
3424
  {
3428
3425
  animate: {
3429
- rotate: isOpened ? 180 : 0,
3426
+ rotate: isOpened ? 90 : 0,
3430
3427
  transition: {
3431
3428
  duration: 0.2
3432
3429
  }
3433
3430
  },
3434
- children: /* @__PURE__ */ jsx(Icon_default, { iconSource: DownArrowIcon, sizeVar: "S", color: "neutral400" })
3431
+ children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowSolidXsmallIcon, sizeVar: "XS", color: "neutral400" })
3435
3432
  }
3436
- ) })
3437
- ] })
3433
+ ) }),
3434
+ isLastTree && /* @__PURE__ */ jsx("div", { style: { width: "24px", height: "24px", visibility: "hidden" } }),
3435
+ LeftSourceClone && LeftSourceClone,
3436
+ /* @__PURE__ */ jsx(StackContainer_default, { padding: "0 0 0 4px", children: /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: disabled ? "neutral350" : "neutral700", children: label }) })
3437
+ ] }),
3438
+ /* @__PURE__ */ jsx(RightElementWrapper, { children: rightSource })
3438
3439
  ),
3439
3440
  /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: isOpened && children && /* @__PURE__ */ jsx(motion.div, __spreadProps(__spreadValues({ layout: true }, AnimateKey), { variants: fadeInOut, children: CloneChildren }), "children" + String(CloneChildren)) })
3440
3441
  ] });
@@ -3806,6 +3807,7 @@ var StyledInputButton = styled6.div`
3806
3807
  ${({ disabled }) => disabled && css`
3807
3808
  background-color: ${colorTokens.neutral100};
3808
3809
  cursor: not-allowed;
3810
+ color: ${colorTokens.neutral350};
3809
3811
  `}
3810
3812
  `;
3811
3813
  var StyledInputButtonContent = styled6.input`
@@ -4118,6 +4120,9 @@ var SelectInputButton = (_a) => {
4118
4120
  setIsHovered(false);
4119
4121
  onMouseLeave && onMouseLeave(e);
4120
4122
  };
4123
+ const getTextColor = (disabled2) => {
4124
+ return disabled2 ? "neutral350" : "neutral700";
4125
+ };
4121
4126
  return /* @__PURE__ */ jsx(
4122
4127
  InputWrapper,
4123
4128
  __spreadProps(__spreadValues({
@@ -4132,9 +4137,9 @@ var SelectInputButton = (_a) => {
4132
4137
  }, rest), {
4133
4138
  "data-shoplflow": "SelectInputButton",
4134
4139
  children: /* @__PURE__ */ jsxs(StyledSelectInputButton, { children: [
4135
- value && value.length > 0 && label ? /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, children: value[0][label] }) : /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4140
+ value && value.length > 0 && label ? /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: getTextColor(disabled), children: value[0][label] }) : /* @__PURE__ */ jsx(Text_default, { typography: "body1_400", lineClamp: 1, color: "neutral350", children: placeholder }),
4136
4141
  /* @__PURE__ */ jsxs(Stack_default.Horizontal, { align: "center", spacing: "spacing04", children: [
4137
- value && value.length > 1 && /* @__PURE__ */ jsxs(Text_default, { typography: "body1_400", color: "neutral700", children: [
4142
+ value && value.length > 1 && /* @__PURE__ */ jsxs(Text_default, { typography: "body1_400", color: getTextColor(disabled), children: [
4138
4143
  "+",
4139
4144
  value.length - 1
4140
4145
  ] }),
@@ -4598,6 +4603,12 @@ var Pagination = (_a) => {
4598
4603
  Pagination.SizeSelector = PaginationSizeSelector_default;
4599
4604
  var Pagination_default = Pagination;
4600
4605
  var getLabelStyleByStatus = (selected, disabled) => {
4606
+ if (disabled && selected) {
4607
+ return css`
4608
+ background-color: ${colorTokens.neutral0};
4609
+ cursor: not-allowed;
4610
+ `;
4611
+ }
4601
4612
  if (disabled) {
4602
4613
  return css`
4603
4614
  cursor: not-allowed;
@@ -4704,6 +4715,12 @@ var ToggleInnerRadio = forwardRef(
4704
4715
  if (selectedValue && selectedValue === value) {
4705
4716
  selected = true;
4706
4717
  }
4718
+ const getLabelColor = ({ selected: selected2, disabled: disabled2 }) => {
4719
+ if (selected2) {
4720
+ return disabled2 ? "neutral400" : "neutral700";
4721
+ }
4722
+ return "neutral500";
4723
+ };
4707
4724
  return /* @__PURE__ */ jsxs(StyledToggleInner, { disabled, type: "button", children: [
4708
4725
  /* @__PURE__ */ jsx(
4709
4726
  StyledToggleInnerInput,
@@ -4732,7 +4749,7 @@ var ToggleInnerRadio = forwardRef(
4732
4749
  Text_default,
4733
4750
  {
4734
4751
  lineClamp: 1,
4735
- color: selected ? "neutral700" : "neutral500",
4752
+ color: getLabelColor({ selected, disabled: Boolean(disabled) }),
4736
4753
  wordBreak: "break-all",
4737
4754
  typography: selected ? "body2_500" : "body2_400",
4738
4755
  children: label
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoplflow/base",
3
- "version": "0.32.47",
3
+ "version": "0.33.1",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.js",
@@ -91,7 +91,7 @@
91
91
  "react-dom": "^18.2.0",
92
92
  "simplebar-react": "^3.2.6",
93
93
  "@shoplflow/hada-assets": "^0.1.3",
94
- "@shoplflow/shopl-assets": "^0.12.0",
94
+ "@shoplflow/shopl-assets": "^0.12.1",
95
95
  "@shoplflow/utils": "^0.6.5"
96
96
  },
97
97
  "scripts": {