@zenkigen-inc/component-ui 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './icon-button';
 export * from './loading';
 export * from './modal';
 export * from './notification-inline';
+export * from './pagination';
 export * from './pagination-select';
 export * from './radio';
 export * from './search';
@@ -18,6 +19,7 @@ export * from './select-sort';
 export * from './tab';
 export * from './table';
 export * from './tag';
+export * from './text-area';
 export * from './text-input';
 export * from './toast';
 export * from './toggle';

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { userColors, typography, buttonColors, focusVisible, iconColors, tagColors, tagLightColors } from '@zenkigen-inc/component-theme';
 import clsx$1, { clsx } from 'clsx';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import aa, { useState, useCallback, useEffect, createContext, useContext, useRef, forwardRef } from 'react';
+import aa, { useState, useCallback, useEffect, createContext, useContext, useRef, useLayoutEffect, forwardRef } from 'react';
 import { iconElements } from '@zenkigen-inc/component-icons';
 
 function _extends() {
@@ -31,7 +31,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$6 = ["size"];
+var _excluded$7 = ["size"];
 var isAsciiString = function isAsciiString(str) {
   return str.charCodeAt(0) < 256;
 };
@@ -39,7 +39,7 @@ function Avatar(_ref) {
   var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var classes = clsx('text-text-textOnColor', 'rounded-full', 'flex items-center justify-center', props.isDisabled ? 'bg-disabled-disabled01' : props.userId ? userColors[props.userId % userColors.length] : 'bg-icon-icon01', (_clsx = {}, _clsx["w-16 h-16 " + typography.label.label1regular] = size === 'x-large', _clsx["w-12 h-12 " + typography.label.label2regular] = size === 'large', _clsx["w-10 h-10 " + typography.label.label2regular] = size === 'medium', _clsx["w-8 h-8 " + typography.label.label4regular] = size === 'small', _clsx["w-6 h-6 " + typography.label.label4regular] = size === 'x-small', _clsx));
   var trimmedFirstName = props.firstName.trim();
   var trimmedLastName = props.lastName.trim();
@@ -70,13 +70,13 @@ function Breadcrumb(_ref) {
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-var _excluded$5 = ["size", "variant"];
+var _excluded$6 = ["size", "variant"];
 function Button(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var baseClasses = clsx('rounded-button', 'flex', 'shrink-0', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, size === 'large' ? typography.label.label1regular : typography.label.label2regular, {
     'h-6 px-2.5': size === 'small'
   }, {
@@ -229,12 +229,12 @@ var useOutsideClick = function useOutsideClick(ref, handler, enabled) {
   }, [ref, enabled, handler]);
 };
 
-var _excluded$4 = ["size"];
+var _excluded$5 = ["size"];
 var Icon = function Icon(_ref) {
   var _ref2;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return /*#__PURE__*/jsx("span", {
     className: clsx('inline-block', 'shrink-0', props.isDisabled ? 'fill-disabled-disabled01' : (_ref2 = {}, _ref2[iconColors.icon01] = props.color === 'icon01', _ref2[iconColors.icon01Dark] = props.color === 'icon01Dark', _ref2[iconColors.icon02] = props.color === 'icon02', _ref2[iconColors.icon02Dark] = props.color === 'icon02Dark', _ref2[iconColors.icon03] = props.color === 'icon03', _ref2[iconColors.icon03Dark] = props.color === 'icon03Dark', _ref2[iconColors.iconOnColor] = props.color === 'iconOnColor', _ref2), {
       'w-3 h-3': size === 'x-small',
@@ -473,13 +473,13 @@ function Heading(props) {
   });
 }
 
-var _excluded$3 = ["size", "variant"];
+var _excluded$4 = ["size", "variant"];
 function IconButton(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var baseClasses = clsx('rounded', 'flex', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, typography.label.label1regular, {
     'h-6 w-6': size === 'small' && !props.isNoPadding
   }, {
@@ -31527,13 +31527,13 @@ Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
-var _excluded$2 = ["state", "size"];
+var _excluded$3 = ["state", "size"];
 function NotificationInline(_ref) {
   var _ref$state = _ref.state,
     state = _ref$state === void 0 ? 'default' : _ref$state,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var wrapperClasses = clsx('rounded', 'text-text-text01', 'flex', 'gap-1', 'items-center', typography.body.body2regular, {
     'bg-background-uiBackgroundError': state === 'attention',
     'bg-background-uiBackgroundWarning': state === 'warning',
@@ -31581,6 +31581,108 @@ function NotificationInline(_ref) {
   });
 }
 
+var PaginationContext = /*#__PURE__*/createContext({
+  currentPage: 0
+});
+
+function PaginationButton(_ref) {
+  var page = _ref.page,
+    _onClick = _ref.onClick;
+  var _useContext = useContext(PaginationContext),
+    currentPage = _useContext.currentPage;
+  return /*#__PURE__*/jsx(Button, {
+    variant: page === currentPage ? 'outline' : 'text',
+    onClick: function onClick() {
+      return _onClick(page);
+    },
+    children: page
+  });
+}
+
+var START_PAGE = 1;
+function Pagination(_ref) {
+  var currentPage = _ref.currentPage,
+    totalPage = _ref.totalPage,
+    _ref$sideNumPagesToSh = _ref.sideNumPagesToShow,
+    sideNumPagesToShow = _ref$sideNumPagesToSh === void 0 ? 3 : _ref$sideNumPagesToSh,
+    _onClick = _ref.onClick;
+  var center = Math.max(currentPage, START_PAGE + 1);
+  center = Math.min(center, totalPage - 1);
+  var start = Math.max(center - sideNumPagesToShow, START_PAGE + 1);
+  var end = Math.min(center + sideNumPagesToShow, totalPage - 1);
+  var offsetStart = center + sideNumPagesToShow >= totalPage ? totalPage - center - sideNumPagesToShow : 0;
+  var offsetEnd = center <= sideNumPagesToShow ? sideNumPagesToShow - center + 1 : 0;
+  var pageList = [];
+  for (var i = start + offsetStart; i <= end + offsetEnd; i++) {
+    pageList.push(i);
+  }
+  var threeDotIconClasses = 'flex h-8 w-8 items-center justify-center gap-1 fill-icon-icon01';
+  return /*#__PURE__*/jsx(PaginationContext.Provider, {
+    value: {
+      currentPage: currentPage
+    },
+    children: /*#__PURE__*/jsxs("ul", {
+      className: "flex gap-2",
+      children: [/*#__PURE__*/jsx("li", {
+        children: /*#__PURE__*/jsx(IconButton, {
+          isDisabled: currentPage === START_PAGE,
+          variant: "text",
+          icon: "angle-left",
+          size: "medium",
+          onClick: function onClick() {
+            return _onClick(currentPage - 1);
+          }
+        })
+      }), /*#__PURE__*/jsx("li", {
+        children: /*#__PURE__*/jsx(PaginationButton, {
+          onClick: function onClick() {
+            return _onClick(START_PAGE);
+          },
+          page: START_PAGE
+        })
+      }), pageList.length !== 0 && pageList[0] !== 2 && /*#__PURE__*/jsx("li", {
+        className: threeDotIconClasses,
+        children: /*#__PURE__*/jsx(Icon, {
+          name: "more",
+          size: "small"
+        })
+      }), pageList.map(function (page, index) {
+        return /*#__PURE__*/jsx("li", {
+          children: /*#__PURE__*/jsx(PaginationButton, {
+            onClick: function onClick() {
+              return _onClick(page);
+            },
+            page: page
+          })
+        }, index);
+      }), pageList.length !== 0 && pageList[pageList.length - 1] !== totalPage - 1 && /*#__PURE__*/jsx("li", {
+        className: threeDotIconClasses,
+        children: /*#__PURE__*/jsx(Icon, {
+          name: "more",
+          size: "small"
+        })
+      }), /*#__PURE__*/jsx("li", {
+        children: /*#__PURE__*/jsx(PaginationButton, {
+          onClick: function onClick() {
+            return _onClick(totalPage);
+          },
+          page: totalPage
+        })
+      }), /*#__PURE__*/jsx("li", {
+        children: /*#__PURE__*/jsx(IconButton, {
+          isDisabled: currentPage === totalPage,
+          variant: "text",
+          icon: "angle-right",
+          size: "medium",
+          onClick: function onClick() {
+            return _onClick(currentPage + 1);
+          }
+        })
+      })]
+    })
+  });
+}
+
 var SelectContext = /*#__PURE__*/createContext({
   size: 'medium',
   setIsOptionListOpen: function setIsOptionListOpen() {
@@ -31599,13 +31701,13 @@ function SelectItem$1(_ref) {
     onChange == null || onChange(option);
     setIsOptionListOpen(false);
   };
-  var listItemClasses = clsx$1('flex w-full items-center');
   var itemClasses = clsx$1('flex', 'items-center', 'w-full', 'h-8', 'px-3', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.inset, typography.label.label2regular, {
     'text-interactive-interactive01 fill-interactive-interactive01 bg-selected-selectedUi': option.id === (selectedOption == null ? void 0 : selectedOption.id),
     'text-interactive-interactive02 fill-icon-icon01 bg-background-uiBackground01': option.id !== (selectedOption == null ? void 0 : selectedOption.id)
   });
   return /*#__PURE__*/jsx("li", {
-    className: listItemClasses,
+    className: "flex w-full items-center",
+    "data-id": option.id,
     children: /*#__PURE__*/jsxs("button", {
       className: itemClasses,
       type: "button",
@@ -31632,6 +31734,7 @@ function SelectItem$1(_ref) {
 function SelectList$1(_ref) {
   var children = _ref.children,
     maxHeight = _ref.maxHeight;
+  var ref = useRef(null);
   var _useContext = useContext(SelectContext),
     size = _useContext.size,
     selectedOption = _useContext.selectedOption,
@@ -31643,6 +31746,19 @@ function SelectList$1(_ref) {
     onChange == null || onChange(null);
     setIsOptionListOpen(false);
   };
+  useLayoutEffect(function () {
+    if (maxHeight && ref.current) {
+      var element = Array.from(ref.current.children || []).find(function (item) {
+        return item.getAttribute('data-id') === (selectedOption == null ? void 0 : selectedOption.id);
+      });
+      if (element) {
+        var wrapRect = ref.current.getBoundingClientRect();
+        var rect = element.getBoundingClientRect();
+        ref.current.scroll(0, rect.top - wrapRect.top - wrapRect.height / 2 + rect.height / 2);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   var listClasses = clsx$1('z-dropdown', 'absolute', 'w-max', 'py-2', 'overflow-y-auto', 'bg-background-uiBackground01', 'rounded', 'shadow-floatingShadow', {
     'top-7': size === 'x-small' || size === 'small',
     'top-9': size === 'medium',
@@ -31655,6 +31771,7 @@ function SelectList$1(_ref) {
     style: {
       maxHeight: maxHeight
     },
+    ref: ref,
     children: [children, placeholder && selectedOption !== null && /*#__PURE__*/jsx("li", {
       children: /*#__PURE__*/jsx("button", {
         className: deselectButtonClasses,
@@ -31905,14 +32022,14 @@ function Radio(_ref) {
   });
 }
 
-var _excluded$1 = ["width", "size"];
+var _excluded$2 = ["width", "size"];
 var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _clsx;
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var classes = clsx('flex', 'items-center', 'rounded-full', 'border', 'border-border-uiBorder02', 'focus-within:border-active-activeInput', {
     'h-8 px-3': size === 'medium'
   }, {
@@ -32207,21 +32324,52 @@ function Tag(_ref) {
   });
 }
 
-var _excluded = ["size"];
+var _excluded$1 = ["size", "isResizable", "isError"];
+var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _clsx;
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$isResizable = _ref.isResizable,
+    isResizable = _ref$isResizable === void 0 ? false : _ref$isResizable,
+    isError = _ref.isError,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var classes = clsx('w-full rounded border outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', (_clsx = {
+    'border-support-supportError': isError && !props.disabled,
+    'hover:border-hover-hoverInput': !props.disabled && !isError,
+    'border-border-uiBorder01 hover:focus-within:border-active-activeInput focus-within:border-active-activeInput text-text-text01': !isError,
+    'bg-disabled-disabled02 border-disabled-disabled02': props.disabled
+  }, _clsx[typography.body.body1regular + " px-2 pt-1.5 pb-2"] = size === 'medium', _clsx["text-4 px-3.5 py-2.5 "] = size === 'large', _clsx['text-support-supportError'] = isError, _clsx['resize-none'] = !isResizable, _clsx));
+  return /*#__PURE__*/jsx("div", {
+    className: "flex",
+    children: /*#__PURE__*/jsx("textarea", _extends({
+      ref: ref,
+      className: classes
+    }, props, {
+      style: {
+        height: props.height
+      }
+    }))
+  });
+});
+TextArea.displayName = 'TextArea';
+
+var _excluded = ["size", "isError", "onClickClearButton"];
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
+    isError = _ref.isError,
+    onClickClearButton = _ref.onClickClearButton,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var inputWrapClasses = clsx('flex items-center gap-2 overflow-hidden rounded border pl-2 pr-3', {
-    'border-border-uiBorder01': !props.isError,
-    'border-support-supportError': props.isError && !props.disabled,
-    'hover:border-hover-hoverInput': !props.disabled && !props.isError,
-    'hover:focus-within:border-active-activeInput': !props.isError,
-    'focus-within:border-active-activeInput': !props.isError,
+    'border-border-uiBorder01': !isError,
+    'border-support-supportError': isError && !props.disabled,
+    'hover:border-hover-hoverInput': !props.disabled && !isError,
+    'hover:focus-within:border-active-activeInput': !isError,
+    'focus-within:border-active-activeInput': !isError,
     'bg-disabled-disabled02 border-disabled-disabled02': props.disabled
   });
-  var inputClasses = clsx('flex-1 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-text03', (_clsx = {}, _clsx[typography.label.label2regular + " pt-1.5 pb-2"] = size === 'medium', _clsx[typography.label.label1regular + " py-2.5"] = size === 'large', _clsx['text-text-text01'] = !props.isError, _clsx['text-support-supportError'] = props.isError, _clsx));
+  var inputClasses = clsx('flex-1 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', (_clsx = {}, _clsx[typography.label.label2regular + " pt-1.5 pb-2"] = size === 'medium', _clsx[typography.label.label1regular + " py-2.5"] = size === 'large', _clsx['text-text-text01'] = !isError, _clsx['text-support-supportError'] = isError, _clsx));
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
     children: [/*#__PURE__*/jsx("input", _extends({
@@ -32229,12 +32377,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       size: 1,
       className: inputClasses,
       onChange: props.onChange
-    }, props)), props.onClickClearButton && props.value && props.value.length !== 0 && !props.disabled && /*#__PURE__*/jsx(IconButton, {
+    }, props)), onClickClearButton && props.value && props.value.length !== 0 && !props.disabled && /*#__PURE__*/jsx(IconButton, {
       variant: "text",
       icon: "close",
       size: "small",
       isNoPadding: true,
-      onClick: props.onClickClearButton
+      onClick: onClickClearButton
     })]
   });
 });
@@ -32517,5 +32665,5 @@ function Tooltip(_ref) {
   });
 }
 
-export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, PaginationSelect, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, TextInput, Toast, ToastProvider, Toggle, Tooltip, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, useToast };
 //# sourceMappingURL=index.esm.js.map