@charcoal-ui/react-sandbox 4.2.0 → 4.3.0-beta.0

package/dist/components/TextEllipsis/helper.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, ReactText } from 'react';
-export declare const childToString: (child?: ReactText | boolean | {} | null) => string;
+import { ReactNode } from 'react';
+export declare const childToString: (child?: number | string | boolean | {} | null) => string;
 export declare const onlyText: (children: ReactNode) => string;
 //# sourceMappingURL=helper.d.ts.map

package/dist/components/TextEllipsis/helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/TextEllipsis/helper.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAA;AAQd,eAAO,MAAM,aAAa,WAEhB,SAAS,GAAG,OAAO,GAAG,EAAE,GAAG,IAAI,KACtC,MAcF,CAAA;AAED,eAAO,MAAM,QAAQ,aAAc,SAAS,KAAG,MAqB9C,CAAA"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/TextEllipsis/helper.ts"],"names":[],"mappings":"AAEA,OAAO,EAA0C,SAAS,EAAE,MAAM,OAAO,CAAA;AAQzE,eAAO,MAAM,aAAa,WAEhB,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,EAAE,GAAG,IAAI,KAC5C,MAcF,CAAA;AAED,eAAO,MAAM,QAAQ,aAAc,SAAS,KAAG,MAqB9C,CAAA"}

package/dist/components/icons/DotsIcon.d.ts

@@ -4,9 +4,4 @@ interface Props {
 }
 export { DotsIcon as default };
 declare function DotsIcon({ size }: Props): import("react/jsx-runtime").JSX.Element;
-declare namespace DotsIcon {
-    var defaultProps: {
-        size: number;
-    };
-}
 //# sourceMappingURL=DotsIcon.d.ts.map

package/dist/components/icons/DotsIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DotsIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/DotsIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAA;AAE9B,iBAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,2CAehC;kBAfQ,QAAQ"}
+{"version":3,"file":"DotsIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/DotsIcon.tsx"],"names":[],"mappings":"AAEA,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAA;AAE9B,iBAAS,QAAQ,CAAC,EAAE,IAAS,EAAE,EAAE,KAAK,2CAerC"}

package/dist/components/icons/WedgeIcon.d.ts

@@ -8,13 +8,6 @@ interface Props {
     size?: number | string;
     direction: WedgeDirection;
 }
-declare function WedgeIcon({ size, direction }: Props): import("react/jsx-runtime").JSX.Element;
-declare namespace WedgeIcon {
-    var defaultProps: {
-        size: number;
-        white: boolean;
-        lightGray: boolean;
-    };
-}
-export default WedgeIcon;
+export default function WedgeIcon({ size, direction }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=WedgeIcon.d.ts.map

package/dist/components/icons/WedgeIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WedgeIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/WedgeIcon.tsx"],"names":[],"mappings":"AAIA,oBAAY,cAAc;IACxB,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,SAAS,EAAE,cAAc,CAAA;CAC1B;AAED,iBAAwB,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,2CAW3D;kBAXuB,SAAS;;;;;;;eAAT,SAAS"}
+{"version":3,"file":"WedgeIcon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/WedgeIcon.tsx"],"names":[],"mappings":"AAIA,oBAAY,cAAc;IACxB,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,SAAS,EAAE,cAAc,CAAA;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAS,EAAE,SAAS,EAAE,EAAE,KAAK,2CAWhE"}

package/dist/foundation/hooks.d.ts

@@ -19,7 +19,7 @@ export interface ElementSize {
     width: number;
     height: number;
 }
-export declare function useElementSize(ref: React.RefObject<Element>, deps?: any[]): ElementSize | undefined;
+export declare function useElementSize(ref: React.RefObject<Element | null>, deps?: any[]): ElementSize | undefined;
 /**
  * Debounce version of setState with `requestAnimationFrame`
  *

package/dist/foundation/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/foundation/hooks.ts"],"names":[],"mappings":"AAeA,OAAO,QAAQ,WAAW,CAAC;IACzB,SAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAAA;CACnD;AAED;;GAEG;AACH,wBAAgB,eAAe,YAE9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,WAmDrC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAMD,wBAAgB,cAAc,CAC5B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,EAE7B,IAAI,GAAE,GAAG,EAAO,2BAmEjB;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,eAKb,CAAC,UAAS,OAAO,WAgB/D"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/foundation/hooks.ts"],"names":[],"mappings":"AAeA,OAAO,QAAQ,WAAW,CAAC;IACzB,SAAgB,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAAA;CACnD;AAED;;GAEG;AACH,wBAAgB,eAAe,YAE9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,WAmDrC;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAMD,wBAAgB,cAAc,CAC5B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,EAEpC,IAAI,GAAE,GAAG,EAAO,2BAmEjB;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,eAOb,CAAC,UAAS,OAAO,WAgB/D"}

package/dist/index.cjs.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -18,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -389,7 +394,7 @@ function useElementSize(ref, deps = []) {
 }
 function useDebounceAnimationState(defaultValue) {
   const [state, setState] = (0, import_react2.useState)(defaultValue);
-  const timer = (0, import_react2.useRef)();
+  const timer = (0, import_react2.useRef)(void 0);
   const setDebounceState = (0, import_react2.useCallback)((value, force = false) => {
     if (force) {
       setState(value);
@@ -975,41 +980,88 @@ function CarouselButton({
     paddingRight: Math.max(padding, 0),
     paddingBottom: bottom
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(_StyledButton, { type: "button", onClick, hide: !show, style: offsetStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CarouselButtonIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NextIcon, { direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable() }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(_StyledButton, { type: "button", onClick, hide: !show, style: offsetStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CarouselButtonIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NextIcon, { direction: direction === "right" /* Right */ ? "right" /* Right */ : (
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    direction === "left" /* Left */ ? "left" /* Left */ : unreachable()
+  ) }) }) });
 }
 var CAROUSEL_BUTTON_SIZE = 40;
-var CarouselButtonIcon = import_styled_components13.default.div.withConfig({
-  componentId: "ccl__sc-gjlnt0-0"
-})(["display:flex;align-items:center;justify-content:center;width:", "px;height:", "px;border-radius:50%;background-color:", ";transition:0.4s visibility,0.4s opacity,0.2s background-color,0.2s color;color:", ";"], CAROUSEL_BUTTON_SIZE, CAROUSEL_BUTTON_SIZE, ({
+var CarouselButtonIcon = import_styled_components13.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${CAROUSEL_BUTTON_SIZE}px;
+  height: ${CAROUSEL_BUTTON_SIZE}px;
+  border-radius: 50%;
+  background-color: ${({
   theme: theme2
-}) => theme2.color.surface4, ({
+}) => theme2.color.surface4};
+  transition: 0.4s visibility, 0.4s opacity, 0.2s background-color, 0.2s color;
+  color: ${({
   theme: theme2
-}) => theme2.color.text5);
-var Button = import_styled_components13.default.button.withConfig({
-  componentId: "ccl__sc-gjlnt0-1"
-})(["position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0;min-width:40px;border:none;outline:0;background:transparent;cursor:pointer;transition:0.4s visibility,0.4s opacity;z-index:1;&:hover ", "{background-color:", ";color:", ";}&:active ", "{background-color:", ";color:", ";}", ""], CarouselButtonIcon, ({
+}) => theme2.color.text5};
+`;
+var Button = import_styled_components13.default.button`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  min-width: 40px;
+  border: none;
+  outline: 0;
+  background: transparent;
+  cursor: pointer;
+  transition: 0.4s visibility, 0.4s opacity;
+  /* つらい */
+  /* このコンポーネントはCarouselでしか使われてないのでそっちでコンテキストで切る */
+  z-index: 1;
+
+  &:hover ${CarouselButtonIcon} {
+    background-color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.hover), ({
+}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.hover), CarouselButtonIcon, ({
+}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active ${CarouselButtonIcon} {
+    background-color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.press), ({
+}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.press)};
+    color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.press), (p) => p.hide && (0, import_styled_components13.css)(["visibility:hidden;opacity:0;pointer-events:none;"]));
+}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.press)};
+  }
+
+  ${(p) => p.hide && (0, import_styled_components13.css)(["visibility:hidden;opacity:0;pointer-events:none;"])}
+`;
 var _StyledButton = (0, import_styled_components13.default)(Button).withConfig({
-  componentId: "ccl__sc-gjlnt0-2"
+  componentId: "ccl__sc-gjlnt0-0"
 })(["", ""], onlyNonTouchDevice);
-var ScrollHintIcon = (0, import_styled_components13.default)(CarouselButtonIcon).withConfig({
-  componentId: "ccl__sc-gjlnt0-3"
-})(["cursor:pointer;&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}"], ({
+var ScrollHintIcon = (0, import_styled_components13.default)(CarouselButtonIcon)`
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.hover), ({
+}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.hover), ({
+}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active {
+    background-color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.press), ({
+}) => (0, import_utils9.applyEffect)(theme2.color.surface4, theme2.effect.press)};
+    color: ${({
   theme: theme2
-}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.press));
+}) => (0, import_utils9.applyEffect)(theme2.color.text5, theme2.effect.press)};
+  }
+`;
 var onlyNonTouchDevice = (0, import_styled_components13.css)(["@media (hover:none) and (pointer:coarse){display:none;}"]);
 
 // src/components/Carousel/index.tsx
@@ -1208,7 +1260,7 @@ var import_warning = __toESM(require("warning"));
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function DotsIcon({
-  size: size3
+  size: size3 = 16
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { fillRule: "evenodd", d: `M5,14.5 C3.61928813,14.5 2.5,13.3807119 2.5,12 C2.5,10.6192881 3.61928813,9.5 5,9.5
           C6.38071187,9.5 7.5,10.6192881 7.5,12 C7.5,13.3807119 6.38071187,14.5 5,14.5 Z M12,14.5
@@ -1217,9 +1269,6 @@ function DotsIcon({
           C17.6192881,14.5 16.5,13.3807119 16.5,12 C16.5,10.6192881 17.6192881,9.5 19,9.5
           C20.3807119,9.5 21.5,10.6192881 21.5,12 C21.5,13.3807119 20.3807119,14.5 19,14.5 Z`, transform: "translate(-2 -9)" }) });
 }
-DotsIcon.defaultProps = {
-  size: 16
-};
 var StyledSVG = import_styled_components15.default.svg.withConfig({
   componentId: "ccl__sc-1ma336a-0"
 })(["fill:currentColor;"]);
@@ -1228,16 +1277,14 @@ var StyledSVG = import_styled_components15.default.svg.withConfig({
 var import_styled_components16 = __toESM(require("styled-components"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function WedgeIcon({
-  size: size3,
+  size: size3 = 16,
   direction
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledPolyline, { strokeWidth: "2", points: "1,2 5,6 9,2", transform: directionToTransform2(direction) }) });
+  return (
+    // NOTE: directionToTransform depends on the value of viewBox
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledPolyline, { strokeWidth: "2", points: "1,2 5,6 9,2", transform: directionToTransform2(direction) }) })
+  );
 }
-WedgeIcon.defaultProps = {
-  size: 16,
-  white: false,
-  lightGray: false
-};
 function directionToTransform2(direction) {
   switch (direction) {
     case "up" /* Up */:
@@ -1275,7 +1322,10 @@ function usePagerWindow(page, pageCount, pageRangeDisplayed = 7) {
     } else {
       const start = visibleLastPage - (pageRangeDisplayed - 1) + 2;
       return [
+        // 表示範囲が1-7ページを超えるなら、
+        // - 1ページ目は固定で表示する
         visibleFirstPage,
+        // - 2ページ目から現在のページの直前までは省略する
         "...",
         ...Array.from({
           length: 1 + visibleLastPage - start
@@ -1300,7 +1350,11 @@ var Pager_default = (0, import_react9.memo)(function Pager({
   const hasPrev = page > 1;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PagerContainer, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", hidden: !hasPrev, disabled: !hasPrev, onClick: makeClickHandler(Math.max(1, page - 1)), noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }),
-    window2.map((p) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Spacer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DotsIcon, { size: 20 }) }, p) : p === page ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }, p) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }, p)),
+    window2.map((p) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Spacer, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DotsIcon, { size: 20 }) }, p) : p === page ? (
+      // we remove the onClick but don't mark it as disabled to preserve keyboard focus
+      // not doing so causes the focus ring to flicker in and out of existence
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }, p)
+    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text3, { children: p }) }, p)),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CircleButton, { type: "button", hidden: !hasNext, disabled: !hasNext, onClick: makeClickHandler(Math.min(pageCount, page + 1)), noBackground: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(WedgeIcon, { size: 16, direction: "right" /* Right */ }) })
   ] });
 });