@shoplflow/templates 0.1.52 → 0.1.57

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 (5) hide show
  1. package/dist/index.cjs +29 -15
  2. package/dist/index.d.cts +4 -0
  3. package/dist/index.d.ts +4 -0
  4. package/dist/index.js +29 -15
  5. package/package.json +14 -5
package/dist/index.cjs CHANGED
@@ -1599,13 +1599,16 @@ exports.Table = Object.assign(Table, {
1599
1599
  var AttachmentListContext = React6.createContext({});
1600
1600
  var AttachmentList = (_a) => {
1601
1601
  var _b = _a, {
1602
+ onClick,
1602
1603
  onDelete,
1603
1604
  children
1604
1605
  } = _b, rest = __objRest(_b, [
1606
+ "onClick",
1605
1607
  "onDelete",
1606
1608
  "children"
1607
1609
  ]);
1608
1610
  const contextValue = {
1611
+ onClick,
1609
1612
  onDelete
1610
1613
  };
1611
1614
  return /* @__PURE__ */ jsxRuntime.jsx(AttachmentListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Horizontal, __spreadProps(__spreadValues({ spacing: "spacing08" }, rest), { children })) });
@@ -1618,7 +1621,7 @@ var StyledSeparator = styled2__default.default.div`
1618
1621
  border-radius: 0.5px;
1619
1622
  flex-shrink: 0;
1620
1623
  `;
1621
- var AttachmentItemSingle = ({ item, onDelete }) => {
1624
+ var AttachmentItemSingle = ({ item, onClick, onDelete, lineClamp = 1 }) => {
1622
1625
  const formatFileSize = (bytes) => {
1623
1626
  if (bytes === 0) {
1624
1627
  return "0 Bytes";
@@ -1629,18 +1632,27 @@ var AttachmentItemSingle = ({ item, onDelete }) => {
1629
1632
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
1630
1633
  };
1631
1634
  return /* @__PURE__ */ jsxRuntime.jsxs(base.StackContainer.Horizontal, { width: "inherit", align: "center", padding: "0", children: [
1632
- /* @__PURE__ */ jsxRuntime.jsxs(base.StackContainer.Horizontal, { align: "center", spacing: "spacing04", children: [
1633
- /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
1634
- item.extension && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1635
- /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, {}),
1636
- /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral400", children: item.extension })
1637
- ] }),
1638
- item.size && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1639
- /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, {}),
1640
- /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral400", children: formatFileSize(item.size) })
1641
- ] })
1642
- ] }),
1643
- /* @__PURE__ */ jsxRuntime.jsx(base.IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
1635
+ /* @__PURE__ */ jsxRuntime.jsxs(
1636
+ base.StackContainer.Horizontal,
1637
+ {
1638
+ align: "center",
1639
+ spacing: "spacing04",
1640
+ onClick,
1641
+ style: onClick ? { cursor: "pointer" } : void 0,
1642
+ children: [
1643
+ /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral700", lineClamp, textOverflow: "ellipsis", children: item.name }),
1644
+ item.extension && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1645
+ /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, {}),
1646
+ /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral400", children: item.extension })
1647
+ ] }),
1648
+ item.size && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1649
+ /* @__PURE__ */ jsxRuntime.jsx(StyledSeparator, {}),
1650
+ /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body2_400", color: "neutral400", whiteSpace: "nowrap", children: formatFileSize(item.size) })
1651
+ ] })
1652
+ ]
1653
+ }
1654
+ ),
1655
+ onDelete && /* @__PURE__ */ jsxRuntime.jsx(base.IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
1644
1656
  base.Icon,
1645
1657
  {
1646
1658
  iconSource: shoplAssets.DeleteIcon,
@@ -1652,7 +1664,7 @@ var AttachmentItemSingle = ({ item, onDelete }) => {
1652
1664
  ] });
1653
1665
  };
1654
1666
  exports.AttachmentItemSingle = AttachmentItemSingle;
1655
- var AttachmentItemMulti = ({ item, children, thumbnail, onDelete }) => {
1667
+ var AttachmentItemMulti = ({ item, children, thumbnail, onClick, onDelete }) => {
1656
1668
  var _a;
1657
1669
  const formatFileSize = (bytes) => {
1658
1670
  if (bytes === 0) {
@@ -1672,19 +1684,21 @@ var AttachmentItemMulti = ({ item, children, thumbnail, onDelete }) => {
1672
1684
  padding: "8px",
1673
1685
  spacing: "spacing08",
1674
1686
  radius: "borderRadius08",
1687
+ onClick,
1675
1688
  onMouseEnter: (e) => {
1676
1689
  e.currentTarget.style.backgroundColor = "rgba(153, 153, 153, 0.05)";
1677
1690
  },
1678
1691
  onMouseLeave: (e) => {
1679
1692
  e.currentTarget.style.backgroundColor = "transparent";
1680
1693
  },
1694
+ style: onClick ? { cursor: "pointer" } : void 0,
1681
1695
  children: [
1682
1696
  thumbnail,
1683
1697
  /* @__PURE__ */ jsxRuntime.jsx(base.StackContainer.Vertical, { flex: "1", align: "flex-start", height: "100%", children: item ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1684
1698
  /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "body1_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
1685
1699
  item.size && /* @__PURE__ */ jsxRuntime.jsx(base.Text, { typography: "caption_400", color: "neutral400", children: formatFileSize((_a = item.size) != null ? _a : 0) })
1686
1700
  ] }) : children }),
1687
- /* @__PURE__ */ jsxRuntime.jsx(base.IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
1701
+ onDelete && /* @__PURE__ */ jsxRuntime.jsx(base.IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsxRuntime.jsx(
1688
1702
  base.Icon,
1689
1703
  {
1690
1704
  iconSource: shoplAssets.DeleteIcon,
package/dist/index.d.cts CHANGED
@@ -299,19 +299,23 @@ interface AttachmentItemData {
299
299
  size?: number;
300
300
  }
301
301
  interface AttachmentListProps {
302
+ onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
302
303
  onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
303
304
  disabled?: boolean;
304
305
  children: React.ReactNode;
305
306
  }
306
307
  interface AttachmentItemSingleProps {
307
308
  item: AttachmentItemData;
309
+ onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
308
310
  onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
311
+ lineClamp?: number;
309
312
  }
310
313
  interface AttachmentItemMultiProps {
311
314
  item?: AttachmentItemData | null;
312
315
  thumbnail?: React.ReactNode;
313
316
  children?: React.ReactNode;
314
317
  onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
318
+ onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
315
319
  }
316
320
  interface AttachmentThumbnailProps {
317
321
  iconSource?: IconSource;
package/dist/index.d.ts CHANGED
@@ -299,19 +299,23 @@ interface AttachmentItemData {
299
299
  size?: number;
300
300
  }
301
301
  interface AttachmentListProps {
302
+ onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
302
303
  onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
303
304
  disabled?: boolean;
304
305
  children: React.ReactNode;
305
306
  }
306
307
  interface AttachmentItemSingleProps {
307
308
  item: AttachmentItemData;
309
+ onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
308
310
  onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
311
+ lineClamp?: number;
309
312
  }
310
313
  interface AttachmentItemMultiProps {
311
314
  item?: AttachmentItemData | null;
312
315
  thumbnail?: React.ReactNode;
313
316
  children?: React.ReactNode;
314
317
  onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void;
318
+ onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
315
319
  }
316
320
  interface AttachmentThumbnailProps {
317
321
  iconSource?: IconSource;
package/dist/index.js CHANGED
@@ -1593,13 +1593,16 @@ var TableComponent = Object.assign(Table, {
1593
1593
  var AttachmentListContext = createContext({});
1594
1594
  var AttachmentList = (_a) => {
1595
1595
  var _b = _a, {
1596
+ onClick,
1596
1597
  onDelete,
1597
1598
  children
1598
1599
  } = _b, rest = __objRest(_b, [
1600
+ "onClick",
1599
1601
  "onDelete",
1600
1602
  "children"
1601
1603
  ]);
1602
1604
  const contextValue = {
1605
+ onClick,
1603
1606
  onDelete
1604
1607
  };
1605
1608
  return /* @__PURE__ */ jsx(AttachmentListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(StackContainer.Horizontal, __spreadProps(__spreadValues({ spacing: "spacing08" }, rest), { children })) });
@@ -1612,7 +1615,7 @@ var StyledSeparator = styled2.div`
1612
1615
  border-radius: 0.5px;
1613
1616
  flex-shrink: 0;
1614
1617
  `;
1615
- var AttachmentItemSingle = ({ item, onDelete }) => {
1618
+ var AttachmentItemSingle = ({ item, onClick, onDelete, lineClamp = 1 }) => {
1616
1619
  const formatFileSize = (bytes) => {
1617
1620
  if (bytes === 0) {
1618
1621
  return "0 Bytes";
@@ -1623,18 +1626,27 @@ var AttachmentItemSingle = ({ item, onDelete }) => {
1623
1626
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
1624
1627
  };
1625
1628
  return /* @__PURE__ */ jsxs(StackContainer.Horizontal, { width: "inherit", align: "center", padding: "0", children: [
1626
- /* @__PURE__ */ jsxs(StackContainer.Horizontal, { align: "center", spacing: "spacing04", children: [
1627
- /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
1628
- item.extension && /* @__PURE__ */ jsxs(Fragment, { children: [
1629
- /* @__PURE__ */ jsx(StyledSeparator, {}),
1630
- /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral400", children: item.extension })
1631
- ] }),
1632
- item.size && /* @__PURE__ */ jsxs(Fragment, { children: [
1633
- /* @__PURE__ */ jsx(StyledSeparator, {}),
1634
- /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral400", children: formatFileSize(item.size) })
1635
- ] })
1636
- ] }),
1637
- /* @__PURE__ */ jsx(IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsx(
1629
+ /* @__PURE__ */ jsxs(
1630
+ StackContainer.Horizontal,
1631
+ {
1632
+ align: "center",
1633
+ spacing: "spacing04",
1634
+ onClick,
1635
+ style: onClick ? { cursor: "pointer" } : void 0,
1636
+ children: [
1637
+ /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral700", lineClamp, textOverflow: "ellipsis", children: item.name }),
1638
+ item.extension && /* @__PURE__ */ jsxs(Fragment, { children: [
1639
+ /* @__PURE__ */ jsx(StyledSeparator, {}),
1640
+ /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral400", children: item.extension })
1641
+ ] }),
1642
+ item.size && /* @__PURE__ */ jsxs(Fragment, { children: [
1643
+ /* @__PURE__ */ jsx(StyledSeparator, {}),
1644
+ /* @__PURE__ */ jsx(Text, { typography: "body2_400", color: "neutral400", whiteSpace: "nowrap", children: formatFileSize(item.size) })
1645
+ ] })
1646
+ ]
1647
+ }
1648
+ ),
1649
+ onDelete && /* @__PURE__ */ jsx(IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsx(
1638
1650
  Icon,
1639
1651
  {
1640
1652
  iconSource: DeleteIcon,
@@ -1646,7 +1658,7 @@ var AttachmentItemSingle = ({ item, onDelete }) => {
1646
1658
  ] });
1647
1659
  };
1648
1660
  var AttachmentItemSingle_default = AttachmentItemSingle;
1649
- var AttachmentItemMulti = ({ item, children, thumbnail, onDelete }) => {
1661
+ var AttachmentItemMulti = ({ item, children, thumbnail, onClick, onDelete }) => {
1650
1662
  var _a;
1651
1663
  const formatFileSize = (bytes) => {
1652
1664
  if (bytes === 0) {
@@ -1666,19 +1678,21 @@ var AttachmentItemMulti = ({ item, children, thumbnail, onDelete }) => {
1666
1678
  padding: "8px",
1667
1679
  spacing: "spacing08",
1668
1680
  radius: "borderRadius08",
1681
+ onClick,
1669
1682
  onMouseEnter: (e) => {
1670
1683
  e.currentTarget.style.backgroundColor = "rgba(153, 153, 153, 0.05)";
1671
1684
  },
1672
1685
  onMouseLeave: (e) => {
1673
1686
  e.currentTarget.style.backgroundColor = "transparent";
1674
1687
  },
1688
+ style: onClick ? { cursor: "pointer" } : void 0,
1675
1689
  children: [
1676
1690
  thumbnail,
1677
1691
  /* @__PURE__ */ jsx(StackContainer.Vertical, { flex: "1", align: "flex-start", height: "100%", children: item ? /* @__PURE__ */ jsxs(Fragment, { children: [
1678
1692
  /* @__PURE__ */ jsx(Text, { typography: "body1_400", color: "neutral700", lineClamp: 1, textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.name }),
1679
1693
  item.size && /* @__PURE__ */ jsx(Text, { typography: "caption_400", color: "neutral400", children: formatFileSize((_a = item.size) != null ? _a : 0) })
1680
1694
  ] }) : children }),
1681
- /* @__PURE__ */ jsx(IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsx(
1695
+ onDelete && /* @__PURE__ */ jsx(IconButton, { sizeVar: "S", styleVar: "GHOST", children: /* @__PURE__ */ jsx(
1682
1696
  Icon,
1683
1697
  {
1684
1698
  iconSource: DeleteIcon,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shoplflow/templates",
3
- "version": "0.1.52",
3
+ "version": "0.1.57",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/index.js",
@@ -91,10 +91,19 @@
91
91
  "react-datepicker": "^7.3.0",
92
92
  "react-dom": "^18.2.0",
93
93
  "simplebar-react": "^3.2.6",
94
- "@shoplflow/hada-assets": "^0.1.8",
95
- "@shoplflow/base": "^0.45.2",
96
- "@shoplflow/utils": "^0.7.0",
97
- "@shoplflow/shopl-assets": "^0.12.27"
94
+ "@shoplflow/base": "^0.45.6",
95
+ "@shoplflow/hada-assets": "^0.1.10",
96
+ "@shoplflow/shopl-assets": "^0.12.31",
97
+ "@shoplflow/utils": "^0.7.2"
98
+ },
99
+ "repository": {
100
+ "type": "git",
101
+ "url": "https://github.com/shopl/shoplflow",
102
+ "directory": "packages/templates"
103
+ },
104
+ "homepage": "https://github.com/shopl/shoplflow#readme",
105
+ "bugs": {
106
+ "url": "https://github.com/shopl/shoplflow/issues"
98
107
  },
99
108
  "scripts": {
100
109
  "type-check": "tsc --noEmit",