@trackunit/react-filter-components 0.0.44 → 0.0.45-alpha-0b53b6cf53.0

package/index.cjs

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactComponents = require('@trackunit/react-components');
+var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/**
+ * The Filter component is the base component used in the manager to filter data.
+ *
+ * - This component in generic and does not have any connection to the data.
+ * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ * - Color and size has special default values in this component, but can be overridden if needed.
+ *
+ * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
+ *
+ * @param {FilterProps} props - The props for the Filter component
+ * @returns {JSX.Element} Filter component
+ */
+const Filter = (_a) => {
+    var { title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false, readOnly } = _a, rest = __rest(_a, ["title", "children", "popoverProps", "isActive", "activeLabel", "menuListProps", "className", "dataTestId", "withStickyHeader", "readOnly"]);
+    const buttonProps = Object.assign({}, rest);
+    return (jsxRuntime.jsx(reactComponents.Popover, Object.assign({ dataTestId: dataTestId && `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { render: () => (jsxRuntime.jsx(CustomMenuList, Object.assign({ withStickyHeader: withStickyHeader, dataTestId: dataTestId && `${dataTestId}-menulist` }, menuListProps, { children: children }))) }, { children: jsxRuntime.jsxs(CustomButton, Object.assign({ color: "tertiary", size: "small", dataTestId: dataTestId, disabled: readOnly }, buttonProps, { "$isActive": isActive, className: className }, { children: [title, " ", isActive && jsxRuntime.jsx(ActiveLabel, { children: activeLabel })] })) })));
+};
+const CustomButton = tailwindStyledComponents.twx(reactComponents.Button) `
+  ${({ $isActive }) => ($isActive ? tailwindStyledComponents.tws `!border-primary-600` : "")}
+`;
+const CustomMenuList = tailwindStyledComponents.twx(reactComponents.MenuList) `
+  overflow-x-hidden
+  overflow-y-auto
+  relative
+`;
+const ActiveLabel = tailwindStyledComponents.tw.span `
+  text-primary-600
+`;
+
+/**
+ * The FilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {FilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+const FilterItem = (_a) => {
+    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
+    const checkboxProps = Object.assign({}, rest);
+    const checkboxRef = React.useRef(null);
+    return (jsxRuntime.jsx(reactComponents.MenuItem, Object.assign({ onClick: e => {
+            var _a;
+            e.preventDefault();
+            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: className, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsxRuntime.jsx("small", { children: itemCount }) }, { children: jsxRuntime.jsx(reactComponents.Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: dataTestId && `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+};
+
+/**
+ * The FilterHeader component is used to display the title of the filter and a reset button.
+ * IT is intended for use in the Filter component.
+ * The reset button will only be visible if the showReset prop is set to true.
+ *
+ * @param {FilterHeaderProps} props - The props for the FilterHeader component
+ * @returns {JSX.Element} FilterHeader component
+ */
+const FilterHeader = (_a) => {
+    var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
+    return (jsxRuntime.jsxs(Root$1, Object.assign({}, rest, { "data-testid": dataTestId }, { children: [jsxRuntime.jsxs(HeadingContainer, { children: [jsxRuntime.jsx("h4", { children: title }), loading ? (jsxRuntime.jsx(reactComponents.Spinner, { size: "small" })) : (jsxRuntime.jsx(HiddenButton, Object.assign({ "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset }, { children: resetLabel })))] }), children] })));
+};
+const HeadingContainer = tailwindStyledComponents.tw.div `
+  flex
+  items-center
+  pl-1
+  justify-between
+  font-medium
+  text-sm
+  text-slate-600
+  uppercase
+`;
+const HiddenButton = tailwindStyledComponents.twx(reactComponents.Button) `
+  ${props => (props.$isVisible ? tailwindStyledComponents.tws `visible` : tailwindStyledComponents.tws `invisible`)}
+`;
+const Root$1 = tailwindStyledComponents.tw.div `
+  grid
+  gap-1
+  p-1
+`;
+
+/**
+ * The FilterBody component is used to display the title of the filter and a reset button.
+ * IT is intended for use in the Filter component.
+ * The reset button will only be visible if the showReset prop is set to true.
+ *
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
+ */
+const FilterBody = React__default["default"].forwardRef((_a, ref) => {
+    var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
+    return (jsxRuntime.jsx(Root, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId }, { children: children })));
+});
+const Root = tailwindStyledComponents.tw.div `
+  grid
+  gap-1
+  p-1
+  rounded
+  ${props => props.$limitSize
+    ? tailwindStyledComponents.tws `
+          overflow-hidden
+          max-h-80
+          max-w-sm
+          overflow-y-auto
+        `
+    : ""}
+`;
+
+exports.Filter = Filter;
+exports.FilterBody = FilterBody;
+exports.FilterHeader = FilterHeader;
+exports.FilterItem = FilterItem;

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@trackunit/react-filter-components",
-  "version": "0.0.44",
+  "version": "0.0.45-alpha-0b53b6cf53.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-components": "0.1.64",
+    "@trackunit/react-components": "0.1.65-alpha-0b53b6cf53.0",
     "react": "18.2.0",
     "@trackunit/tailwind-styled-components": "0.0.54",
     "jest-canvas-mock": "2.4.0"
   },
   "module": "./index.js",
-  "main": "./index.js",
+  "main": "./index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",
   "peerDependencies": {}