visits-style 1.4.3 → 1.4.5

package/dist/components/Modal/index.d.ts

@@ -22,6 +22,11 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
      * @default '0.85rem'
      */
     padding?: string;
+    /**
+     * モーダルの縦並びを設定します。
+     * @default 'center'
+     */
+    verticalAlign?: 'start' | 'center' | 'end';
 }
-export default function Modal({ show, children, timeout, padding, closeModal, closeOnOverlay, closeOnEsc, onExited, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Modal({ show, children, timeout, padding, verticalAlign, closeModal, closeOnOverlay, closeOnEsc, onExited, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
 export declare const ModalContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("../../elements/Box").Props>>;

package/dist/elements/Button/ButtonGroup.d.ts

@@ -64,7 +64,7 @@ declare const _default: import("styled-components").IStyledComponent<"web", {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "page" | "time" | "step" | "true" | "false" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;

package/dist/elements/Content/index.d.ts

@@ -64,7 +64,7 @@ declare const _default: import("styled-components").IStyledComponent<"web", {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "page" | "time" | "step" | "true" | "false" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;

package/dist/elements/Divider/index.d.ts

@@ -64,7 +64,7 @@ declare const _default: import("styled-components").IStyledComponent<"web", {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "page" | "time" | "step" | "true" | "false" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;

package/dist/elements/Placeholder/index.d.ts

@@ -64,7 +64,7 @@ declare const _default: import("styled-components").IStyledComponent<"web", {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date" | undefined;
+    'aria-current'?: boolean | "page" | "time" | "step" | "true" | "false" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;

package/dist/index.cjs.js

@@ -774,6 +774,8 @@ const Popover = React.forwardRef(({
 }, ref) => {
   const [open, setOpen] = React.useState(false);
   const nodeId = react.useId();
+  const openRef = React.useRef(onOpen);
+  const closeRef = React.useRef(onClose);
   const {
     refs,
     floatingStyles,
@@ -791,33 +793,37 @@ const Popover = React.forwardRef(({
     onOpenChange: setOpen,
     whileElementsMounted: react.autoUpdate
   });
-  const handleFocus = (e) => {
+  const handleFocus = React.useCallback((e) => {
     stopPropagation$1(e);
     setOpen(true);
-    if (onOpen)
-      onOpen();
-  };
-  const handleBlur = (e) => {
+  }, []);
+  const handleBlur = React.useCallback((e) => {
     stopPropagation$1(e);
     setOpen(false);
-    if (onClose)
-      onClose();
-  };
+  }, []);
   React.useEffect(() => {
     if (disabled && open) {
       setOpen(false);
     }
   }, [disabled, open]);
+  React.useEffect(() => {
+    if (!open)
+      return;
+    openRef.current?.();
+    return () => closeRef.current?.();
+  }, [open]);
   React.useImperativeHandle(ref, () => ({
     open: handleFocus,
     close: handleBlur
-  }));
+  }), [handleFocus, handleBlur]);
   const {
     getFloatingProps,
     getReferenceProps
   } = react.useInteractions([react.useClick(context, {
     enabled: !disabled
   })]);
+  openRef.current = onOpen;
+  closeRef.current = onClose;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     React.cloneElement(React.Children.only(label), {
       ref: refs.setReference,
@@ -853,6 +859,7 @@ function Modal({
   children,
   timeout = 200,
   padding = "0.85rem",
+  verticalAlign = "center",
   closeModal,
   closeOnOverlay,
   closeOnEsc,
@@ -903,7 +910,7 @@ function Modal({
   exitRef.current = onExited;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal$1, { children: isMounted ? /* @__PURE__ */ jsxRuntime.jsx(Overlay, { lockScroll: true, "data-testid": "vs-modal-overlay", onClick: handleOverlayClose, style: {
     padding
-  }, children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
+  }, $verticalAlign: verticalAlign, children: /* @__PURE__ */ jsxRuntime.jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
     ...rest,
     style: styles,
     onClick: stopPropagation
@@ -912,7 +919,23 @@ function Modal({
 const Overlay = /* @__PURE__ */ styledComponents.styled(react.FloatingOverlay).withConfig({
   displayName: "Modal__Overlay",
   componentId: "sc-pb7lhx-0"
-})(["   display:flex;display:grid;place-items:center;align-items:center;justify-content:center;background:", ";z-index:9997;"], ({
+})(["   display:flex;display:grid;place-items:", ";align-items:", ";justify-content:center;background:", ";z-index:9997;"], ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
   theme
 }) => theme.backdrop);
 const Wrapper$2 = /* @__PURE__ */ styledComponents.styled.div.withConfig({
@@ -1014,7 +1037,7 @@ function Toast({
 const ToastList = /* @__PURE__ */ styledComponents.styled.ul.withConfig({
   displayName: "Toast__ToastList",
   componentId: "sc-8192b2-0"
-})(["display:flex;flex-direction:column;z-index:9999;pointer-events:none;overflow:hidden;li + li{margin-top:", ";}"], ({
+})(["display:flex;flex-direction:column;z-index:9999;overflow:hidden;li + li{margin-top:", ";}"], ({
   $space
 }) => $space);
 

package/dist/index.es.js

@@ -766,6 +766,8 @@ const Popover = forwardRef(({
 }, ref) => {
   const [open, setOpen] = useState(false);
   const nodeId = useId();
+  const openRef = useRef(onOpen);
+  const closeRef = useRef(onClose);
   const {
     refs,
     floatingStyles,
@@ -783,33 +785,37 @@ const Popover = forwardRef(({
     onOpenChange: setOpen,
     whileElementsMounted: autoUpdate
   });
-  const handleFocus = (e) => {
+  const handleFocus = useCallback((e) => {
     stopPropagation$1(e);
     setOpen(true);
-    if (onOpen)
-      onOpen();
-  };
-  const handleBlur = (e) => {
+  }, []);
+  const handleBlur = useCallback((e) => {
     stopPropagation$1(e);
     setOpen(false);
-    if (onClose)
-      onClose();
-  };
+  }, []);
   useEffect(() => {
     if (disabled && open) {
       setOpen(false);
     }
   }, [disabled, open]);
+  useEffect(() => {
+    if (!open)
+      return;
+    openRef.current?.();
+    return () => closeRef.current?.();
+  }, [open]);
   useImperativeHandle(ref, () => ({
     open: handleFocus,
     close: handleBlur
-  }));
+  }), [handleFocus, handleBlur]);
   const {
     getFloatingProps,
     getReferenceProps
   } = useInteractions([useClick(context, {
     enabled: !disabled
   })]);
+  openRef.current = onOpen;
+  closeRef.current = onClose;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     cloneElement(Children.only(label), {
       ref: refs.setReference,
@@ -845,6 +851,7 @@ function Modal({
   children,
   timeout = 200,
   padding = "0.85rem",
+  verticalAlign = "center",
   closeModal,
   closeOnOverlay,
   closeOnEsc,
@@ -895,7 +902,7 @@ function Modal({
   exitRef.current = onExited;
   return /* @__PURE__ */ jsx(Portal$1, { children: isMounted ? /* @__PURE__ */ jsx(Overlay, { lockScroll: true, "data-testid": "vs-modal-overlay", onClick: handleOverlayClose, style: {
     padding
-  }, children: /* @__PURE__ */ jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
+  }, $verticalAlign: verticalAlign, children: /* @__PURE__ */ jsx(Wrapper$2, { ref: refs.setFloating, role: "dialog", ...getFloatingProps({
     ...rest,
     style: styles,
     onClick: stopPropagation
@@ -904,7 +911,23 @@ function Modal({
 const Overlay = /* @__PURE__ */ styled(FloatingOverlay).withConfig({
   displayName: "Modal__Overlay",
   componentId: "sc-pb7lhx-0"
-})(["   display:flex;display:grid;place-items:center;align-items:center;justify-content:center;background:", ";z-index:9997;"], ({
+})(["   display:flex;display:grid;place-items:", ";align-items:", ";justify-content:center;background:", ";z-index:9997;"], ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
+  $verticalAlign
+}) => {
+  if ($verticalAlign === "start")
+    return "flex-start";
+  if ($verticalAlign === "end")
+    return "flex-end";
+  return "center";
+}, ({
   theme
 }) => theme.backdrop);
 const Wrapper$2 = /* @__PURE__ */ styled.div.withConfig({
@@ -1006,7 +1029,7 @@ function Toast({
 const ToastList = /* @__PURE__ */ styled.ul.withConfig({
   displayName: "Toast__ToastList",
   componentId: "sc-8192b2-0"
-})(["display:flex;flex-direction:column;z-index:9999;pointer-events:none;overflow:hidden;li + li{margin-top:", ";}"], ({
+})(["display:flex;flex-direction:column;z-index:9999;overflow:hidden;li + li{margin-top:", ";}"], ({
   $space
 }) => $space);
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "visits-style",
   "repository": "https://github.com/visits-works/visits-style",
   "homepage": "https://github.com/visits-works/visits-style",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -24,10 +24,11 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "styled-components": ">=6.0.2"
+    "styled-components": ">=6.0.5"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.24.5",
+    "@floating-ui/react": "^0.25.0",
+    "eslint-config-react-app": "^7.0.1",
     "polished": "^4.2.2"
   }
 }