@uniformdev/design-system 19.147.1-alpha.3 → 19.149.1-alpha.1

package/dist/esm/index.js

@@ -11923,6 +11923,7 @@ var TooltipContainer = css24`
   color: var(--gray-500);
   font-size: var(--fs-xs);
   background: var(--white);
+  position: relative;
 `;
 var TooltipArrowStyles = css24`
   svg {
@@ -20546,10 +20547,60 @@ var ProgressListItem = ({
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css93 } from "@emotion/react";
 import { CgCheck as CgCheck4 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback10, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect17, useMemo as useMemo6, useRef as useRef9, useState as useState16 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css92 } from "@emotion/react";
+var segmentedControlRootStyles = css92`
+  position: relative;
+`;
+var segmentedControlScrollIndicatorsStyles = css92`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--spacing-sm);
+    background: linear-gradient(to right, var(--background-color) 10%, transparent);
+    opacity: 0;
+    transform-origin: left;
+    transition: opacity var(--duration-xfast) ease-in-out;
+  }
+
+  &::after {
+    right: 0;
+    left: auto;
+    transform-origin: right;
+    background: linear-gradient(to left, var(--background-color) 10%, transparent);
+  }
+`;
+var segmentedControlScrollIndicatorStartVisibleStyles = css92`
+  &::before {
+    opacity: 1;
+  }
+`;
+var segmentedControlScrollIndicatorEndVisibleStyles = css92`
+  &::after {
+    opacity: 1;
+  }
+`;
+var segmentedControlWrapperStyles = css92`
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+`;
 var segmentedControlStyles = css92`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
@@ -20667,7 +20718,9 @@ var segmentedControlLabelContentStyles = css92`
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css92``;
+var segmentedControlLabelTextStyles = css92`
+  white-space: nowrap;
+`;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx121, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
@@ -20682,8 +20735,12 @@ var SegmentedControl = ({
   size = "md",
   hideOptionText = false,
   iconSize = "1.5em",
+  currentBackgroundColor = "white",
   ...props
 }) => {
+  const wrapperRef = useRef9(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState16(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState16(false);
   const onOptionChange = useCallback10(
     (event) => {
       if (event.target.checked) {
@@ -20704,58 +20761,94 @@ var SegmentedControl = ({
   const isIconOnly = useMemo6(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx121(
-    "div",
-    {
-      css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
-      ...props,
-      "data-testid": "segmented-control",
-      children: options.map((option, index) => {
-        var _a;
-        if (!option) {
-          return null;
-        }
-        const text = option.label ? option.label : option.icon ? null : String(option.value);
-        const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx121(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx121(
-          "div",
-          {
-            css: segmentedControlItemStyles,
-            "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
-            children: /* @__PURE__ */ jsxs81(
-              "label",
-              {
-                css: [
-                  segmentedControlLabelStyles(option.value === value, isDisabled),
-                  sizeStyles,
-                  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
-                ],
-                children: [
-                  /* @__PURE__ */ jsx121(
-                    "input",
-                    {
-                      css: segmentedControlInputStyles,
-                      type: "radio",
-                      name,
-                      value: index,
-                      checked: option.value === value,
-                      onChange: onOptionChange,
-                      disabled: isDisabled
-                    }
-                  ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx121(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ jsxs81("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx121(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                    !text || hideOptionText ? null : /* @__PURE__ */ jsx121("span", { css: segmentedControlLabelTextStyles, children: text })
-                  ] })
-                ]
-              }
-            )
+  useEffect17(() => {
+    const wrapperElement = wrapperRef.current;
+    const onScroll = () => {
+      if (!wrapperElement) {
+        return;
+      }
+      const scrollValue = wrapperElement.scrollLeft;
+      const maxScroll = wrapperElement.scrollWidth - wrapperElement.clientWidth;
+      const isScrollable = wrapperElement.scrollWidth >= wrapperElement.clientWidth;
+      const toleranceMargin = 4;
+      const isAtScrollStart = scrollValue < toleranceMargin;
+      const isAtScrollEnd = scrollValue >= maxScroll - toleranceMargin;
+      setIsOverflowStartShadowVisible(isScrollable && !isAtScrollStart);
+      setIsOverflowEndShadowVisible(isScrollable && !isAtScrollEnd);
+    };
+    onScroll();
+    wrapperElement == null ? void 0 : wrapperElement.addEventListener("scroll", onScroll);
+    return () => {
+      wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs81("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
+    /* @__PURE__ */ jsx121("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx121(
+      "div",
+      {
+        css: [
+          segmentedControlStyles,
+          orientation === "vertical" ? segmentedControlVerticalStyles : void 0
+        ],
+        ...props,
+        "data-testid": "segmented-control",
+        children: options.map((option, index) => {
+          var _a;
+          if (!option) {
+            return null;
           }
-        ) }, JSON.stringify(option.value));
-      })
-    }
-  );
+          const text = option.label ? option.label : option.icon ? null : String(option.value);
+          const isDisabled = disabled2 || option.disabled;
+          return /* @__PURE__ */ jsx121(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx121(
+            "div",
+            {
+              css: segmentedControlItemStyles,
+              "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
+              children: /* @__PURE__ */ jsxs81(
+                "label",
+                {
+                  css: [
+                    segmentedControlLabelStyles(option.value === value, isDisabled),
+                    sizeStyles,
+                    isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
+                  ],
+                  children: [
+                    /* @__PURE__ */ jsx121(
+                      "input",
+                      {
+                        css: segmentedControlInputStyles,
+                        type: "radio",
+                        name,
+                        value: index,
+                        checked: option.value === value,
+                        onChange: onOptionChange,
+                        disabled: isDisabled
+                      }
+                    ),
+                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx121(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                    /* @__PURE__ */ jsxs81("span", { css: segmentedControlLabelContentStyles, children: [
+                      !option.icon ? null : /* @__PURE__ */ jsx121(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                      !text || hideOptionText ? null : /* @__PURE__ */ jsx121("span", { css: segmentedControlLabelTextStyles, children: text })
+                    ] })
+                  ]
+                }
+              )
+            }
+          ) }, JSON.stringify(option.value));
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx121(
+      "div",
+      {
+        css: [
+          segmentedControlScrollIndicatorsStyles,
+          isOverflowStartShadowVisible ? segmentedControlScrollIndicatorStartVisibleStyles : null,
+          isOverflowEndShadowVisible ? segmentedControlScrollIndicatorEndVisibleStyles : null
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
@@ -20979,7 +21072,7 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback11, useEffect as useEffect17, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect18, useMemo as useMemo7 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
 import { css as css97 } from "@emotion/react";
@@ -21040,7 +21133,7 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }

package/dist/index.d.mts

@@ -23116,12 +23116,17 @@ type SegmentedControlProps<TValue extends string = string> = Omit<React__default
      * @default '1.5em'
      */
     iconSize?: string;
+    /**
+     * This is used to match the color of the scroll indicators with the background color of the parent.
+     * @default 'white'
+     */
+    currentBackgroundColor?: React__default.CSSProperties['backgroundColor'];
 };
 /**
- * Horizontal control with multiple segments. Can be used as a replacement of radio buttons.
+ * A control with multiple segments. Can be used as a replacement of radio buttons.
  * @example <SegmentedControl name="mySegmentedControl" value={value} options={[{label: 'Option 1', value: 'option1',label: 'Option 2', value: 'option2'}]} onChange={setValue} />
  */
-declare const SegmentedControl: <TValue extends string = string>({ name, options, value, onChange, noCheckmark, disabled, orientation, size, hideOptionText, iconSize, ...props }: SegmentedControlProps<TValue>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const SegmentedControl: <TValue extends string = string>({ name, options, value, onChange, noCheckmark, disabled, orientation, size, hideOptionText, iconSize, currentBackgroundColor, ...props }: SegmentedControlProps<TValue>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare function ShortcutContext({ children }: {
     children: React__default.ReactNode;

package/dist/index.d.ts

@@ -23116,12 +23116,17 @@ type SegmentedControlProps<TValue extends string = string> = Omit<React__default
      * @default '1.5em'
      */
     iconSize?: string;
+    /**
+     * This is used to match the color of the scroll indicators with the background color of the parent.
+     * @default 'white'
+     */
+    currentBackgroundColor?: React__default.CSSProperties['backgroundColor'];
 };
 /**
- * Horizontal control with multiple segments. Can be used as a replacement of radio buttons.
+ * A control with multiple segments. Can be used as a replacement of radio buttons.
  * @example <SegmentedControl name="mySegmentedControl" value={value} options={[{label: 'Option 1', value: 'option1',label: 'Option 2', value: 'option2'}]} onChange={setValue} />
  */
-declare const SegmentedControl: <TValue extends string = string>({ name, options, value, onChange, noCheckmark, disabled, orientation, size, hideOptionText, iconSize, ...props }: SegmentedControlProps<TValue>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const SegmentedControl: <TValue extends string = string>({ name, options, value, onChange, noCheckmark, disabled, orientation, size, hideOptionText, iconSize, currentBackgroundColor, ...props }: SegmentedControlProps<TValue>) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 declare function ShortcutContext({ children }: {
     children: React__default.ReactNode;

package/dist/index.js

@@ -13590,6 +13590,7 @@ var TooltipContainer = import_react31.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
   background: var(--white);
+  position: relative;
 `;
 var TooltipArrowStyles = import_react31.css`
   svg {
@@ -22380,6 +22381,56 @@ var import_react143 = require("react");
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 init_emotion_jsx_shim();
 var import_react141 = require("@emotion/react");
+var segmentedControlRootStyles = import_react141.css`
+  position: relative;
+`;
+var segmentedControlScrollIndicatorsStyles = import_react141.css`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--spacing-sm);
+    background: linear-gradient(to right, var(--background-color) 10%, transparent);
+    opacity: 0;
+    transform-origin: left;
+    transition: opacity var(--duration-xfast) ease-in-out;
+  }
+
+  &::after {
+    right: 0;
+    left: auto;
+    transform-origin: right;
+    background: linear-gradient(to left, var(--background-color) 10%, transparent);
+  }
+`;
+var segmentedControlScrollIndicatorStartVisibleStyles = import_react141.css`
+  &::before {
+    opacity: 1;
+  }
+`;
+var segmentedControlScrollIndicatorEndVisibleStyles = import_react141.css`
+  &::after {
+    opacity: 1;
+  }
+`;
+var segmentedControlWrapperStyles = import_react141.css`
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+`;
 var segmentedControlStyles = import_react141.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
@@ -22497,7 +22548,9 @@ var segmentedControlLabelContentStyles = import_react141.css`
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react141.css``;
+var segmentedControlLabelTextStyles = import_react141.css`
+  white-space: nowrap;
+`;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime121 = require("@emotion/react/jsx-runtime");
@@ -22512,8 +22565,12 @@ var SegmentedControl = ({
   size = "md",
   hideOptionText = false,
   iconSize = "1.5em",
+  currentBackgroundColor = "white",
   ...props
 }) => {
+  const wrapperRef = (0, import_react143.useRef)(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = (0, import_react143.useState)(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = (0, import_react143.useState)(false);
   const onOptionChange = (0, import_react143.useCallback)(
     (event) => {
       if (event.target.checked) {
@@ -22534,58 +22591,94 @@ var SegmentedControl = ({
   const isIconOnly = (0, import_react143.useMemo)(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-    "div",
-    {
-      css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
-      ...props,
-      "data-testid": "segmented-control",
-      children: options.map((option, index) => {
-        var _a;
-        if (!option) {
-          return null;
-        }
-        const text = option.label ? option.label : option.icon ? null : String(option.value);
-        const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-          "div",
-          {
-            css: segmentedControlItemStyles,
-            "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
-            children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
-              "label",
-              {
-                css: [
-                  segmentedControlLabelStyles(option.value === value, isDisabled),
-                  sizeStyles,
-                  isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
-                ],
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                    "input",
-                    {
-                      css: segmentedControlInputStyles,
-                      type: "radio",
-                      name,
-                      value: index,
-                      checked: option.value === value,
-                      onChange: onOptionChange,
-                      disabled: isDisabled
-                    }
-                  ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                    !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
-                  ] })
-                ]
-              }
-            )
+  (0, import_react143.useEffect)(() => {
+    const wrapperElement = wrapperRef.current;
+    const onScroll = () => {
+      if (!wrapperElement) {
+        return;
+      }
+      const scrollValue = wrapperElement.scrollLeft;
+      const maxScroll = wrapperElement.scrollWidth - wrapperElement.clientWidth;
+      const isScrollable = wrapperElement.scrollWidth >= wrapperElement.clientWidth;
+      const toleranceMargin = 4;
+      const isAtScrollStart = scrollValue < toleranceMargin;
+      const isAtScrollEnd = scrollValue >= maxScroll - toleranceMargin;
+      setIsOverflowStartShadowVisible(isScrollable && !isAtScrollStart);
+      setIsOverflowEndShadowVisible(isScrollable && !isAtScrollEnd);
+    };
+    onScroll();
+    wrapperElement == null ? void 0 : wrapperElement.addEventListener("scroll", onScroll);
+    return () => {
+      wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      "div",
+      {
+        css: [
+          segmentedControlStyles,
+          orientation === "vertical" ? segmentedControlVerticalStyles : void 0
+        ],
+        ...props,
+        "data-testid": "segmented-control",
+        children: options.map((option, index) => {
+          var _a;
+          if (!option) {
+            return null;
           }
-        ) }, JSON.stringify(option.value));
-      })
-    }
-  );
+          const text = option.label ? option.label : option.icon ? null : String(option.value);
+          const isDisabled = disabled2 || option.disabled;
+          return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+            "div",
+            {
+              css: segmentedControlItemStyles,
+              "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
+              children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(
+                "label",
+                {
+                  css: [
+                    segmentedControlLabelStyles(option.value === value, isDisabled),
+                    sizeStyles,
+                    isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
+                  ],
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                      "input",
+                      {
+                        css: segmentedControlInputStyles,
+                        type: "radio",
+                        name,
+                        value: index,
+                        checked: option.value === value,
+                        onChange: onOptionChange,
+                        disabled: isDisabled
+                      }
+                    ),
+                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_CgCheck5.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                      !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                      !text || hideOptionText ? null : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+                    ] })
+                  ]
+                }
+              )
+            }
+          ) }, JSON.stringify(option.value));
+        })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      "div",
+      {
+        css: [
+          segmentedControlScrollIndicatorsStyles,
+          isOverflowStartShadowVisible ? segmentedControlScrollIndicatorStartVisibleStyles : null,
+          isOverflowEndShadowVisible ? segmentedControlScrollIndicatorEndVisibleStyles : null
+        ]
+      }
+    )
+  ] });
 };
 
 // src/components/Skeleton/Skeleton.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.147.1-alpha.3+1af8304702",
+  "version": "19.149.1-alpha.1+55ee398800",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.147.1-alpha.3+1af8304702",
-    "@uniformdev/richtext": "^19.147.1-alpha.3+1af8304702",
+    "@uniformdev/canvas": "^19.149.1-alpha.1+55ee398800",
+    "@uniformdev/richtext": "^19.149.1-alpha.1+55ee398800",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.38",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1af830470251c963f96bad096f543cfd3b612ffe"
+  "gitHead": "55ee398800ebfebe4d493572e47f5474b6125ddf"
 }