@shoplflow/templates 0.2.14 → 0.2.16

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var base = require('@shoplflow/base');
-var React6 = require('react');
+var React2 = require('react');
 var styled2 = require('@emotion/styled');
 var shoplAssets = require('@shoplflow/shopl-assets');
 var jsxRuntime = require('react/jsx-runtime');
@@ -12,7 +12,7 @@ var utils = require('@shoplflow/utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React6__default = /*#__PURE__*/_interopDefault(React6);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 var styled2__default = /*#__PURE__*/_interopDefault(styled2);
 
 var __defProp = Object.defineProperty;
@@ -64,9 +64,9 @@ var StyledRequired = styled2__default.default.div`
   line-height: 18px;
   padding-top: 1px;
 `;
-var TitleGroupContext = React6.createContext(null);
+var TitleGroupContext = React2.createContext(null);
 var useTitleGroupContext = () => {
-  const context = React6.useContext(TitleGroupContext);
+  const context = React2.useContext(TitleGroupContext);
   return context != null ? context : { depth: 1 };
 };
 var TitleGroupHelpIcon = ({
@@ -126,9 +126,9 @@ TitleGroup.Header = Header;
 TitleGroup.Actions = Actions;
 TitleGroup.Description = Description;
 exports.TitleGroup = TitleGroup;
-var TableContext = React6.createContext(void 0);
+var TableContext = React2.createContext(void 0);
 var useTable = () => {
-  const context = React6.useContext(TableContext);
+  const context = React2.useContext(TableContext);
   if (!context) {
     throw new Error("useTable must be used within a TableProvider");
   }
@@ -523,7 +523,7 @@ var PAGE_SIZE = [
   { key: "100", label: "100" }
 ];
 var useIntersectionObserver = (target, callback, options) => {
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (!target.current) {
       return;
     }
@@ -544,8 +544,8 @@ var TablePagination = ({
 }) => {
   const { table, headerRef, bodyRef, tableScrollRef, footerRef, hasFilterBar, hasToolbar } = useTable();
   const { pageSize, pageIndex } = table.getState().pagination;
-  const [isEndOfPage, setIsEndOfPage] = React6.useState(false);
-  const handleScroll = React6.useCallback(() => {
+  const [isEndOfPage, setIsEndOfPage] = React2.useState(false);
+  const handleScroll = React2.useCallback(() => {
     if (!headerRef.current || !bodyRef.current || !tableScrollRef.current) {
       return;
     }
@@ -553,7 +553,7 @@ var TablePagination = ({
     headerRef.current.scrollLeft = scrollLeft;
     bodyRef.current.scrollLeft = scrollLeft;
   }, []);
-  const onIntersect = React6.useCallback(
+  const onIntersect = React2.useCallback(
     (entries) => {
       const entry = entries[0];
       entry.isIntersecting ? setIsEndOfPage(true) : setIsEndOfPage(false);
@@ -565,7 +565,7 @@ var TablePagination = ({
     threshold: 1,
     rootMargin: "0px 0px -1px"
   });
-  const handlePageChange = React6.useCallback(
+  const handlePageChange = React2.useCallback(
     (updater) => {
       const newPage = typeof updater === "function" ? updater(pageIndex) : updater;
       table.setPageIndex(newPage);
@@ -573,7 +573,7 @@ var TablePagination = ({
     },
     [pageIndex, pageSize, table, setCurrentPage]
   );
-  const handlePageSizeChange = React6.useCallback(
+  const handlePageSizeChange = React2.useCallback(
     (value) => {
       const newSize = Number(value);
       table.setPageSize(newSize);
@@ -593,10 +593,10 @@ var TablePagination = ({
     };
     return /* @__PURE__ */ jsxRuntime.jsx("col", { style }, column.id);
   }) });
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     table.setPageSize(defaultPageSize);
   }, [defaultPageSize, table]);
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     table.setPageIndex(currentPage != null ? currentPage : 0);
   }, [table, currentPage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(BottomContainer, { ref: footerRef, isEndOfPage, hasFilterBar, hasToolbar, children: [
@@ -629,10 +629,10 @@ var TablePagination = ({
     ] })
   ] });
 };
-var TableFilterBar = React6.memo(({ outsideFilters }) => {
+var TableFilterBar = React2.memo(({ outsideFilters }) => {
   const { table, setFilterValue, hasToolbar } = useTable();
   const filters = table.getState().columnFilters;
-  const prevFiltersRef = React6.useRef();
+  const prevFiltersRef = React2.useRef();
   const onSearch = (value) => {
     setFilterValue(value);
     table.resetColumnFilters();
@@ -667,7 +667,7 @@ var TableFilterBar = React6.memo(({ outsideFilters }) => {
     const filterOption = column.columnDef.meta.filterOptions.find((option) => option.value === value);
     return filterOption ? filterOption.label : value;
   };
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     const validFilters = outsideFilters == null ? void 0 : outsideFilters.filter((item) => item.value !== void 0 && item.value !== "").map((item) => ({ id: item.id, value: item.value }));
     if (!lodashEs.isEqual(prevFiltersRef.current, validFilters)) {
       prevFiltersRef.current = validFilters;
@@ -742,14 +742,14 @@ var Table = ({
   onSelectedRowsChange,
   onClickRow
 }) => {
-  const [sorting, setSorting] = React6.useState([]);
-  const [columnFilters, setColumnFilters] = React6.useState([]);
-  const [globalFilter, setGlobalFilter] = React6.useState([]);
-  const [columnVisibility, setColumnVisibility] = React6.useState({});
-  const [columnPinning, setColumnPinning] = React6.useState({});
-  const [rowSelection, setRowSelection] = React6.useState({});
-  const [filterValue, setFilterValue] = React6.useState("");
-  const visibleColumns = React6.useMemo(() => columns.filter((column) => {
+  const [sorting, setSorting] = React2.useState([]);
+  const [columnFilters, setColumnFilters] = React2.useState([]);
+  const [globalFilter, setGlobalFilter] = React2.useState([]);
+  const [columnVisibility, setColumnVisibility] = React2.useState({});
+  const [columnPinning, setColumnPinning] = React2.useState({});
+  const [rowSelection, setRowSelection] = React2.useState({});
+  const [filterValue, setFilterValue] = React2.useState("");
+  const visibleColumns = React2.useMemo(() => columns.filter((column) => {
     var _a;
     return !((_a = column.meta) == null ? void 0 : _a.hiddenColumn);
   }), [columns]);
@@ -836,16 +836,16 @@ var Table = ({
     manualFiltering,
     manualSorting
   });
-  const headerRef = React6.useRef(null);
-  const bodyRef = React6.useRef(null);
-  const footerRef = React6.useRef(null);
-  const tableScrollRef = React6.useRef(null);
-  const hasToolbar = React6.Children.toArray(children).some((child) => React6.isValidElement(child) && child.type === TableToolbar);
-  const hasPagination = React6.Children.toArray(children).some(
-    (child) => React6.isValidElement(child) && child.type === TablePagination
+  const headerRef = React2.useRef(null);
+  const bodyRef = React2.useRef(null);
+  const footerRef = React2.useRef(null);
+  const tableScrollRef = React2.useRef(null);
+  const hasToolbar = React2.Children.toArray(children).some((child) => React2.isValidElement(child) && child.type === TableToolbar);
+  const hasPagination = React2.Children.toArray(children).some(
+    (child) => React2.isValidElement(child) && child.type === TablePagination
   );
-  const hasFilterBar = React6.Children.toArray(children).some(
-    (child) => React6.isValidElement(child) && child.type === TableFilterBar
+  const hasFilterBar = React2.Children.toArray(children).some(
+    (child) => React2.isValidElement(child) && child.type === TableFilterBar
   );
   const contextValue = {
     table,
@@ -862,7 +862,7 @@ var Table = ({
     filterValue,
     setFilterValue
   };
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (selectedRows.length === 0) {
       table.resetRowSelection();
     }
@@ -876,9 +876,9 @@ var FilterMenu = ({ header, onFilterChange, triggerWidth }) => {
   var _a;
   const columnFilterValue = header.column.getFilterValue();
   const { filterOptions } = (_a = header.column.columnDef.meta) != null ? _a : {};
-  const [maxLabelWidth, setMaxLabelWidth] = React6.useState(0);
-  const labelRefs = React6.useRef([]);
-  React6.useEffect(() => {
+  const [maxLabelWidth, setMaxLabelWidth] = React2.useState(0);
+  const labelRefs = React2.useRef([]);
+  React2.useEffect(() => {
     const widths = labelRefs.current.map((ref) => (ref == null ? void 0 : ref.offsetWidth) || 0);
     setMaxLabelWidth(Math.max(...widths, 0));
   }, [filterOptions]);
@@ -1042,8 +1042,8 @@ var TableHeadTrigger = ({
   );
 };
 var TableHeadCell = ({ header, onFilterChange, onSortChange }) => {
-  const tableHeadRef = React6.useRef(null);
-  const [triggerWidth, setTriggerWidth] = React6.useState(0);
+  const tableHeadRef = React2.useRef(null);
+  const [triggerWidth, setTriggerWidth] = React2.useState(0);
   const uniqueClass = `filter-menu-${header.column.id}`;
   const [isOpen, setIsOpen] = utils.useOutsideClick({
     selector: `.${uniqueClass}`
@@ -1052,7 +1052,7 @@ var TableHeadCell = ({ header, onFilterChange, onSortChange }) => {
   const showSortMenu = header.column.getCanSort();
   const hasInteraction = showFilterMenu || showSortMenu;
   const cursorStyle = hasInteraction ? "pointer" : "default";
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     if (tableHeadRef.current) {
       setTriggerWidth(tableHeadRef.current.clientWidth);
     }
@@ -1123,7 +1123,7 @@ var FixedTable = ({ tableState }) => {
     maxHeight = "100%",
     emptyRowCount = 8
   } = tableState;
-  const handleScroll = React6.useCallback(() => {
+  const handleScroll = React2.useCallback(() => {
     if (!bodyRef.current) {
       return;
     }
@@ -1242,7 +1242,7 @@ var FixedTable = ({ tableState }) => {
                     const isPinned = cell.column.getIsPinned();
                     const isLastLeftPinned = isPinned === "left" && cell.column.getIsLastColumn("left");
                     const isFirstRightPinned = isPinned === "right" && cell.column.getIsFirstColumn("right");
-                    return /* @__PURE__ */ jsxRuntime.jsx(React6.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    return /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
                       TableCell,
                       {
                         "data-last-left-pinned": isLastLeftPinned,
@@ -1287,14 +1287,14 @@ var ResizableTable = ({ tableState }) => {
     maxHeight = "100%",
     emptyRowCount = 8
   } = tableState;
-  const handleScroll = React6.useCallback(() => {
+  const handleScroll = React2.useCallback(() => {
     if (headerRef.current && bodyRef.current && tableScrollRef.current) {
       const scrollLeft = bodyRef.current.scrollLeft;
       headerRef.current.scrollLeft = scrollLeft;
       tableScrollRef.current.scrollLeft = scrollLeft;
     }
   }, []);
-  const columnSizeVars = React6__default.default.useMemo(() => {
+  const columnSizeVars = React2__default.default.useMemo(() => {
     var _a;
     const headers = table.getFlatHeaders();
     const colSizes = {};
@@ -1482,7 +1482,7 @@ var TableMain = ({
 }) => {
   const { table, hasToolbar, hasFilterBar, columnResizing } = useTable();
   const { rows } = table.getRowModel();
-  const scrollToFn = React6.useCallback((offset) => {
+  const scrollToFn = React2.useCallback((offset) => {
     window.scrollTo({
       top: offset - 120,
       behavior: "smooth"
@@ -1507,7 +1507,7 @@ var TableMain = ({
   const paddingTop = displayedRows.length > 0 && hasVirtualRow(displayedRows[0]) ? displayedRows[0].virtualRow.start : 0;
   const lastRow = displayedRows[displayedRows.length - 1];
   const paddingBottom = displayedRows.length > 0 && lastRow && hasVirtualRow(lastRow) ? rowVirtualizer.getTotalSize() - lastRow.virtualRow.end : 0;
-  React6.useEffect(() => {
+  React2.useEffect(() => {
     const pinningState = {
       left: [],
       right: []
@@ -1522,8 +1522,8 @@ var TableMain = ({
   }, []);
   const isEmpty = rows.length === 0;
   let emptyElement;
-  React6__default.default.Children.forEach(children, (child) => {
-    if (React6__default.default.isValidElement(child) && child.type === TableEmpty) {
+  React2__default.default.Children.forEach(children, (child) => {
+    if (React2__default.default.isValidElement(child) && child.type === TableEmpty) {
       emptyElement = child;
     }
   });
@@ -1612,7 +1612,7 @@ exports.Table = Object.assign(Table, {
   Button: exports.TableButton,
   Badge: exports.TableBadge
 });
-var AttachmentListContext = React6.createContext({});
+var AttachmentListContext = React2.createContext({});
 var AttachmentList = (_a) => {
   var _b = _a, {
     onClick,

package/dist/index.js

@@ -1,5 +1,5 @@
 import { colorTokens, IconButton, StackContainer, Icon, Tag, Text, Stack, Pagination, Checkbox, Tooltip, ScrollArea, Popper, Menu } from '@shoplflow/base';
-import React6, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment as Fragment$1 } from 'react';
+import React2, { createContext, memo, useRef, useEffect, useContext, useState, useCallback, useMemo, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import styled2 from '@emotion/styled';
 import { RefreshIcon, CloseSmallIcon, HelpLineIcon, DeleteIcon, DescIcon, AscIcon, MoreIcon, UpArrowSolidXsmallIcon, DownArrowSolidXsmallIcon } from '@shoplflow/shopl-assets';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
@@ -1288,7 +1288,7 @@ var ResizableTable = ({ tableState }) => {
       tableScrollRef.current.scrollLeft = scrollLeft;
     }
   }, []);
-  const columnSizeVars = React6.useMemo(() => {
+  const columnSizeVars = React2.useMemo(() => {
     var _a;
     const headers = table.getFlatHeaders();
     const colSizes = {};
@@ -1516,8 +1516,8 @@ var TableMain = ({
   }, []);
   const isEmpty = rows.length === 0;
   let emptyElement;
-  React6.Children.forEach(children, (child) => {
-    if (React6.isValidElement(child) && child.type === TableEmpty) {
+  React2.Children.forEach(children, (child) => {
+    if (React2.isValidElement(child) && child.type === TableEmpty) {
       emptyElement = child;
     }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/templates",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -51,7 +51,6 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "classnames": "^2.3.2",
-    "eslint-plugin-storybook": "9.1.17",
     "storybook": "^10.2.1",
     "storybook-addon-code-editor": "^6.1.3",
     "ts-node": "^10.9.1",
@@ -59,11 +58,6 @@
     "tsup": "7.2.0",
     "typescript": "^5.9.0"
   },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  },
   "dependencies": {
     "@floating-ui/core": "^1.5.0",
     "@floating-ui/react": "^0.26.2",
@@ -77,10 +71,10 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
+    "@shoplflow/base": "^0.46.14",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/shopl-assets": "^0.12.38",
-    "@shoplflow/base": "^0.46.12",
-    "@shoplflow/utils": "^0.8.0"
+    "@shoplflow/utils": "^0.8.0",
+    "@shoplflow/shopl-assets": "^0.12.38"
   },
   "repository": {
     "type": "git",