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

package/dist/index.esm.js

@@ -1,3 +1,5 @@
+"use client";
+
 // src/components/Filter/index.tsx
 import * as React2 from "react";
 import styled, { css } from "styled-components";
@@ -321,7 +323,7 @@ function useElementSize(ref, deps = []) {
 }
 function useDebounceAnimationState(defaultValue) {
   const [state, setState] = useState(defaultValue);
-  const timer = useRef();
+  const timer = useRef(void 0);
   const setDebounceState = useCallback((value, force = false) => {
     if (force) {
       setState(value);
@@ -854,7 +856,7 @@ import { useLayoutEffect as useLayoutEffect2, useEffect } from "react";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect2 : useEffect;
 
 // src/components/CarouselButton/index.tsx
-import styled12, { css as css8 } from "styled-components";
+import styled12, { css as css8, default as _styled } from "styled-components";
 
 // src/foundation/utils.ts
 function unreachable(value) {
@@ -907,41 +909,88 @@ function CarouselButton({
     paddingRight: Math.max(padding, 0),
     paddingBottom: bottom
   };
-  return /* @__PURE__ */ jsx12(_StyledButton, { type: "button", onClick, hide: !show, style: offsetStyle, children: /* @__PURE__ */ jsx12(CarouselButtonIcon, { children: /* @__PURE__ */ jsx12(NextIcon, { direction: direction === "right" /* Right */ ? "right" /* Right */ : direction === "left" /* Left */ ? "left" /* Left */ : unreachable() }) }) });
+  return /* @__PURE__ */ jsx12(_StyledButton, { type: "button", onClick, hide: !show, style: offsetStyle, children: /* @__PURE__ */ jsx12(CarouselButtonIcon, { children: /* @__PURE__ */ jsx12(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 = styled12.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 = styled12.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 = styled12.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 = styled12.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
-}) => applyEffect2(theme2.color.surface4, theme2.effect.hover), ({
+}) => applyEffect2(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({
   theme: theme2
-}) => applyEffect2(theme2.color.text5, theme2.effect.hover), CarouselButtonIcon, ({
+}) => applyEffect2(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active ${CarouselButtonIcon} {
+    background-color: ${({
   theme: theme2
-}) => applyEffect2(theme2.color.surface4, theme2.effect.press), ({
+}) => applyEffect2(theme2.color.surface4, theme2.effect.press)};
+    color: ${({
   theme: theme2
-}) => applyEffect2(theme2.color.text5, theme2.effect.press), (p) => p.hide && css8(["visibility:hidden;opacity:0;pointer-events:none;"]));
-var _StyledButton = styled12(Button).withConfig({
-  componentId: "ccl__sc-gjlnt0-2"
+}) => applyEffect2(theme2.color.text5, theme2.effect.press)};
+  }
+
+  ${(p) => p.hide && css8(["visibility:hidden;opacity:0;pointer-events:none;"])}
+`;
+var _StyledButton = _styled(Button).withConfig({
+  componentId: "ccl__sc-gjlnt0-0"
 })(["", ""], onlyNonTouchDevice);
-var ScrollHintIcon = styled12(CarouselButtonIcon).withConfig({
-  componentId: "ccl__sc-gjlnt0-3"
-})(["cursor:pointer;&:hover{background-color:", ";color:", ";}&:active{background-color:", ";color:", ";}"], ({
+var ScrollHintIcon = styled12(CarouselButtonIcon)`
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({
   theme: theme2
-}) => applyEffect2(theme2.color.surface4, theme2.effect.hover), ({
+}) => applyEffect2(theme2.color.surface4, theme2.effect.hover)};
+    color: ${({
   theme: theme2
-}) => applyEffect2(theme2.color.text5, theme2.effect.hover), ({
+}) => applyEffect2(theme2.color.text5, theme2.effect.hover)};
+  }
+
+  &:active {
+    background-color: ${({
   theme: theme2
-}) => applyEffect2(theme2.color.surface4, theme2.effect.press), ({
+}) => applyEffect2(theme2.color.surface4, theme2.effect.press)};
+    color: ${({
   theme: theme2
-}) => applyEffect2(theme2.color.text5, theme2.effect.press));
+}) => applyEffect2(theme2.color.text5, theme2.effect.press)};
+  }
+`;
 var onlyNonTouchDevice = css8(["@media (hover:none) and (pointer:coarse){display:none;}"]);
 
 // src/components/Carousel/index.tsx
@@ -1140,7 +1189,7 @@ import warning from "warning";
 import styled14 from "styled-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function DotsIcon({
-  size: size3
+  size: size3 = 16
 }) {
   return /* @__PURE__ */ jsx14(StyledSVG, { viewBox: "0 0 20 6", width: size3, height: size3, children: /* @__PURE__ */ jsx14("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
@@ -1149,9 +1198,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 = styled14.svg.withConfig({
   componentId: "ccl__sc-1ma336a-0"
 })(["fill:currentColor;"]);
@@ -1160,16 +1206,14 @@ var StyledSVG = styled14.svg.withConfig({
 import styled15 from "styled-components";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function WedgeIcon({
-  size: size3,
+  size: size3 = 16,
   direction
 }) {
-  return /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ jsx15(StyledPolyline, { strokeWidth: "2", points: "1,2 5,6 9,2", transform: directionToTransform2(direction) }) });
+  return (
+    // NOTE: directionToTransform depends on the value of viewBox
+    /* @__PURE__ */ jsx15("svg", { viewBox: "0 0 10 8", width: size3, height: size3, children: /* @__PURE__ */ jsx15(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 */:
@@ -1207,7 +1251,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
@@ -1232,7 +1279,11 @@ var Pager_default = memo2(function Pager({
   const hasPrev = page > 1;
   return /* @__PURE__ */ jsxs8(PagerContainer, { children: [
     /* @__PURE__ */ jsx16(CircleButton, { type: "button", hidden: !hasPrev, disabled: !hasPrev, onClick: makeClickHandler(Math.max(1, page - 1)), noBackground: true, children: /* @__PURE__ */ jsx16(WedgeIcon, { size: 16, direction: "left" /* Left */ }) }),
-    window2.map((p) => p === "..." ? /* @__PURE__ */ jsx16(Spacer, { children: /* @__PURE__ */ jsx16(DotsIcon, { size: 20 }) }, p) : p === page ? /* @__PURE__ */ jsx16(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ jsx16(Text3, { children: p }) }, p) : /* @__PURE__ */ jsx16(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ jsx16(Text3, { children: p }) }, p)),
+    window2.map((p) => p === "..." ? /* @__PURE__ */ jsx16(Spacer, { children: /* @__PURE__ */ jsx16(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__ */ jsx16(CircleButton, { type: "button", "aria-current": true, children: /* @__PURE__ */ jsx16(Text3, { children: p }) }, p)
+    ) : /* @__PURE__ */ jsx16(CircleButton, { type: "button", onClick: makeClickHandler(p), children: /* @__PURE__ */ jsx16(Text3, { children: p }) }, p)),
     /* @__PURE__ */ jsx16(CircleButton, { type: "button", hidden: !hasNext, disabled: !hasNext, onClick: makeClickHandler(Math.min(pageCount, page + 1)), noBackground: true, children: /* @__PURE__ */ jsx16(WedgeIcon, { size: 16, direction: "right" /* Right */ }) })
   ] });
 });