@cashub/ui 0.39.0 → 0.40.1

package/VerticalTab/TabList.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const TabList = _ref => {
+  let {
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({
+    role: "tablist"
+  }, props), {}, {
+    children: children
+  }));
+};
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n  width: 316px;\n  background: var(--color-background2);\n  overflow-y: auto;\n"])));
+var _default = exports.default = TabList;

package/VerticalTab/TabPanel.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["children", "name"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const TabPanel = _ref => {
+  let {
+      children,
+      name
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    selected
+  } = (0, _react.useContext)(_TabContext.default);
+  const [rendered, setRendered] = (0, _react.useState)(false);
+  const tabContent = (0, _react.useMemo)(() => {
+    if (rendered) {
+      return children;
+    }
+    return null;
+  }, [rendered, children]);
+  (0, _react.useEffect)(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, _objectSpread(_objectSpread({
+    role: "tabpanel",
+    $display: selected === name
+  }, props), {}, {
+    children: tabContent
+  }));
+};
+const Panel = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n  position: relative;\n  flex: 1;\n  padding: var(--spacing-s);\n  overflow-y: auto;\n"])), _ref2 => {
+  let {
+    $display
+  } = _ref2;
+  return $display ? 'block' : 'none';
+});
+var _default = exports.default = TabPanel;

package/VerticalTab/TabTab.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+const _excluded = ["children", "name"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const TabTab = _ref => {
+  let {
+      children,
+      name
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    selected,
+    onChange
+  } = (0, _react.useContext)(_TabContext.default);
+  const handleClick = (0, _react.useCallback)(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+  }, [name, selected, onChange]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tab, _objectSpread(_objectSpread({
+    role: "tab",
+    onClick: handleClick,
+    active: selected === name
+  }, props), {}, {
+    children: children
+  }));
+};
+const Tab = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 12px var(--spacing-s);\n  border: none;\n  background: transparent;\n  text-align: left;\n  color: var(--font-on-background);\n  transition: 0.3s;\n  cursor: pointer;\n\n  &:hover {\n    background: var(--color-active);\n    color: var(--color-primary);\n    font-weight: var(--font-bold);\n\n    span {\n      color: var(--color-primary);\n    }\n  }\n\n  ", "\n"])), _ref2 => {
+  let {
+    active
+  } = _ref2;
+  return active && "\n      background: var(--color-active);\n      color: var(--color-primary);\n      font-weight: var(--font-bold);\n\n      span {\n        color: var(--color-primary);\n      }\n    ";
+});
+var _default = exports.default = TabTab;

package/VerticalTab/VerticalTab.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const VerticalTab = _ref => {
+  let {
+    children,
+    height,
+    selected,
+    onChange
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabContext.default.Provider, {
+    value: {
+      selected,
+      onChange
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+      height: height,
+      children: children
+    })
+  });
+};
+const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", ";\n  border-radius: var(--border-radius-s);\n  background: var(--color-background3);\n  overflow: hidden;\n"])), _ref2 => {
+  let {
+    height
+  } = _ref2;
+  return height ? height : '100vh';
+});
+var _default = exports.default = VerticalTab;

package/VerticalTab/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _VerticalTab = _interopRequireDefault(require("./VerticalTab"));
+var _TabList = _interopRequireDefault(require("./TabList"));
+var _TabTab = _interopRequireDefault(require("./TabTab"));
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = Object.assign(_VerticalTab.default, {
+  List: _TabList.default,
+  Tab: _TabTab.default,
+  Panel: _TabPanel.default
+});

package/VerticalTab/subComponent/TabContext.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const TabContext = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = exports.default = TabContext;

package/form/Checkbox.js

@@ -21,11 +21,18 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     text,
     disabled,
     checked,
+    indeterminate,
     onChange,
     noMargin,
     fontSizeBig,
     marginRight
   } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledLabel, {
     htmlFor: htmlFor,
     disabled: disabled,
@@ -34,6 +41,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     fontSizeBig: fontSizeBig,
     marginRight: marginRight,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCheckbox, {
+      ref: inputRef,
       checked: checked,
       type: "checkbox",
       id: htmlFor,
@@ -42,7 +50,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       fontSizeBig: fontSizeBig
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Unchecked, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checked, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
+        children: indeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdRemove, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdDone, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
         children: text
       })]

package/index.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Dropdown: true,
-  Tab: true
+  Tab: true,
+  VerticalTab: true
 };
 Object.defineProperty(exports, "Dropdown", {
   enumerable: true,
@@ -19,6 +20,12 @@ Object.defineProperty(exports, "Tab", {
     return _Tab.default;
   }
 });
+Object.defineProperty(exports, "VerticalTab", {
+  enumerable: true,
+  get: function () {
+    return _VerticalTab.default;
+  }
+});
 var _alert = require("./alert");
 Object.keys(_alert).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -536,6 +543,7 @@ Object.keys(_treeView).forEach(function (key) {
     }
   });
 });
+var _VerticalTab = _interopRequireDefault(require("./VerticalTab"));
 var _wizard = require("./wizard");
 Object.keys(_wizard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.39.0",
+  "version": "0.40.1",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",