@os-design/core 1.0.147 → 1.0.150

package/dist/cjs/FormItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","css","formItemColorError","Help","formItemColorHelp","FormItem","forwardRef","ref","help","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","renderChildren","useCallback","c","React","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","firstChildHasType","TextArea","Switch","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","Label","label","p","theme","sizes","small","clr","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","css","formItemColorError","Help","formItemColorHelp","FormItem","forwardRef","ref","help","optional","loading","id","children","rest","useContext","FormConfigContext","optionalText","containerId","useMemo","Math","random","toString","slice","fieldId","helpId","renderChildren","useCallback","c","React","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","firstChildHasType","TextArea","Switch","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}

package/dist/cjs/Gallery/index.js

@@ -49,7 +49,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('heightPercent'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding-bottom: ", "%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ", ";\n  border-radius: ", "em;\n  overflow: hidden;\n  touch-action: none;\n"])), function (p) {
+var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('heightPercent'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding-bottom: ", "%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ", ";\n  border-radius: ", "em;\n  overflow: hidden;\n"])), function (p) {
   return p.heightPercent;
 }, function (p) {
   return (0, _theming.clr)(p.theme.galleryColorBg);
@@ -68,10 +68,13 @@ var GalleryHelp = _styled["default"].div(_templateObject3 || (_templateObject3 =
   return p.theme.borderRadius;
 });
 
+var MIN_DIST_PX = 10;
+var MAX_ANGLE = 30;
 /**
  * The image gallery. Change the cursor/touch position to change images.
  * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.
  */
+
 var Gallery = function Gallery(_ref) {
   var urls = _ref.urls,
       _ref$aspectRatio = _ref.aspectRatio,
@@ -104,6 +107,8 @@ var Gallery = function Gallery(_ref) {
     setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
   }, [imageIndex, urls]);
   var containerRef = (0, _react.useRef)(null);
+  var allowedRef = (0, _react.useRef)(false);
+  var startPosRef = (0, _react.useRef)(null);
   var size = (0, _utils.useSize)(containerRef);
   var sizeRef = (0, _react.useRef)(size);
   (0, _react.useEffect)(function () {
@@ -130,16 +135,53 @@ var Gallery = function Gallery(_ref) {
   var mouseMoveHandler = (0, _react.useCallback)(function (e) {
     return updateGalleryImage(e.clientX);
   }, [updateGalleryImage]);
+  var touchStartHandler = (0, _react.useCallback)(function (e) {
+    var _e$touches$ = e.touches[0],
+        clientX = _e$touches$.clientX,
+        clientY = _e$touches$.clientY;
+    startPosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+  }, []);
   var touchMoveHandler = (0, _react.useCallback)(function (e) {
-    return updateGalleryImage(e.touches[0].clientX);
+    if (!allowedRef.current) {
+      if (!startPosRef.current) return;
+      var _startPosRef$current = startPosRef.current,
+          x = _startPosRef$current.x,
+          y = _startPosRef$current.y;
+      var _e$touches$2 = e.touches[0],
+          clientX = _e$touches$2.clientX,
+          clientY = _e$touches$2.clientY;
+      var diffX = Math.abs(x - clientX);
+      var diffY = Math.abs(y - clientY);
+      var diff = Math.sqrt(Math.pow(diffX, 2) + Math.pow(diffY, 2));
+      if (diff < MIN_DIST_PX) return;
+      var angle = Math.atan(diffY / diffX) * 180 / Math.PI;
+
+      if (angle > MAX_ANGLE) {
+        startPosRef.current = null;
+        return;
+      }
+
+      allowedRef.current = true;
+    }
+
+    updateGalleryImage(e.touches[0].clientX);
   }, [updateGalleryImage]);
+  var touchEndHandler = (0, _react.useCallback)(function () {
+    allowedRef.current = false;
+    startPosRef.current = null;
+  }, []);
   return /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     activeTheme: "dark"
   }, /*#__PURE__*/_react["default"].createElement(Container, _extends({
     ref: containerRef,
     heightPercent: heightPercent,
     onMouseMove: mouseMoveHandler,
-    onTouchMove: touchMoveHandler
+    onTouchStart: touchStartHandler,
+    onTouchMove: touchMoveHandler,
+    onTouchEnd: touchEndHandler
   }, rest), /*#__PURE__*/_react["default"].createElement(StyledImage, _extends({
     url: imageUrl
   }, imageProps)), urls.length > 1 && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imageIndex !== null && /*#__PURE__*/_react["default"].createElement(_Status["default"], {

package/dist/cjs/Gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","heightPercent","clr","theme","galleryColorBg","borderRadius","StyledImage","Image","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","Gallery","urls","aspectRatio","help","imageProps","children","rest","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","containerRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchMoveHandler","touches"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  touch-action: none;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.touches[0].clientX),\n    [updateGalleryImage]\n  );\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        onMouseMove={mouseMoveHandler}\n        onTouchMove={touchMoveHandler}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","heightPercent","clr","theme","galleryColorBg","borderRadius","StyledImage","Image","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","help","imageProps","children","rest","useState","undefined","imageUrl","setImageUrl","length","imageIndex","setImageIndex","useMemo","Math","round","imageIndexRef","useRef","useEffect","current","containerRef","allowedRef","startPosRef","size","useSize","sizeRef","statusHeight","height","updateGalleryImage","useCallback","clientX","getBoundingClientRect","x","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchStartHandler","touches","clientY","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 10;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const allowedRef = useRef(false);\n  const startPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { clientX, clientY } = e.touches[0];\n      startPosRef.current = { x: clientX, y: clientY };\n    },\n    []\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!allowedRef.current) {\n        if (!startPosRef.current) return;\n        const { x, y } = startPosRef.current;\n        const { clientX, clientY } = e.touches[0];\n        const diffX = Math.abs(x - clientX);\n        const diffY = Math.abs(y - clientY);\n        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n        if (diff < MIN_DIST_PX) return;\n        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n        if (angle > MAX_ANGLE) {\n          startPosRef.current = null;\n          return;\n        }\n        allowedRef.current = true;\n      }\n      updateGalleryImage(e.touches[0].clientX);\n    },\n    [updateGalleryImage]\n  );\n\n  const touchEndHandler = useCallback<TouchEventHandler<HTMLDivElement>>(() => {\n    allowedRef.current = false;\n    startPosRef.current = null;\n  }, []);\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        onMouseMove={mouseMoveHandler}\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":"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"}

package/dist/cjs/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}

package/dist/esm/FormItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","styled","sizeStyles","omitEmotionProps","clr","ThemeOverrider","css","firstChildHasType","TextArea","TextAreaSkeleton","InputSkeleton","FormConfigContext","Switch","SwitchSkeleton","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","formItemColorError","Help","formItemColorHelp","FormItem","help","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","renderChildren","c","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","styled","sizeStyles","omitEmotionProps","clr","ThemeOverrider","css","firstChildHasType","TextArea","TextAreaSkeleton","InputSkeleton","FormConfigContext","Switch","SwitchSkeleton","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","formItemColorError","Help","formItemColorHelp","FormItem","help","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","renderChildren","c","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}

package/dist/esm/Gallery/index.js

@@ -16,7 +16,6 @@ const Container = styled('div', omitEmotionProps('heightPercent'))`
   background-color: ${p => clr(p.theme.galleryColorBg)};
   border-radius: ${p => p.theme.borderRadius}em;
   overflow: hidden;
-  touch-action: none;
 `;
 const StyledImage = styled(Image)`
   position: absolute;
@@ -39,11 +38,13 @@ const GalleryHelp = styled.div`
   border-bottom-left-radius: ${p => p.theme.borderRadius}em;
   padding: 0.1em 0.5em;
 `;
-
+const MIN_DIST_PX = 10;
+const MAX_ANGLE = 30;
 /**
  * The image gallery. Change the cursor/touch position to change images.
  * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.
  */
+
 const Gallery = ({
   urls,
   aspectRatio = [16, 9],
@@ -64,6 +65,8 @@ const Gallery = ({
     setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
   }, [imageIndex, urls]);
   const containerRef = useRef(null);
+  const allowedRef = useRef(false);
+  const startPosRef = useRef(null);
   const size = useSize(containerRef);
   const sizeRef = useRef(size);
   useEffect(() => {
@@ -85,14 +88,56 @@ const Gallery = ({
     }
   }, [urls.length]);
   const mouseMoveHandler = useCallback(e => updateGalleryImage(e.clientX), [updateGalleryImage]);
-  const touchMoveHandler = useCallback(e => updateGalleryImage(e.touches[0].clientX), [updateGalleryImage]);
+  const touchStartHandler = useCallback(e => {
+    const {
+      clientX,
+      clientY
+    } = e.touches[0];
+    startPosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+  }, []);
+  const touchMoveHandler = useCallback(e => {
+    if (!allowedRef.current) {
+      if (!startPosRef.current) return;
+      const {
+        x,
+        y
+      } = startPosRef.current;
+      const {
+        clientX,
+        clientY
+      } = e.touches[0];
+      const diffX = Math.abs(x - clientX);
+      const diffY = Math.abs(y - clientY);
+      const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+      if (diff < MIN_DIST_PX) return;
+      const angle = Math.atan(diffY / diffX) * 180 / Math.PI;
+
+      if (angle > MAX_ANGLE) {
+        startPosRef.current = null;
+        return;
+      }
+
+      allowedRef.current = true;
+    }
+
+    updateGalleryImage(e.touches[0].clientX);
+  }, [updateGalleryImage]);
+  const touchEndHandler = useCallback(() => {
+    allowedRef.current = false;
+    startPosRef.current = null;
+  }, []);
   return /*#__PURE__*/React.createElement(ThemeOverrider, {
     activeTheme: "dark"
   }, /*#__PURE__*/React.createElement(Container, _extends({
     ref: containerRef,
     heightPercent: heightPercent,
     onMouseMove: mouseMoveHandler,
-    onTouchMove: touchMoveHandler
+    onTouchStart: touchStartHandler,
+    onTouchMove: touchMoveHandler,
+    onTouchEnd: touchEndHandler
   }, rest), /*#__PURE__*/React.createElement(StyledImage, _extends({
     url: imageUrl
   }, imageProps)), urls.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, imageIndex !== null && /*#__PURE__*/React.createElement(GalleryStatus, {

package/dist/esm/Gallery/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","clr","ThemeOverrider","omitEmotionProps","useSize","React","useCallback","useEffect","useMemo","useRef","useState","Image","GalleryStatus","Container","p","heightPercent","theme","galleryColorBg","borderRadius","StyledImage","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","Gallery","urls","aspectRatio","help","imageProps","children","rest","imageUrl","setImageUrl","undefined","imageIndex","setImageIndex","length","Math","round","imageIndexRef","current","containerRef","size","sizeRef","statusHeight","height","updateGalleryImage","clientX","x","getBoundingClientRect","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchMoveHandler","touches"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n  touch-action: none;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.touches[0].clientX),\n    [updateGalleryImage]\n  );\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        onMouseMove={mouseMoveHandler}\n        onTouchMove={touchMoveHandler}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,gBAAT,EAA2BC,OAA3B,QAA0C,kBAA1C;AACA,OAAOC,KAAP,IAGEC,WAHF,EAIEC,SAJF,EAKEC,OALF,EAMEC,MANF,EAOEC,QAPF,QAQO,OARP;AASA,OAAOC,KAAP,MAAkC,UAAlC;AACA,OAAOC,aAAP,MAA0B,UAA1B;AAKA,MAAMC,SAAS,GAAGb,MAAM,CACtB,KADsB,EAEtBG,gBAAgB,CAAC,eAAD,CAFM,CAGN;AAClB;AACA,oBAAqBW,CAAD,IAAOA,CAAC,CAACC,aAAc;AAC3C;AACA;AACA;AACA;AACA,sBAAuBD,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACE,KAAF,CAAQC,cAAT,CAAyB;AACzD,mBAAoBH,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQE,YAAa;AAC/C;AACA;AACA,CAdA;AAgBA,MAAMC,WAAW,GAAGnB,MAAM,CAACW,KAAD,CAAQ;AAClC;AACA;AACA;AACA;AACA,CALA;AAOA,MAAMS,WAAW,GAAGpB,MAAM,CAACqB,GAAI;AAC/B;AACA;AACA;AACA;AACA,sBAAuBP,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACE,KAAF,CAAQM,kBAAT,CAA6B;AAC7D,WAAYR,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACE,KAAF,CAAQO,oBAAT,CAA+B;AACpD;AACA;AACA,eAAgBT,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQQ,KAAR,CAAcC,KAAM;AAC1C;AACA;AACA,+BAAgCX,CAAD,IAAOA,CAAC,CAACE,KAAF,CAAQE,YAAa;AAC3D;AACA,CAdA;;AA0CA;AACA;AACA;AACA;AACA,MAAMQ,OAA+B,GAAG,CAAC;EACvCC,IADuC;EAEvCC,WAAW,GAAG,CAAC,EAAD,EAAK,CAAL,CAFyB;EAGvCC,IAHuC;EAIvCC,UAAU,GAAG,EAJ0B;EAKvCC,QALuC;EAMvC,GAAGC;AANoC,CAAD,KAOlC;EACJ,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0BxB,QAAQ,CAAqByB,SAArB,CAAxC;EACA,MAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B3B,QAAQ,CAACiB,IAAI,CAACW,MAAL,GAAc,CAAd,GAAkB,CAAlB,GAAsB,IAAvB,CAA5C;EAEA,MAAMvB,aAAa,GAAGP,OAAO,CAC3B,MAAM+B,IAAI,CAACC,KAAL,CAAYZ,WAAW,CAAC,CAAD,CAAX,GAAiBA,WAAW,CAAC,CAAD,CAA7B,GAAoC,OAA/C,IAA0D,KADrC,EAE3B,CAACA,WAAD,CAF2B,CAA7B;EAKA,MAAMa,aAAa,GAAGhC,MAAM,CAAC2B,UAAD,CAA5B;EACA7B,SAAS,CAAC,MAAM;IACdkC,aAAa,CAACC,OAAd,GAAwBN,UAAxB;EACD,CAFQ,EAEN,CAACA,UAAD,CAFM,CAAT,CAVI,CAcJ;;EACA7B,SAAS,CAAC,MAAM;IACd2B,WAAW,CAACE,UAAU,KAAK,IAAf,GAAsBT,IAAI,CAACS,UAAD,CAA1B,GAAyCD,SAA1C,CAAX;EACD,CAFQ,EAEN,CAACC,UAAD,EAAaT,IAAb,CAFM,CAAT;EAIA,MAAMgB,YAAY,GAAGlC,MAAM,CAAiB,IAAjB,CAA3B;EAEA,MAAMmC,IAAI,GAAGxC,OAAO,CAACuC,YAAD,CAApB;EACA,MAAME,OAAO,GAAGpC,MAAM,CAACmC,IAAD,CAAtB;EACArC,SAAS,CAAC,MAAM;IACdsC,OAAO,CAACH,OAAR,GAAkBE,IAAlB;EACD,CAFQ,EAEN,CAACA,IAAD,CAFM,CAAT;EAIA,MAAME,YAAY,GAAGtC,OAAO,CAC1B,MAAM+B,IAAI,CAACC,KAAL,CAAWI,IAAI,CAACG,MAAL,GAAc,EAAzB,CADoB,EAE1B,CAACH,IAAI,CAACG,MAAN,CAF0B,CAA5B;EAKA,MAAMC,kBAAkB,GAAG1C,WAAW,CACnC2C,OAAD,IAAqB;IACnB,IAAI,CAACN,YAAY,CAACD,OAAlB,EAA2B;IAC3B,MAAM;MAAEQ;IAAF,IAAQP,YAAY,CAACD,OAAb,CAAqBS,qBAArB,EAAd;IACA,MAAMC,aAAa,GAAGP,OAAO,CAACH,OAAR,CAAgBW,KAAhB,GAAwB1B,IAAI,CAACW,MAAnD;IACA,MAAMgB,IAAI,GAAGL,OAAO,GAAGC,CAAvB;IACA,IAAII,IAAI,GAAG,CAAX,EAAc;IACd,MAAMC,SAAS,GAAGhB,IAAI,CAACiB,KAAL,CAAWF,IAAI,GAAGF,aAAlB,CAAlB;;IACA,IAAIX,aAAa,CAACC,OAAd,KAA0Ba,SAA9B,EAAyC;MACvClB,aAAa,CAACkB,SAAD,CAAb;IACD;EACF,CAXmC,EAYpC,CAAC5B,IAAI,CAACW,MAAN,CAZoC,CAAtC;EAeA,MAAMmB,gBAAgB,GAAGnD,WAAW,CACjCoD,CAAD,IAAOV,kBAAkB,CAACU,CAAC,CAACT,OAAH,CADS,EAElC,CAACD,kBAAD,CAFkC,CAApC;EAKA,MAAMW,gBAAgB,GAAGrD,WAAW,CACjCoD,CAAD,IAAOV,kBAAkB,CAACU,CAAC,CAACE,OAAF,CAAU,CAAV,EAAaX,OAAd,CADS,EAElC,CAACD,kBAAD,CAFkC,CAApC;EAKA,oBACE,oBAAC,cAAD;IAAgB,WAAW,EAAC;EAA5B,gBACE,oBAAC,SAAD;IACE,GAAG,EAAEL,YADP;IAEE,aAAa,EAAE5B,aAFjB;IAGE,WAAW,EAAE0C,gBAHf;IAIE,WAAW,EAAEE;EAJf,GAKM3B,IALN,gBAOE,oBAAC,WAAD;IAAa,GAAG,EAAEC;EAAlB,GAAgCH,UAAhC,EAPF,EAQGH,IAAI,CAACW,MAAL,GAAc,CAAd,iBACC,0CACGF,UAAU,KAAK,IAAf,iBACC,oBAAC,aAAD;IACE,KAAK,EAAET,IAAI,CAACW,MADd;IAEE,OAAO,EAAEF,UAFX;IAGE,MAAM,EAAEU;EAHV,EAFJ,EAQGjB,IAAI,iBAAI,oBAAC,WAAD,QAAcA,IAAd,CARX,CATJ,EAoBGE,QApBH,CADF,CADF;AA0BD,CA1FD;;AA4FA,eAAeL,OAAf"}
+{"version":3,"file":"index.js","names":["styled","clr","ThemeOverrider","omitEmotionProps","useSize","React","useCallback","useEffect","useMemo","useRef","useState","Image","GalleryStatus","Container","p","heightPercent","theme","galleryColorBg","borderRadius","StyledImage","GalleryHelp","div","galleryHelpColorBg","galleryHelpColorText","sizes","small","MIN_DIST_PX","MAX_ANGLE","Gallery","urls","aspectRatio","help","imageProps","children","rest","imageUrl","setImageUrl","undefined","imageIndex","setImageIndex","length","Math","round","imageIndexRef","current","containerRef","allowedRef","startPosRef","size","sizeRef","statusHeight","height","updateGalleryImage","clientX","x","getBoundingClientRect","widthPerImage","width","xPos","nextIndex","floor","mouseMoveHandler","e","touchStartHandler","clientY","touches","y","touchMoveHandler","diffX","abs","diffY","diff","sqrt","angle","atan","PI","touchEndHandler"],"sources":["../../../src/Gallery/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { omitEmotionProps, useSize } from '@os-design/utils';\nimport React, {\n  MouseEventHandler,\n  TouchEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Image, { ImageProps } from '../Image';\nimport GalleryStatus from './Status';\n\ninterface ContainerProps {\n  heightPercent: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('heightPercent')\n)<ContainerProps>`\n  position: relative;\n  padding-bottom: ${(p) => p.heightPercent}%;\n\n  display: flex;\n  justify-content: center;\n\n  background-color: ${(p) => clr(p.theme.galleryColorBg)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  overflow: hidden;\n`;\n\nconst StyledImage = styled(Image)`\n  position: absolute;\n  width: auto;\n  height: 100%;\n  border-radius: 0;\n`;\n\nconst GalleryHelp = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n\n  background-color: ${(p) => clr(p.theme.galleryHelpColorBg)};\n  color: ${(p) => clr(p.theme.galleryHelpColorText)};\n  backdrop-filter: blur(0.2em);\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n\n  border-bottom-left-radius: ${(p) => p.theme.borderRadius}em;\n  padding: 0.1em 0.5em;\n`;\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface GalleryProps extends JsxDivProps {\n  /**\n   * The image urls.\n   */\n  urls: string[] | ReadonlyArray<string>;\n  /**\n   * The aspect ratio of the gallery.\n   * E.g. [16,9] – 16:9.\n   */\n  aspectRatio?: [number, number];\n  /**\n   * The help message that is displayed in the upper right corner.\n   */\n  help?: string;\n  /**\n   * The props of the image component.\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * The children that can be displayed on top of the image.\n   * E.g. tags.\n   */\n  children?: React.ReactNode;\n}\n\nconst MIN_DIST_PX = 10;\nconst MAX_ANGLE = 30;\n\n/**\n * The image gallery. Change the cursor/touch position to change images.\n * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.\n */\nconst Gallery: React.FC<GalleryProps> = ({\n  urls,\n  aspectRatio = [16, 9],\n  help,\n  imageProps = {},\n  children,\n  ...rest\n}) => {\n  const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);\n  const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);\n\n  const heightPercent = useMemo(\n    () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,\n    [aspectRatio]\n  );\n\n  const imageIndexRef = useRef(imageIndex);\n  useEffect(() => {\n    imageIndexRef.current = imageIndex;\n  }, [imageIndex]);\n\n  // Update the image if the index was changed\n  useEffect(() => {\n    setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);\n  }, [imageIndex, urls]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const allowedRef = useRef(false);\n  const startPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const size = useSize(containerRef);\n  const sizeRef = useRef(size);\n  useEffect(() => {\n    sizeRef.current = size;\n  }, [size]);\n\n  const statusHeight = useMemo(\n    () => Math.round(size.height / 70),\n    [size.height]\n  );\n\n  const updateGalleryImage = useCallback(\n    (clientX: number) => {\n      if (!containerRef.current) return;\n      const { x } = containerRef.current.getBoundingClientRect();\n      const widthPerImage = sizeRef.current.width / urls.length;\n      const xPos = clientX - x;\n      if (xPos < 0) return;\n      const nextIndex = Math.floor(xPos / widthPerImage);\n      if (imageIndexRef.current !== nextIndex) {\n        setImageIndex(nextIndex);\n      }\n    },\n    [urls.length]\n  );\n\n  const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(\n    (e) => updateGalleryImage(e.clientX),\n    [updateGalleryImage]\n  );\n\n  const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      const { clientX, clientY } = e.touches[0];\n      startPosRef.current = { x: clientX, y: clientY };\n    },\n    []\n  );\n\n  const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!allowedRef.current) {\n        if (!startPosRef.current) return;\n        const { x, y } = startPosRef.current;\n        const { clientX, clientY } = e.touches[0];\n        const diffX = Math.abs(x - clientX);\n        const diffY = Math.abs(y - clientY);\n        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);\n        if (diff < MIN_DIST_PX) return;\n        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;\n        if (angle > MAX_ANGLE) {\n          startPosRef.current = null;\n          return;\n        }\n        allowedRef.current = true;\n      }\n      updateGalleryImage(e.touches[0].clientX);\n    },\n    [updateGalleryImage]\n  );\n\n  const touchEndHandler = useCallback<TouchEventHandler<HTMLDivElement>>(() => {\n    allowedRef.current = false;\n    startPosRef.current = null;\n  }, []);\n\n  return (\n    <ThemeOverrider activeTheme='dark'>\n      <Container\n        ref={containerRef}\n        heightPercent={heightPercent}\n        onMouseMove={mouseMoveHandler}\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n      >\n        <StyledImage url={imageUrl} {...imageProps} />\n        {urls.length > 1 && (\n          <>\n            {imageIndex !== null && (\n              <GalleryStatus\n                count={urls.length}\n                current={imageIndex}\n                height={statusHeight}\n              />\n            )}\n            {help && <GalleryHelp>{help}</GalleryHelp>}\n          </>\n        )}\n        {children}\n      </Container>\n    </ThemeOverrider>\n  );\n};\n\nexport default Gallery;\n"],"mappings":"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"}

package/dist/esm/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,UAA5B,EAAwCC,OAAxC,QAAuD,OAAvD;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,iBAAT,QAAkC,kBAAlC;AACA,SAASC,CAAT,QAAkB,kBAAlB;AACA,SAASC,gBAAT,EAA2BC,WAA3B,QAA8C,uBAA9C;AACA,OAAOC,QAAP,MAAqB,aAArB;AAkCA,MAAMC,KAAK,GAAGR,MAAM,CAACS,GAAI;AACzB;AACA,eAAgBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAAM;AAC1C,WAAYH,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQG,mBAAT,CAA8B;AACnD;AACA;AACA,eAAgBJ,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQI,0BAAR,CAAmC,CAAnC,CAAsC;AAC5D,IAAIX,CAAC,CAACY,GAAF,CAAMC,EAAG;AACb;AACA;AACA;AACA,IAAIf,cAAe;AACnB,CAZA;AAcA,MAAMgB,SAAS,GAAGlB,MAAM,CAACS,GAAI;AAC7B;AACA;AACA,+BAAgCC,CAAD,IAAOT,GAAG,CAACS,CAAC,CAACC,KAAF,CAAQQ,qBAAT,CAAgC;AACzE;AACA;AACA,kBAAmBT,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQS,wBAAR,CAAiC,CAAjC,CAAoC;AAC7D,MAAMhB,CAAC,CAACY,GAAF,CAAMC,EAAG;AACf;AACA;AACA;AACA,CAXA;AAaA;AACA;AACA;;AACA,MAAMI,SAAS,gBAAGxB,UAAU,CAC1B,CACE;EACEyB,KADF;EAEEC,gBAAgB,GAAG,CAFrB;EAGEC,KAHF;EAIEC,YAJF;EAKEC,QAAQ,GAAG,MAAM,CAAE,CALrB;EAMEC,QANF;EAOE,GAAGC;AAPL,CADF,EAUEC,GAVF,KAWK;EACH,MAAM;IAAEC;EAAF,IAAoBhC,UAAU,CAACQ,WAAD,CAApC;EACA,MAAM,CAACyB,cAAD,EAAiBC,iBAAjB,IAAsC7B,iBAAiB,CAAC;IAC5DqB,KAD4D;IAE5DC,YAF4D;IAG5DC;EAH4D,CAAD,CAA7D;EAMA,MAAMO,QAAQ,GAAG5B,gBAAgB,CAAC;IAChCmB,KAAK,EAAEO,cAAc,IAAI,EADO;IAEhCL,QAAQ,EAAEM,iBAFsB;IAGhCT;EAHgC,CAAD,CAAjC;EAMA,MAAMW,SAAS,GAAGnC,OAAO,CAAC,MAAM;IAC9B,MAAMoC,aAAa,GAAGJ,cAAc,IAAI,EAAxC;IACA,OAAOnC,KAAK,CAACwC,QAAN,CAAeC,GAAf,CAAmBV,QAAnB,EAA8BW,KAAD,IAAW;MAC7C,IAAI,eAAC1C,KAAK,CAAC2C,cAAN,CAAqBD,KAArB,CAAD,IAAgCA,KAAK,CAACE,IAAN,KAAejC,QAAnD,EACE,OAAO+B,KAAP;MACF,MAAM;QAAEd,KAAK,EAAEiB,UAAT;QAAqBC,OAAO,EAAEC;MAA9B,IAA+CL,KAAK,CAACM,KAA3D;MACA,oBAAOhD,KAAK,CAACiD,YAAN,CAAmBP,KAAnB,EAA0B;QAC/BQ,GAAG,EAAEL,UAD0B;QAE/BM,QAAQ,EAAEZ,aAAa,CAACa,QAAd,CAAuBP,UAAvB,CAFqB;QAG/BC,OAAO,EAAGO,CAAD,IAAO;UACd,IAAI,CAACR,UAAL,EAAiB;UACjBR,QAAQ,CAACQ,UAAD,CAAR;UACA,IAAIE,YAAJ,EAAkBA,YAAY,CAACM,CAAD,CAAZ;QACnB,CAP8B;QAQ/B,IAAI,CAACnB,aAAD,GACA;UACEoB,IAAI,EACF3B,gBAAgB,KAAK,CAArB,GAAyB,eAAzB,GAA2C,kBAF/C;UAGE,gBAAgBY,aAAa,CAACa,QAAd,CAAuBP,UAAvB;QAHlB,CADA,GAMA,EANJ;MAR+B,CAA1B,CAAP;IAgBD,CApBM,CAAP;EAqBD,CAvBwB,EAuBtB,CAACd,QAAD,EAAWG,aAAX,EAA0BC,cAA1B,EAA0CR,gBAA1C,EAA4DU,QAA5D,CAvBsB,CAAzB;EAyBA,oBACE,oBAAC,SAAD;IACE,IAAI,EAAEV,gBAAgB,KAAK,CAArB,GAAyB,YAAzB,GAAwC;EADhD,GAEMK,IAFN;IAGE,GAAG,EAAEC;EAHP,IAKGP,KAAK,iBAAI,oBAAC,KAAD,QAAQA,KAAR,CALZ,EAMGY,SANH,CADF;AAUD,CA7DyB,CAA5B;AAgEAb,SAAS,CAAC8B,WAAV,GAAwB,WAAxB;AAEA,eAAe9B,SAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useContext","useMemo","styled","clr","ellipsisStyles","useForwardedState","m","useSelectHandler","MenuContext","MenuItem","Title","div","p","theme","sizes","small","menuGroupColorTitle","modalBodyPaddingHorizontal","min","xs","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","title","maxSelectedItems","value","defaultValue","onChange","children","rest","ref","closeOnSelect","forwardedValue","setForwardedValue","onSelect","menuItems","selectedItems","Children","map","child","isValidElement","type","childValue","onClick","childOnClick","props","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":"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"}

package/dist/types/Gallery/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Gallery/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA6C7C,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW;IAI/C,IAAI,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAKvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAI/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0FnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Gallery/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA4C7C,aAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW;IAI/C,IAAI,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAKvC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAI/B,IAAI,CAAC,EAAE,MAAM,CAAC;IAId,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IAKrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4HnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.147",
+  "version": "1.0.150",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,14 +30,14 @@
   },
   "dependencies": {
     "@os-design/date-picker-utils": "^1.0.9",
-    "@os-design/icons": "^1.0.39",
+    "@os-design/icons": "^1.0.40",
     "@os-design/input-number-utils": "^1.0.16",
     "@os-design/media": "^1.0.15",
     "@os-design/menu-utils": "^1.0.10",
     "@os-design/portal": "^1.0.5",
-    "@os-design/styles": "^1.0.37",
-    "@os-design/theming": "^1.0.35",
-    "@os-design/utils": "^1.0.52",
+    "@os-design/styles": "^1.0.38",
+    "@os-design/theming": "^1.0.36",
+    "@os-design/utils": "^1.0.53",
     "@os-team/password-score": "^1.0.3",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.9.1",
@@ -57,5 +57,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "174987fc6c9d55db201be10abde3a4cf5a790573"
+  "gitHead": "5b1feb3671b98c041f2ed5e0780ad469f6475f2c"
 }