visits-style 1.4.7 → 1.4.9

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

@@ -27,6 +27,8 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
     onClose?: () => void;
     /** 開けた場合のコールバック */
     onOpen?: () => void;
+    /** popoverを閉じる処理を手動に設定します */
+    onManualClose?: () => void;
     /** コンテンツを出さない */
     disabled?: boolean;
 }

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

@@ -15,4 +15,4 @@ export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
      */
     color?: ColorType;
 }
-export default function Progress({ value, max, color, ...rest }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export default function Progress({ value, max, color, height, size, ...rest }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs.js

@@ -169,11 +169,11 @@ const Icon = /* @__PURE__ */ styledComponents.styled.span.withConfig({
 }) => theme.border, ({
   $right
 }) => $right ? rightIcon : leftIcon);
-function shouldForwardProp$7(name) {
+function shouldForwardProp$9(name) {
   return name !== "outline" && name !== "error" && name !== "disabled";
 }
 const Wrapper$5 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$7
+  shouldForwardProp: shouldForwardProp$9
 }).withConfig({
   displayName: "TextInput__Wrapper",
   componentId: "sc-1myda3q-1"
@@ -222,11 +222,11 @@ const Textarea = React.forwardRef(({
 ] }));
 Textarea.displayName = "Textarea";
 const Textarea$1 = Textarea;
-function shouldForwardProp$6(name) {
+function shouldForwardProp$8(name) {
   return name !== "error" && name !== "disabled";
 }
 const InputWrapper$2 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$6
+  shouldForwardProp: shouldForwardProp$8
 }).withConfig({
   displayName: "Textarea__InputWrapper",
   componentId: "sc-z9p0uf-0"
@@ -350,11 +350,11 @@ const Select = React.forwardRef(({
 });
 Select.displayName = "Select";
 const Select$1 = Select;
-function shouldForwardProp$5(name) {
+function shouldForwardProp$7(name) {
   return name !== "error" && name !== "disabled" && name !== "inputSize" && name !== "outline";
 }
 const InputWrapper$1 = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$5
+  shouldForwardProp: shouldForwardProp$7
 }).withConfig({
   displayName: "Select__InputWrapper",
   componentId: "sc-gevlx8-0"
@@ -462,11 +462,11 @@ const labelStyle = /* @__PURE__ */ styledComponents.css(["label:before{position:
 }) => onLabel, ({
   theme
 }) => findColorInvert(theme, theme.primary));
-function shouldForwardProp$4(name) {
+function shouldForwardProp$6(name) {
   return name !== "labelTextOn" && name !== "labelTextOff" && name !== "anchorColor" && name !== "background" && name !== "showLabel";
 }
 const InputWrapper = /* @__PURE__ */ styledComponents.styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$4
+  shouldForwardProp: shouldForwardProp$6
 }).withConfig({
   displayName: "Switch__InputWrapper",
   componentId: "sc-1ljdf1-0"
@@ -771,6 +771,7 @@ const Popover = React.forwardRef(({
     x: 0,
     y: 6
   },
+  onManualClose,
   ...rest
 }, ref) => {
   const [open, setOpen] = React.useState(false);
@@ -794,14 +795,12 @@ const Popover = React.forwardRef(({
     onOpenChange: setOpen,
     whileElementsMounted: react.autoUpdate
   });
-  const handleFocus = React.useCallback((e) => {
-    stopPropagation$1(e);
-    setOpen(true);
-  }, []);
   const handleBlur = React.useCallback((e) => {
     stopPropagation$1(e);
+    if (onManualClose)
+      return onManualClose();
     setOpen(false);
-  }, []);
+  }, [onManualClose]);
   React.useEffect(() => {
     if (disabled && open) {
       setOpen(false);
@@ -814,9 +813,9 @@ const Popover = React.forwardRef(({
     return () => closeRef.current?.();
   }, [open]);
   React.useImperativeHandle(ref, () => ({
-    open: handleFocus,
-    close: handleBlur
-  }), [handleFocus, handleBlur]);
+    open: () => setOpen(true),
+    close: () => setOpen(false)
+  }), []);
   const {
     getFloatingProps,
     getReferenceProps
@@ -1050,11 +1049,11 @@ function getColor$1({
   return styledComponents.css(["border-color:", ";border-right-color:", ";border-top-color:", ";"], value, theme.border, theme.border);
 }
 const spin = /* @__PURE__ */ styledComponents.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
-function shouldForwardProp$3(name) {
+function shouldForwardProp$5(name) {
   return name !== "color" && name !== "size" && name !== "borderSize";
 }
 const Spinner = /* @__PURE__ */ styledComponents.styled.div.withConfig({
-  shouldForwardProp: shouldForwardProp$3
+  shouldForwardProp: shouldForwardProp$5
 }).withConfig({
   displayName: "Spinner",
   componentId: "sc-34g0il-0"
@@ -1090,6 +1089,8 @@ function setResponsive({
   }) => setGap(theme.media.mobile, theme.smallGutter));
 }
 const Container = styledComponents.styled.div.withConfig({
+  shouldForwardProp: (name) => name !== "fluid"
+}).withConfig({
   displayName: "Container",
   componentId: "sc-1308ay5-0"
 })(["position:relative;width:100%;", ""], setResponsive);
@@ -1118,7 +1119,12 @@ function setAutoSize({
   const desktopSize = size >= 8 ? sizes[12] : sizes[Math.round(size * 1.5)];
   return styledComponents.css(["", "{flex-basis:", ";max-width:", ";}", "{flex-basis:", ";max-width:", ";}"], mediaDesktop, desktopSize, desktopSize, mediaMobile, mobileSize, mobileSize);
 }
+function shouldForwardProp$4(name) {
+  return name !== "size" && name !== "offset" && name !== "auto";
+}
 const Col = /* @__PURE__ */ styledComponents.styled.div.withConfig({
+  shouldForwardProp: shouldForwardProp$4
+}).withConfig({
   displayName: "Col",
   componentId: "sc-16i9d04-0"
 })(["display:flex;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;padding:", "px;", " ", " ", "{padding:", "px;}", ""], ({
@@ -1189,11 +1195,11 @@ function setColor({
   }
   return styledComponents.css(["background-color:", ";border-color:transparent;color:", ";box-shadow:none;&:hover{color:", ";background-color:", ";}&:active{background-color:", ";}&:focus:not(:active){", "}"], target, invertColor, invertColor, polished.darken(0.05, target), polished.darken(0.1, target), boxShadow("0.1rem", target, 0.5));
 }
-function shouldForwardProp$2(name) {
+function shouldForwardProp$3(name) {
   return name !== "color" && name !== "size" && name !== "outline" && name !== "round" && name !== "icon";
 }
 const Button = styledComponents.styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$2
+  shouldForwardProp: shouldForwardProp$3
 }).withConfig({
   displayName: "Button",
   componentId: "sc-f6cc58-0"
@@ -1208,11 +1214,11 @@ const Button = styledComponents.styled.button.withConfig({
   size
 }) => setSize("font-size", size));
 
-function shouldForwardProp$1(name) {
+function shouldForwardProp$2(name) {
   return name !== "color" && name !== "size" && name !== "pure" && name !== "underline" && name !== "round" && name !== "icon";
 }
 const TextButton = styledComponents.styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$1
+  shouldForwardProp: shouldForwardProp$2
 }).withConfig({
   displayName: "TextButton",
   componentId: "sc-14wzat7-0"
@@ -1263,7 +1269,12 @@ const ButtonGroup = styledComponents.styled.div.withConfig({
 
 const stripedStyle = /* @__PURE__ */ styledComponents.css(["tbody > tr:nth-child(odd){background-color:rgba(0,0,0,0.02);}"]);
 const hoverStyle = /* @__PURE__ */ styledComponents.css(["tbody > tr:hover{background-color:rgba(0,0,0,0.04);}"]);
+function shouldForwardProp$1(name) {
+  return name !== "size" && name !== "full" && name !== "headerStyle" && name !== "bordered" && name !== "striped" && name !== "hover";
+}
 const index$1 = styledComponents.styled.table.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).withConfig({
   displayName: "Table",
   componentId: "sc-1x2nuaf-0"
 })(["", " max-width:100%;margin-bottom:1rem;background-color:transparent;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;td,th{vertical-align:top;padding:0.75rem;", " border-width:0 0 1px;}th{white-space:nowrap;}", " ", " ", ""], ({
@@ -1283,10 +1294,12 @@ function Progress({
   value,
   max,
   color = "primary",
+  height,
+  size,
   ...rest
 }) {
   const percent = React.useMemo(() => value ? Math.round(value / max * 100) : 0, [value, max]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$1, { color, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
+  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$1, { $color: color, $height: height, $size: size, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
     width: `${percent > 100 ? 100 : percent}%`
   } }) });
 }
@@ -1298,14 +1311,14 @@ const Wrapper$1 = /* @__PURE__ */ styledComponents.styled.div.withConfig({
 }) => theme.radius, ({
   theme
 }) => theme.background, ({
-  size,
-  height
-}) => height || setSize("height", size), ({
+  $size,
+  $height
+}) => $height || setSize("height", $size), ({
   theme
 }) => theme.radius, ({
-  color,
+  $color,
   theme
-}) => theme[color] || color);
+}) => theme[$color] || $color);
 
 const index = styledComponents.styled.hr.withConfig({
   displayName: "Divider",

package/dist/index.es.js

@@ -161,11 +161,11 @@ const Icon = /* @__PURE__ */ styled.span.withConfig({
 }) => theme.border, ({
   $right
 }) => $right ? rightIcon : leftIcon);
-function shouldForwardProp$7(name) {
+function shouldForwardProp$9(name) {
   return name !== "outline" && name !== "error" && name !== "disabled";
 }
 const Wrapper$5 = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$7
+  shouldForwardProp: shouldForwardProp$9
 }).withConfig({
   displayName: "TextInput__Wrapper",
   componentId: "sc-1myda3q-1"
@@ -214,11 +214,11 @@ const Textarea = forwardRef(({
 ] }));
 Textarea.displayName = "Textarea";
 const Textarea$1 = Textarea;
-function shouldForwardProp$6(name) {
+function shouldForwardProp$8(name) {
   return name !== "error" && name !== "disabled";
 }
 const InputWrapper$2 = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$6
+  shouldForwardProp: shouldForwardProp$8
 }).withConfig({
   displayName: "Textarea__InputWrapper",
   componentId: "sc-z9p0uf-0"
@@ -342,11 +342,11 @@ const Select = forwardRef(({
 });
 Select.displayName = "Select";
 const Select$1 = Select;
-function shouldForwardProp$5(name) {
+function shouldForwardProp$7(name) {
   return name !== "error" && name !== "disabled" && name !== "inputSize" && name !== "outline";
 }
 const InputWrapper$1 = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$5
+  shouldForwardProp: shouldForwardProp$7
 }).withConfig({
   displayName: "Select__InputWrapper",
   componentId: "sc-gevlx8-0"
@@ -454,11 +454,11 @@ const labelStyle = /* @__PURE__ */ css(["label:before{position:absolute;display:
 }) => onLabel, ({
   theme
 }) => findColorInvert(theme, theme.primary));
-function shouldForwardProp$4(name) {
+function shouldForwardProp$6(name) {
   return name !== "labelTextOn" && name !== "labelTextOff" && name !== "anchorColor" && name !== "background" && name !== "showLabel";
 }
 const InputWrapper = /* @__PURE__ */ styled.span.withConfig({
-  shouldForwardProp: shouldForwardProp$4
+  shouldForwardProp: shouldForwardProp$6
 }).withConfig({
   displayName: "Switch__InputWrapper",
   componentId: "sc-1ljdf1-0"
@@ -763,6 +763,7 @@ const Popover = forwardRef(({
     x: 0,
     y: 6
   },
+  onManualClose,
   ...rest
 }, ref) => {
   const [open, setOpen] = useState(false);
@@ -786,14 +787,12 @@ const Popover = forwardRef(({
     onOpenChange: setOpen,
     whileElementsMounted: autoUpdate
   });
-  const handleFocus = useCallback((e) => {
-    stopPropagation$1(e);
-    setOpen(true);
-  }, []);
   const handleBlur = useCallback((e) => {
     stopPropagation$1(e);
+    if (onManualClose)
+      return onManualClose();
     setOpen(false);
-  }, []);
+  }, [onManualClose]);
   useEffect(() => {
     if (disabled && open) {
       setOpen(false);
@@ -806,9 +805,9 @@ const Popover = forwardRef(({
     return () => closeRef.current?.();
   }, [open]);
   useImperativeHandle(ref, () => ({
-    open: handleFocus,
-    close: handleBlur
-  }), [handleFocus, handleBlur]);
+    open: () => setOpen(true),
+    close: () => setOpen(false)
+  }), []);
   const {
     getFloatingProps,
     getReferenceProps
@@ -1042,11 +1041,11 @@ function getColor$1({
   return css(["border-color:", ";border-right-color:", ";border-top-color:", ";"], value, theme.border, theme.border);
 }
 const spin = /* @__PURE__ */ keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
-function shouldForwardProp$3(name) {
+function shouldForwardProp$5(name) {
   return name !== "color" && name !== "size" && name !== "borderSize";
 }
 const Spinner = /* @__PURE__ */ styled.div.withConfig({
-  shouldForwardProp: shouldForwardProp$3
+  shouldForwardProp: shouldForwardProp$5
 }).withConfig({
   displayName: "Spinner",
   componentId: "sc-34g0il-0"
@@ -1082,6 +1081,8 @@ function setResponsive({
   }) => setGap(theme.media.mobile, theme.smallGutter));
 }
 const Container = styled.div.withConfig({
+  shouldForwardProp: (name) => name !== "fluid"
+}).withConfig({
   displayName: "Container",
   componentId: "sc-1308ay5-0"
 })(["position:relative;width:100%;", ""], setResponsive);
@@ -1110,7 +1111,12 @@ function setAutoSize({
   const desktopSize = size >= 8 ? sizes[12] : sizes[Math.round(size * 1.5)];
   return css(["", "{flex-basis:", ";max-width:", ";}", "{flex-basis:", ";max-width:", ";}"], mediaDesktop, desktopSize, desktopSize, mediaMobile, mobileSize, mobileSize);
 }
+function shouldForwardProp$4(name) {
+  return name !== "size" && name !== "offset" && name !== "auto";
+}
 const Col = /* @__PURE__ */ styled.div.withConfig({
+  shouldForwardProp: shouldForwardProp$4
+}).withConfig({
   displayName: "Col",
   componentId: "sc-16i9d04-0"
 })(["display:flex;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;padding:", "px;", " ", " ", "{padding:", "px;}", ""], ({
@@ -1181,11 +1187,11 @@ function setColor({
   }
   return css(["background-color:", ";border-color:transparent;color:", ";box-shadow:none;&:hover{color:", ";background-color:", ";}&:active{background-color:", ";}&:focus:not(:active){", "}"], target, invertColor, invertColor, darken(0.05, target), darken(0.1, target), boxShadow("0.1rem", target, 0.5));
 }
-function shouldForwardProp$2(name) {
+function shouldForwardProp$3(name) {
   return name !== "color" && name !== "size" && name !== "outline" && name !== "round" && name !== "icon";
 }
 const Button = styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$2
+  shouldForwardProp: shouldForwardProp$3
 }).withConfig({
   displayName: "Button",
   componentId: "sc-f6cc58-0"
@@ -1200,11 +1206,11 @@ const Button = styled.button.withConfig({
   size
 }) => setSize("font-size", size));
 
-function shouldForwardProp$1(name) {
+function shouldForwardProp$2(name) {
   return name !== "color" && name !== "size" && name !== "pure" && name !== "underline" && name !== "round" && name !== "icon";
 }
 const TextButton = styled.button.withConfig({
-  shouldForwardProp: shouldForwardProp$1
+  shouldForwardProp: shouldForwardProp$2
 }).withConfig({
   displayName: "TextButton",
   componentId: "sc-14wzat7-0"
@@ -1255,7 +1261,12 @@ const ButtonGroup = styled.div.withConfig({
 
 const stripedStyle = /* @__PURE__ */ css(["tbody > tr:nth-child(odd){background-color:rgba(0,0,0,0.02);}"]);
 const hoverStyle = /* @__PURE__ */ css(["tbody > tr:hover{background-color:rgba(0,0,0,0.04);}"]);
+function shouldForwardProp$1(name) {
+  return name !== "size" && name !== "full" && name !== "headerStyle" && name !== "bordered" && name !== "striped" && name !== "hover";
+}
 const index$1 = styled.table.withConfig({
+  shouldForwardProp: shouldForwardProp$1
+}).withConfig({
   displayName: "Table",
   componentId: "sc-1x2nuaf-0"
 })(["", " max-width:100%;margin-bottom:1rem;background-color:transparent;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;td,th{vertical-align:top;padding:0.75rem;", " border-width:0 0 1px;}th{white-space:nowrap;}", " ", " ", ""], ({
@@ -1275,10 +1286,12 @@ function Progress({
   value,
   max,
   color = "primary",
+  height,
+  size,
   ...rest
 }) {
   const percent = useMemo(() => value ? Math.round(value / max * 100) : 0, [value, max]);
-  return /* @__PURE__ */ jsx(Wrapper$1, { color, ...rest, children: /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
+  return /* @__PURE__ */ jsx(Wrapper$1, { $color: color, $height: height, $size: size, ...rest, children: /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": "progress", className: value !== max ? "in-progress" : void 0, style: {
     width: `${percent > 100 ? 100 : percent}%`
   } }) });
 }
@@ -1290,14 +1303,14 @@ const Wrapper$1 = /* @__PURE__ */ styled.div.withConfig({
 }) => theme.radius, ({
   theme
 }) => theme.background, ({
-  size,
-  height
-}) => height || setSize("height", size), ({
+  $size,
+  $height
+}) => $height || setSize("height", $size), ({
   theme
 }) => theme.radius, ({
-  color,
+  $color,
   theme
-}) => theme[color] || color);
+}) => theme[$color] || $color);
 
 const index = styled.hr.withConfig({
   displayName: "Divider",

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.7",
+  "version": "1.4.9",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",