@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/wizard/__stories__/Wizard.stories.js

@@ -0,0 +1,81 @@
+import Wizard from '../Wizard';
+
+const metadata = {
+  title: 'Wizard/Wizard',
+  component: Wizard,
+  decorators: [
+    (Story) => (
+      <div style={{ color: '#ffffff' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    navNames: {
+      description: 'It is a array, include title name of Wizard',
+    },
+    defaultStep: {
+      description: 'Default step',
+    },
+    children: {
+      description: 'Each title name of Wizard has each content',
+    },
+    clickableSteps: {
+      description: 'It is boolean, can click step or not',
+    },
+    beforeNext: {
+      description:
+        'A asynchronous callback, called when trigger change to next step,if callback return promise resolve result,Wizard component will proceed to the next step',
+    },
+    beforePrevious: {
+      description:
+        'A asynchronous callback, called when trigger change to previous step,if callback return promise resolve result,Wizard component will proceed to the previous step',
+    },
+  },
+};
+
+const Information = () => {
+  return <>Information content</>;
+};
+const License = () => {
+  return <>License content</>;
+};
+const Firmware = () => {
+  return <>Firmware content</>;
+};
+const Application = () => {
+  return <>Application content</>;
+};
+
+const Template = ({ beforeNext, beforePrevious, ...args }) => {
+  const handleBeforeNext = async () => {
+    beforeNext();
+  };
+
+  const handlePrevious = async () => {
+    beforePrevious();
+  };
+
+  return (
+    <Wizard
+      {...args}
+      beforeNext={handleBeforeNext}
+      beforePrevious={handlePrevious}
+    >
+      <Information />
+      <License />
+      <Firmware />
+      <Application />
+    </Wizard>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  navNames: ['Information', 'License', 'Firmware', 'Application'],
+  defaultStep: 2,
+  clickableSteps: true,
+};
+
+export default metadata;
+export { Default };

package/src/wizard/__test__/Wizard.test.js

@@ -0,0 +1,173 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import 'jest-styled-components';
+import Wizard from '../Wizard';
+import userEvent from '@testing-library/user-event';
+
+describe('test Wizard', () => {
+  const stepNames = ['Information', 'License', 'Firmware', 'Application'];
+
+  test('render Wizard', () => {
+    render(
+      <Wizard navNames={stepNames} defaultStep={1}>
+        <div>Information</div>
+        <div>License</div>
+        <div>Firmware</div>
+        <div>Application</div>
+      </Wizard>,
+    );
+
+    const nav = screen.getByRole('list');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveTextContent(stepNames[0]);
+    expect(nav).toHaveTextContent(stepNames[1]);
+    expect(nav).toHaveTextContent(stepNames[2]);
+    expect(nav).toHaveTextContent(stepNames[3]);
+
+    const navItems = screen.getAllByRole('listitem');
+    navItems.forEach((item, index) => {
+      expect(item.textContent).toBe(`${index + 1}${stepNames[index]}`);
+    });
+    expect(navItems[0]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: 'var(--border-radius-l)',
+    });
+    expect(navItems[1]).toHaveStyle({ color: 'var(--font-on-mute)' });
+    expect(navItems[2]).toHaveStyle({ color: 'var(--font-on-mute)' });
+    expect(navItems[3]).toHaveStyle({ color: 'var(--font-on-mute)' });
+
+    const steps = screen.getAllByTestId('step');
+    expect(steps[0]).toHaveStyle('display: block');
+    expect(steps[1]).toHaveStyle('display: none');
+    expect(steps[2]).toHaveStyle('display: none');
+    expect(steps[3]).toHaveStyle('display: none');
+  });
+
+  test('change step', () => {
+    render(
+      <Wizard navNames={stepNames} defaultStep={1} clickableSteps={true}>
+        <div>Information</div>
+        <div>License</div>
+        <div>Firmware</div>
+        <div>Application</div>
+      </Wizard>,
+    );
+
+    const navItems = screen.getAllByRole('listitem');
+    userEvent.click(navItems[2]);
+
+    expect(navItems[0]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: 'var(--border-radius-l) 0 0 var(--border-radius-l)',
+    });
+    expect(navItems[1]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+    });
+    expect(navItems[2]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: '0 var(--border-radius-l) var(--border-radius-l) 0',
+    });
+    expect(navItems[3]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+
+    const steps = screen.getAllByTestId('step');
+    expect(steps[0]).toHaveStyle('display: none');
+    expect(steps[1]).toHaveStyle('display: none');
+    expect(steps[2]).toHaveStyle('display: block');
+    expect(steps[3]).toHaveStyle('display: none');
+  });
+
+  test('change step if using beforeNext and beforePrevious function', async () => {
+    const handleBeforeNext = jest.fn();
+    const handleBeforePrevious = jest.fn();
+
+    handleBeforeNext.mockImplementation(() => {
+      return Promise.resolve();
+    });
+
+    handleBeforePrevious.mockImplementation(() => {
+      return Promise.resolve();
+    });
+
+    render(
+      <Wizard
+        navNames={stepNames}
+        defaultStep={1}
+        clickableSteps={true}
+        beforeNext={handleBeforeNext}
+        beforePrevious={handleBeforePrevious}
+      >
+        <div>Information</div>
+        <div>License</div>
+        <div>Firmware</div>
+        <div>Application</div>
+      </Wizard>,
+    );
+
+    const navItems = screen.getAllByRole('listitem');
+    // test beforeNext function
+    userEvent.click(navItems[2]);
+    expect(handleBeforeNext).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      expect(navItems[0]).toHaveStyle({
+        background: 'var(--color-primary)',
+        color: 'var(--font-on-primary)',
+        borderRadius: 'var(--border-radius-l) 0 0 var(--border-radius-l)',
+      });
+    });
+
+    expect(navItems[1]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+    });
+
+    expect(navItems[2]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: '0 var(--border-radius-l) var(--border-radius-l) 0',
+    });
+    expect(navItems[3]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+
+    const steps = screen.getAllByTestId('step');
+    expect(steps[0]).toHaveStyle('display: none');
+    expect(steps[1]).toHaveStyle('display: none');
+    expect(steps[2]).toHaveStyle('display: block');
+    expect(steps[3]).toHaveStyle('display: none');
+
+    // test beforePrevious function
+    userEvent.click(navItems[1]);
+    expect(handleBeforePrevious).toHaveBeenCalledTimes(1);
+
+    await waitFor(() =>
+      expect(navItems[0]).toHaveStyle({
+        background: 'var(--color-primary)',
+        color: 'var(--font-on-primary)',
+        borderRadius: 'var(--border-radius-l) 0 0 var(--border-radius-l)',
+      }),
+    );
+
+    expect(navItems[1]).toHaveStyle({
+      background: 'var(--color-primary)',
+      color: 'var(--font-on-primary)',
+      borderRadius: '0 var(--border-radius-l) var(--border-radius-l) 0',
+    });
+    expect(navItems[2]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+    expect(navItems[3]).toHaveStyle({
+      color: 'var(--font-on-mute)',
+    });
+
+    expect(steps[0]).toHaveStyle('display: none');
+    expect(steps[1]).toHaveStyle('display: block');
+    expect(steps[2]).toHaveStyle('display: none');
+    expect(steps[3]).toHaveStyle('display: none');
+  });
+});

package/src/wizard/index.js

@@ -0,0 +1 @@
+export { default as Wizard } from './Wizard';

package/src/xmleditor/XmlEditor.js

@@ -0,0 +1,25 @@
+import Editor from '@monaco-editor/react';
+import xmlFormat from 'xml-formatter';
+
+const XmlEditor = ({ mode, initialValue, onXmlEditorMounted }) => {
+  return (
+    <>
+      <Editor
+        height='150px'
+        theme='vs-dark'
+        defaultLanguage='xml'
+        defaultValue={
+          initialValue ? xmlFormat(initialValue, { indentation: '  ' }) : ''
+        }
+        options={{
+          readOnly: mode === 'view',
+          minimap: { enabled: false },
+          tabSize: 2,
+        }}
+        onMount={onXmlEditorMounted}
+      />
+    </>
+  );
+};
+
+export default XmlEditor;

package/src/xmleditor/index.js

@@ -0,0 +1 @@
+export { default as XmlEditor } from './XmlEditor';

package/transformer/fileTransformer.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  process(sourceText, sourcePath, options) {
+    return {
+      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
+    };
+  },
+};

package/Tab/TabList.js

@@ -1,155 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _fa = require("react-icons/fa");
-var _button = require("../button");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
-const _excluded = ["children", "wrap"];
-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 MAX_MOVE_PIXEL = 300;
-const TabList = _ref => {
-  let {
-      children,
-      wrap = true
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const wrapperRef = (0, _react.useRef)(null);
-  const [exceedContainerWidth, setExceedContainerWidth] = (0, _react.useState)(false);
-  const [hasPrevious, setHasPrevious] = (0, _react.useState)(false);
-  const [hasNext, setHasNext] = (0, _react.useState)(false);
-  const checkExceedContainerWidth = (0, _react.useCallback)(() => {
-    if (wrapperRef.current) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = wrapperRef.current;
-      let {
-        marginLeft
-      } = getComputedStyle(wrapperRef.current);
-      const currentMarginLeft = Math.abs(parseInt(marginLeft));
-      setHasPrevious(currentMarginLeft > 0);
-      setHasNext(scrollWidth - offsetWidth > 0);
-      setExceedContainerWidth(scrollWidth > offsetWidth - currentMarginLeft);
-    }
-  }, []);
-  const handleResize = (0, _react.useCallback)(() => {
-    checkExceedContainerWidth();
-  }, []);
-  const handleTransitionend = (0, _react.useCallback)(event => {
-    // only allow margin-left transition event
-    if (event && event.propertyName !== 'margin-left') {
-      return;
-    }
-    checkExceedContainerWidth();
-  }, []);
-  const getMovePixel = offsetWidth => {
-    // move 1/3 pixel as default
-    const defaultMovePixel = Math.ceil(offsetWidth / 3);
-    return defaultMovePixel > MAX_MOVE_PIXEL ? MAX_MOVE_PIXEL : defaultMovePixel;
-  };
-  const updateScrollPosition = marginLeft => {
-    wrapperRef.current.style.marginLeft = marginLeft;
-  };
-  const handlePrevious = () => {
-    const {
-      offsetWidth
-    } = wrapperRef.current;
-    const {
-      marginLeft
-    } = getComputedStyle(wrapperRef.current);
-    const currentMarginLeft = Math.abs(parseInt(marginLeft));
-    const availableMovePixel = currentMarginLeft;
-    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
-    if (movePixel > availableMovePixel) {
-      // exceed edge, so move to edge only
-      updateScrollPosition('0px');
-    } else {
-      updateScrollPosition("-".concat(currentMarginLeft - movePixel, "px"));
-    }
-  };
-  const handleNext = () => {
-    const {
-      offsetWidth,
-      scrollWidth
-    } = wrapperRef.current;
-    const {
-      marginLeft
-    } = getComputedStyle(wrapperRef.current);
-    const currentMarginLeft = Math.abs(parseInt(marginLeft));
-    const availableMovePixel = scrollWidth - offsetWidth;
-    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
-    if (movePixel > availableMovePixel) {
-      // exceed edge, so move to edge only
-      updateScrollPosition("-".concat(currentMarginLeft + availableMovePixel, "px"));
-    } else {
-      updateScrollPosition("-".concat(currentMarginLeft + movePixel, "px"));
-    }
-  };
-  (0, _react.useEffect)(() => {
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [wrap, children]);
-  (0, _react.useEffect)(() => {
-    if (wrapperRef.current) {
-      wrapperRef.current.addEventListener('transitionend', handleTransitionend);
-    }
-  }, [wrap]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({
-    role: "tablist",
-    $wrap: wrap
-  }, props), {}, {
-    children: wrap ? children : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabWrapper, {
-        ref: wrapperRef,
-        children: children
-      }), exceedContainerWidth && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Paginate, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-          "aria-label": "Previous",
-          reverse: true,
-          onClick: handlePrevious,
-          iconOnly: true,
-          disabled: !hasPrevious,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleLeft, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
-          "aria-label": "Next",
-          reverse: true,
-          onClick: handleNext,
-          iconOnly: true,
-          disabled: !hasNext,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fa.FaAngleRight, {})
-        })]
-      })]
-    })
-  }));
-};
-const Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  border-bottom: var(--border-width) solid var(--border-color);\n  margin-bottom: var(--spacing);\n\n  ", "\n\n  ", "\n"])), _ref2 => {
-  let {
-    $wrap
-  } = _ref2;
-  return !$wrap && 'white-space: nowrap;';
-}, _ref3 => {
-  let {
-    noMargin
-  } = _ref3;
-  return noMargin && 'margin-bottom: 0;';
-});
-const TabWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: calc(1rem * 2 + 10px * 4 + var(--spacing-xs) * 2);\n  overflow: hidden;\n  margin-left: 0;\n  transition: margin-left 0.3s;\n"])));
-const Paginate = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  > :not(:last-child) {\n    margin-right: var(--spacing-xs);\n  }\n"])));
-var _default = exports.default = TabList;

package/Tab/TabPanel.js

@@ -1,56 +0,0 @@
-"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"])), _ref2 => {
-  let {
-    $display
-  } = _ref2;
-  return $display ? 'block' : 'none';
-});
-var _default = exports.default = TabPanel;

package/Tab/TabTab.js

@@ -1,93 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _utils = require("@cashub/utils");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _TabContext = _interopRequireDefault(require("./subComponent/TabContext"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
-const _excluded = ["children", "name", "title", "onClick"];
-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,
-      title,
-      onClick
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const {
-    selected,
-    onChange,
-    mode,
-    onTitleChange
-  } = (0, _react.useContext)(_TabContext.default);
-  const [isModify, setIsModify] = (0, _react.useState)(false);
-  const [currentTitle, setCurrentTitle] = (0, _react.useState)(title);
-  const handleClick = (0, _react.useCallback)(() => {
-    if (selected !== name) {
-      onChange(name);
-    }
-    if (onClick && typeof onClick === 'function') {
-      onClick();
-    }
-  }, [name, selected, onChange, onClick]);
-  const handleDoubleClick = () => {
-    if (mode !== 'modify') return;
-    setIsModify(true);
-  };
-  const handleBlur = () => {
-    onTitleChange(name, currentTitle);
-    setIsModify(false);
-  };
-  const handleKeyUp = event => {
-    const key = event.keyCode;
-    if (key === _utils.KEY_CODE.ENTER) {
-      onTitleChange(name, currentTitle);
-      setIsModify(false);
-    }
-  };
-  return isModify ? /*#__PURE__*/(0, _jsxRuntime.jsx)(InputTab, {
-    role: "tab",
-    type: "text",
-    value: currentTitle,
-    onChange: event => {
-      setCurrentTitle(event.target.value);
-    },
-    onBlur: handleBlur,
-    onKeyUp: handleKeyUp,
-    autoFocus: true
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonTab, _objectSpread(_objectSpread({
-    role: "tab",
-    onClick: handleClick,
-    onDoubleClick: handleDoubleClick,
-    active: selected === name
-  }, props), {}, {
-    children: children
-  }));
-};
-const Tab = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  padding: 10px var(--spacing-s);\n  border: none;\n  border-bottom: 4px solid transparent;\n"])));
-const ButtonTab = (0, _styledComponents.default)(Tab).attrs({
-  as: 'button'
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: var(--font-on-mute);\n  transition: color 0.3s, border 0.3s;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--font-on-background);\n  }\n\n  ", "\n"])), _ref2 => {
-  let {
-    active
-  } = _ref2;
-  return active && "\n      border-color: var(--color-primary);\n      color: var(--font-on-background);\n    ";
-});
-const InputTab = (0, _styledComponents.default)(Tab).attrs({
-  as: 'input'
-})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n  border-color: var(--color-primary);\n  outline: none;\n"])));
-var _default = exports.default = TabTab;

package/Tab/index.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TabV2 = void 0;
-var _Tab = _interopRequireDefault(require("./Tab"));
-var _TabList = _interopRequireDefault(require("./TabList"));
-var _TabTab = _interopRequireDefault(require("./TabTab"));
-var _TabPanel = _interopRequireDefault(require("./TabPanel"));
-var _TabListV = _interopRequireDefault(require("./subComponent/TabListV2"));
-var _TabTabV = _interopRequireDefault(require("./subComponent/TabTabV2"));
-var _TabPanelV = _interopRequireDefault(require("./subComponent/TabPanelV2"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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); }
-var _default = exports.default = Object.assign(_Tab.default, {
-  List: _TabList.default,
-  Tab: _TabTab.default,
-  Panel: _TabPanel.default
-});
-const TabV2Base = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, _objectSpread({}, props));
-};
-const TabV2 = exports.TabV2 = Object.assign(TabV2Base, {
-  List: _TabListV.default,
-  Tab: _TabTabV.default,
-  Panel: _TabPanelV.default
-});

package/Tab/subComponent/TabListV2.js

@@ -1,32 +0,0 @@
-"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 TabListV2 = _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  display: flex;\n  flex-wrap: wrap;\n"])));
-var _default = exports.default = TabListV2;