@shoplflow/base 0.42.4 → 0.42.6

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.
Files changed (3) hide show
  1. package/dist/index.cjs +13 -3
  2. package/dist/index.js +13 -3
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -2605,6 +2605,14 @@ var DropdownButton = (_a) => {
2605
2605
  _styleVar = "SOLID";
2606
2606
  color = "coolgray50";
2607
2607
  }
2608
+ let customStyle = {};
2609
+ if (styleVar === "SECONDARY") {
2610
+ _styleVar = "SOLID";
2611
+ color = "neutral0";
2612
+ customStyle = {
2613
+ border: `1px solid ${exports.colorTokens.neutral350}`
2614
+ };
2615
+ }
2608
2616
  return /* @__PURE__ */ jsxRuntime.jsx(exports.DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, "data-shoplflow": "DropdownButton", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Popper, { placement, offset: 4, middlewares: [core.shift({ crossAxis: true, padding: 4 })], children: [
2609
2617
  /* @__PURE__ */ jsxRuntime.jsx(exports.Popper.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsxRuntime.jsx(
2610
2618
  exports.Button,
@@ -2638,7 +2646,8 @@ var DropdownButton = (_a) => {
2638
2646
  return;
2639
2647
  }
2640
2648
  setIsOpen((prev) => !prev);
2641
- }
2649
+ },
2650
+ style: customStyle
2642
2651
  }, rest), {
2643
2652
  children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_400", color: "neutral700", children: text })
2644
2653
  })
@@ -4791,6 +4800,7 @@ var Pagination = (_a) => {
4791
4800
  const isHadaDomain = domain === "hada";
4792
4801
  const responsiveClassName = isHadaDomain ? "hada-responsive" : "";
4793
4802
  const isXSSize = sizeVar === "XS";
4803
+ const iconStyle = isXSSize ? { width: "12px", height: "12px" } : void 0;
4794
4804
  const pageTotalCount = totalCount != null ? totalCount : Math.ceil(itemsTotalCount / Number(pageSize));
4795
4805
  const showLeftEllipsis = currentPage > pageCount - 1;
4796
4806
  const showRightEllipsis = currentPage < pageTotalCount && Math.ceil((currentPage + 1) / pageCount) < Math.ceil(pageTotalCount / pageCount);
@@ -4800,7 +4810,7 @@ var Pagination = (_a) => {
4800
4810
  leftSource ? leftSource : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
4801
4811
  /* @__PURE__ */ jsxRuntime.jsxs(StyledPagination, { className: responsiveClassName, "data-shoplflow": "Pagination", children: [
4802
4812
  !isXSSize && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
4803
- /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
4813
+ /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.LeftArrowIcon, color: "neutral400", sizeVar, style: iconStyle }) }),
4804
4814
  showLeftEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
4805
4815
  [...Array(pageTotalCount)].splice(0, pageCount).map(
4806
4816
  (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4816,7 +4826,7 @@ var Pagination = (_a) => {
4816
4826
  )
4817
4827
  ),
4818
4828
  showRightEllipsis && /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Text, { typography: "body2_700", children: "..." }) }),
4819
- /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
4829
+ /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar, styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.RightArrowIcon, color: "neutral400", sizeVar, style: iconStyle }) }),
4820
4830
  !isXSSize && /* @__PURE__ */ jsxRuntime.jsx(exports.IconButton, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { iconSource: ShoplAssets.EndPageIcon, color: "neutral400", sizeVar: "S" }) })
4821
4831
  ] }),
4822
4832
  rightSource ? /* @__PURE__ */ jsxRuntime.jsx(RightSourceWrapper, { className: responsiveClassName, children: rightSource }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
package/dist/index.js CHANGED
@@ -2578,6 +2578,14 @@ var DropdownButton = (_a) => {
2578
2578
  _styleVar = "SOLID";
2579
2579
  color = "coolgray50";
2580
2580
  }
2581
+ let customStyle = {};
2582
+ if (styleVar === "SECONDARY") {
2583
+ _styleVar = "SOLID";
2584
+ color = "neutral0";
2585
+ customStyle = {
2586
+ border: `1px solid ${colorTokens.neutral350}`
2587
+ };
2588
+ }
2581
2589
  return /* @__PURE__ */ jsx(DropdownButtonContext.Provider, { value: { isOpen, setIsOpen }, "data-shoplflow": "DropdownButton", children: /* @__PURE__ */ jsxs(Popper_default, { placement, offset: 4, middlewares: [shift({ crossAxis: true, padding: 4 })], children: [
2582
2590
  /* @__PURE__ */ jsx(Popper_default.Trigger, { isOpen, className: _className, children: /* @__PURE__ */ jsx(
2583
2591
  Button_default,
@@ -2611,7 +2619,8 @@ var DropdownButton = (_a) => {
2611
2619
  return;
2612
2620
  }
2613
2621
  setIsOpen((prev) => !prev);
2614
- }
2622
+ },
2623
+ style: customStyle
2615
2624
  }, rest), {
2616
2625
  children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_400", color: "neutral700", children: text })
2617
2626
  })
@@ -4764,6 +4773,7 @@ var Pagination = (_a) => {
4764
4773
  const isHadaDomain = domain === "hada";
4765
4774
  const responsiveClassName = isHadaDomain ? "hada-responsive" : "";
4766
4775
  const isXSSize = sizeVar === "XS";
4776
+ const iconStyle = isXSSize ? { width: "12px", height: "12px" } : void 0;
4767
4777
  const pageTotalCount = totalCount != null ? totalCount : Math.ceil(itemsTotalCount / Number(pageSize));
4768
4778
  const showLeftEllipsis = currentPage > pageCount - 1;
4769
4779
  const showRightEllipsis = currentPage < pageTotalCount && Math.ceil((currentPage + 1) / pageCount) < Math.ceil(pageTotalCount / pageCount);
@@ -4773,7 +4783,7 @@ var Pagination = (_a) => {
4773
4783
  leftSource ? leftSource : /* @__PURE__ */ jsx("div", {}),
4774
4784
  /* @__PURE__ */ jsxs(StyledPagination, { className: responsiveClassName, "data-shoplflow": "Pagination", children: [
4775
4785
  !isXSSize && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canPreviousPage, onClick: () => gotoPage(0), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: FirstPageIcon, color: "neutral400", sizeVar: "S" }) }),
4776
- /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, color: "neutral400", sizeVar: "S" }) }),
4786
+ /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: previousPage, disabled: !canPreviousPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: LeftArrowIcon, color: "neutral400", sizeVar, style: iconStyle }) }),
4777
4787
  showLeftEllipsis && /* @__PURE__ */ jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
4778
4788
  [...Array(pageTotalCount)].splice(0, pageCount).map(
4779
4789
  (_, idx) => idx + Math.floor(currentPage / pageCount) * pageCount < pageTotalCount && /* @__PURE__ */ jsx(
@@ -4789,7 +4799,7 @@ var Pagination = (_a) => {
4789
4799
  )
4790
4800
  ),
4791
4801
  showRightEllipsis && /* @__PURE__ */ jsx(Ellipsis, { className: responsiveClassName, children: /* @__PURE__ */ jsx(Text_default, { typography: "body2_700", children: "..." }) }),
4792
- /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowIcon, color: "neutral400", sizeVar: "S" }) }),
4802
+ /* @__PURE__ */ jsx(IconButton_default, { sizeVar, styleVar: "GHOST", onClick: nextPage, disabled: !canNextPage, children: /* @__PURE__ */ jsx(Icon_default, { iconSource: RightArrowIcon, color: "neutral400", sizeVar, style: iconStyle }) }),
4793
4803
  !isXSSize && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", styleVar: "GHOST", disabled: !canNextPage, onClick: () => gotoPage(pageTotalCount - 1), children: /* @__PURE__ */ jsx(Icon_default, { iconSource: EndPageIcon, color: "neutral400", sizeVar: "S" }) })
4794
4804
  ] }),
4795
4805
  rightSource ? /* @__PURE__ */ jsx(RightSourceWrapper, { className: responsiveClassName, children: rightSource }) : /* @__PURE__ */ jsx("div", {})
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoplflow/base",
3
- "version": "0.42.4",
3
+ "version": "0.42.6",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.js",