@charcoal-ui/react 3.11.0 → 3.13.0-beta.0

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

@@ -13,6 +13,7 @@ export type ModalProps = AriaModalOverlayProps & AriaDialogProps & {
     isOpen: boolean;
     onClose: () => void;
     className?: string;
+    closeButtonAriaLabel?: string;
     /**
      * https://github.com/adobe/react-spectrum/issues/3787
      * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある
@@ -28,6 +29,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     isOpen: boolean;
     onClose: () => void;
     className?: string | undefined;
+    closeButtonAriaLabel?: string | undefined;
     /**
      * https://github.com/adobe/react-spectrum/issues/3787
      * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある
@@ -45,6 +47,7 @@ export declare const ModalContext: React.Context<{
     showDismiss: boolean;
     bottomSheet: BottomSheet;
 }>;
+export declare const ModalCloseButton: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("../IconButton").IconButtonProps & React.RefAttributes<import("../Clickable").ClickableElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>): JSX.Element;
 export declare function ModalDismissButton({ children, ...props }: ButtonProps): JSX.Element | null;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,qBAAqB,EAAW,MAAM,sBAAsB,CAAA;AAErE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAI1D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAO/C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAC1C,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAElC,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAC5C,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;;;;;;;;;;IALC;;;OAGG;;;AAmJP,wBAA0B;AAE1B,eAAO,MAAM,YAAY;IACvB;;OAEG;gBACS,MAAM,cAAc,CAAC,WAAW,CAAC;WACtC,MAAM;mBACC,IAAI;iBACL,OAAO;iBACP,WAAW;EAOxB,CAAA;AAiDF,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,eAOzE;AAQD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,sBAYrE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,qBAAqB,EAAW,MAAM,sBAAsB,CAAA;AAErE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAI1D,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAO/C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAC1C,MAAM,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAElC,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAC5C,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;;;;;;;;;;;IALC;;;OAGG;;;AAsJP,wBAA0B;AAE1B,eAAO,MAAM,YAAY;IACvB;;OAEG;gBACS,MAAM,cAAc,CAAC,WAAW,CAAC;WACtC,MAAM;mBACC,IAAI;iBACL,OAAO;iBACP,WAAW;EAOxB,CAAA;AA8BF,eAAO,MAAM,gBAAgB,2OAiB5B,CAAA;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,eAOzE;AAQD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,sBAYrE"}

package/dist/index.cjs.js

@@ -42,6 +42,7 @@ __export(src_exports, {
   ModalAlign: () => ModalAlign,
   ModalBody: () => ModalBody,
   ModalButtons: () => ModalButtons,
+  ModalCloseButton: () => ModalCloseButton,
   ModalHeader: () => ModalHeader,
   MultiSelect: () => MultiSelect_default,
   MultiSelectGroup: () => MultiSelectGroup,
@@ -239,7 +240,7 @@ var IconButton = (0, import_react3.forwardRef)(function IconButtonInner({
   ...rest
 }, ref) {
   validateIconSize(size, icon);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { "aria-hidden": "true", name: icon }) });
 });
 var IconButton_default = IconButton;
 var StyledIconButton = (0, import_styled_components4.default)(Clickable_default).attrs(styledProps).withConfig({
@@ -996,7 +997,8 @@ var Modal = (0, import_react13.forwardRef)(function ModalInner({
     isDismissable,
     onClose,
     className,
-    isOpen = false
+    isOpen = false,
+    closeButtonAriaLabel = "Close"
   } = props;
   const ref = (0, import_utils8.useObjectRef)(external);
   const {
@@ -1061,7 +1063,7 @@ var Modal = (0, import_react13.forwardRef)(function ModalInner({
     bottomSheet
   }, children: [
     children,
-    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCrossButton, { size: "S", icon: "24/Close", onClick: onClose })
+    isDismissable === true && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalCloseButton, { size: "S", icon: "24/Close", type: "button", "aria-label": closeButtonAriaLabel, onClick: onClose })
   ] }) }) }) }) }));
 });
 var Modal_default = (0, import_react13.memo)(Modal);
@@ -1079,7 +1081,7 @@ var ModalBackground = (0, import_react_spring2.animated)(import_styled_component
 }) => zIndex, ({
   theme
 }) => (0, import_utils7.maxWidth)(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && (0, import_styled_components12.css)(["padding:0;"])));
-var ModalCrossButton = (0, import_styled_components12.default)(IconButton_default).withConfig({
+var ModalCloseButton = (0, import_styled_components12.default)(IconButton_default).withConfig({
   componentId: "ccl__sc-h2bc55-1"
 })(["position:absolute;top:8px;right:8px;color:var(--charcoal-text3);transition:0.2s color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{color:var(--charcoal-text3-hover);}&:active{color:var(--charcoal-text3-press);}}"]);
 function ModalTitle(props) {
@@ -1646,7 +1648,7 @@ var Checkbox = (0, import_react25.forwardRef)(function CheckboxInner({
   const {
     inputProps
   } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
-  const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
+  const isDisabled = props.disabled ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CheckboxRoot, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInput, { type: "checkbox", ...inputProps, readOnly: props.readonly }),
@@ -1659,13 +1661,13 @@ var Checkbox_default = (0, import_react25.memo)(Checkbox);
 var hiddenCss = (0, import_styled_components22.css)(["visibility:hidden;"]);
 var InputRoot = import_styled_components22.default.label.withConfig({
   componentId: "ccl__sc-wrdmwj-0"
-})(["position:relative;display:flex;cursor:pointer;gap:4px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
+})(["position:relative;display:flex;cursor:pointer;gap:4px;&:has(input[readonly]){cursor:default;}&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
 var CheckboxRoot = import_styled_components22.default.div.withConfig({
   componentId: "ccl__sc-wrdmwj-1"
 })(["position:relative;"]);
 var CheckboxInput = import_styled_components22.default.input.withConfig({
   componentId: "ccl__sc-wrdmwj-2"
-})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&:read-only{cursor:default;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], import_styled9.focusVisibleFocusRingCss);
+})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&[readonly]{cursor:default;opacity:0.32;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], import_styled9.focusVisibleFocusRingCss);
 var CheckboxInputOverlay = import_styled_components22.default.div.withConfig({
   componentId: "ccl__sc-wrdmwj-3"
 })(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--charcoal-text5);", ";"], ({
@@ -1797,6 +1799,7 @@ var TranslatedLabel = import_styled_components23.default.div.withConfig({
   ModalAlign,
   ModalBody,
   ModalButtons,
+  ModalCloseButton,
   ModalHeader,
   MultiSelect,
   MultiSelectGroup,