@os-design/core 1.0.221 → 1.0.222

package/dist/cjs/ListItemActions/index.js

@@ -113,6 +113,7 @@ var ListItemActions = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref)
         size: size,
         onClick: function onClick(e) {
           e.preventDefault();
+          e.stopPropagation();
           _onClick(e);
         }
       }, actionRest), icon);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_Button","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","r","l","t","Symbol","iterator","e","n","u","a","f","o","next","done","push","value","Array","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_toConsumableArray","_arrayWithoutHoles","_iterableToArray","_nonIterableSpread","minLen","_arrayLikeToArray","toString","slice","constructor","name","from","test","iter","len","arr2","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","swipeableStyles","p","swipeable","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","theme","listItemActionsPaddingLeft","paddingRight","clr","concat","colorBg","sizeStyles","actionIndex","ListItemActions","forwardRef","_ref","ref","_ref$actions","actions","_ref$onTouchStart","onTouchStart","_ref$onTouchMove","onTouchMove","_ref$onTouchEnd","onTouchEnd","children","size","rest","_useForwardedRef","useForwardedRef","_useForwardedRef2","containerRef","mergedContainerRef","_useSwipe","useSwipe","handlers","useMemo","isTouchDevice","touchStartHandler","useCallback","touchMoveHandler","touchEndHandler","_useState","useState","_useState2","setPaddingRight","useLayoutEffect","current","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","items","map","_ref2","icon","_ref2$onClick","onClick","actionRest","createElement","type","wide","preventDefault","displayName","_default","exports"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n  overflow: hidden;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_Button","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","r","l","t","Symbol","iterator","e","n","u","a","f","o","next","done","push","value","Array","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","_toConsumableArray","_arrayWithoutHoles","_iterableToArray","_nonIterableSpread","minLen","_arrayLikeToArray","toString","slice","constructor","name","from","test","iter","len","arr2","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","swipeableStyles","p","swipeable","css","transitionStyles","openedStyles","opened","Actions","omitEmotionProps","theme","listItemActionsPaddingLeft","paddingRight","clr","concat","colorBg","sizeStyles","actionIndex","ListItemActions","forwardRef","_ref","ref","_ref$actions","actions","_ref$onTouchStart","onTouchStart","_ref$onTouchMove","onTouchMove","_ref$onTouchEnd","onTouchEnd","children","size","rest","_useForwardedRef","useForwardedRef","_useForwardedRef2","containerRef","mergedContainerRef","_useSwipe","useSwipe","handlers","useMemo","isTouchDevice","touchStartHandler","useCallback","touchMoveHandler","touchEndHandler","_useState","useState","_useState2","setPaddingRight","useLayoutEffect","current","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","items","map","_ref2","icon","_ref2$onClick","onClick","actionRest","createElement","type","wide","preventDefault","stopPropagation","displayName","_default","exports"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n  overflow: hidden;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}

package/dist/esm/ListItemActions/index.js

@@ -108,6 +108,7 @@ const ListItemActions = /*#__PURE__*/forwardRef(({
         size: size,
         onClick: e => {
           e.preventDefault();
+          e.stopPropagation();
           onClick(e);
         }
       }, actionRest), icon);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","length","items","map","icon","onClick","actionRest","createElement","_extends","key","type","wide","preventDefault","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n  overflow: hidden;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","sizeStyles","transitionStyles","clr","isTouchDevice","omitEmotionProps","useForwardedRef","useSwipe","React","forwardRef","useCallback","useLayoutEffect","useMemo","useState","Button","Container","div","swipeableStyles","p","swipeable","openedStyles","opened","Actions","theme","listItemActionsPaddingLeft","paddingRight","colorBg","slice","actionIndex","ListItemActions","actions","onTouchStart","onTouchMove","onTouchEnd","children","size","rest","ref","containerRef","mergedContainerRef","handlers","touchStartHandler","e","touchMoveHandler","touchEndHandler","setPaddingRight","current","value","Number","window","getComputedStyle","getPropertyValue","replace","actionsComponent","length","items","map","icon","onClick","actionRest","createElement","_extends","key","type","wide","preventDefault","stopPropagation","displayName"],"sources":["../../../src/ListItemActions/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, transitionStyles, WithSize } from '@os-design/styles';\nimport { clr, Color } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedRef,\n  useSwipe,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Button, { ButtonProps } from '../Button';\n\nexport interface ListItemAction extends Omit<ButtonProps, 'type' | 'wide'> {\n  icon: React.ReactElement;\n}\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface ListItemActionsProps extends JsxDivProps, WithSize {\n  /**\n   * Buttons to control the item.\n   * For example, edit, delete.\n   * @default undefined\n   */\n  actions?: ListItemAction[];\n}\n\nconst Container = styled.div`\n  position: relative;\n  overflow: hidden;\n\n  @media (hover: hover) {\n    // Hide actions by default\n    & > nav {\n      opacity: 0;\n    }\n\n    // Display actions either on focus, or on hover\n    &:hover,\n    &:focus-within {\n      & > nav {\n        opacity: 1;\n      }\n    }\n  }\n`;\n\nconst swipeableStyles = (p) =>\n  p.swipeable &&\n  css`\n    transform: translateX(100%);\n    ${transitionStyles('transform')(p)};\n  `;\n\nconst openedStyles = (p) =>\n  p.opened &&\n  css`\n    transform: translateX(0);\n  `;\n\ninterface ActionsProps extends WithSize {\n  swipeable: boolean;\n  opened: boolean;\n  paddingRight: number;\n}\nconst Actions = styled(\n  'nav',\n  omitEmotionProps('swipeable', 'opened', 'paddingRight', 'size')\n)<ActionsProps>`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  display: flex;\n  align-items: center;\n\n  padding-left: ${(p) => p.theme.listItemActionsPaddingLeft}em;\n  padding-right: ${(p) => p.paddingRight}px;\n\n  background: linear-gradient(\n    to right,\n    ${(p) => clr([...p.theme.colorBg.slice(0, 3), 0] as Color)},\n    ${(p) => clr(p.theme.colorBg)}\n      ${(p) => p.theme.listItemActionsPaddingLeft}em\n  );\n\n  ${swipeableStyles};\n  ${openedStyles};\n  ${sizeStyles}\n`;\n\nlet actionIndex = 0;\n\n/**\n * Shows the menu in the list item.\n */\nconst ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(\n  (\n    {\n      actions = [],\n      onTouchStart = () => {},\n      onTouchMove = () => {},\n      onTouchEnd = () => {},\n      children,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const { opened, handlers } = useSwipe();\n    const swipeable = useMemo(() => isTouchDevice(), []);\n\n    const touchStartHandler = useCallback(\n      (e) => {\n        handlers.onTouchStart(e);\n        onTouchStart(e);\n      },\n      [handlers, onTouchStart]\n    );\n\n    const touchMoveHandler = useCallback(\n      (e) => {\n        handlers.onTouchMove(e);\n        onTouchMove(e);\n      },\n      [handlers, onTouchMove]\n    );\n\n    const touchEndHandler = useCallback(\n      (e) => {\n        handlers.onTouchEnd(e);\n        onTouchEnd(e);\n      },\n      [handlers, onTouchEnd]\n    );\n\n    const [paddingRight, setPaddingRight] = useState(0);\n    useLayoutEffect(() => {\n      if (!containerRef.current) return;\n      const value = Number(\n        window\n          .getComputedStyle(containerRef.current)\n          .getPropertyValue('padding-right')\n          .replace('px', '')\n      );\n      setPaddingRight(value);\n    }, [containerRef]);\n\n    const actionsComponent = useMemo(() => {\n      if (actions.length === 0) return null;\n      const items = actions.map(\n        ({ icon, onClick = () => {}, ...actionRest }) => {\n          actionIndex += 1;\n          return (\n            <Button\n              key={actionIndex}\n              type='ghost'\n              wide='never'\n              size={size}\n              onClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                onClick(e);\n              }}\n              {...actionRest}\n            >\n              {icon}\n            </Button>\n          );\n        }\n      );\n      return (\n        <Actions\n          swipeable={swipeable}\n          opened={opened}\n          paddingRight={paddingRight}\n          size={size}\n        >\n          {items}\n        </Actions>\n      );\n    }, [actions, opened, paddingRight, size, swipeable]);\n\n    return (\n      <Container\n        onTouchStart={touchStartHandler}\n        onTouchMove={touchMoveHandler}\n        onTouchEnd={touchEndHandler}\n        {...rest}\n        ref={mergedContainerRef}\n      >\n        {children}\n        {actionsComponent}\n      </Container>\n    );\n  }\n);\n\nListItemActions.displayName = 'ListItemActions';\n\nexport default ListItemActions;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACxE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;CAC1B;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,QAAQ;IAMjE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAwED,QAAA,MAAM,eAAe,6FAoGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItemActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IACxE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;CAC1B;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,oBAAqB,SAAQ,WAAW,EAAE,QAAQ;IAMjE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAwED,QAAA,MAAM,eAAe,6FAqGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.221",
+  "version": "1.0.222",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -59,5 +59,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "077cfdc02330f1dc61f2742ee56e287d57f3ca40"
+  "gitHead": "ca3e642872fe0be6503d1d6bf354bac2f9d1bc81"
 }

package/src/ListItemActions/index.tsx

@@ -167,6 +167,7 @@ const ListItemActions = forwardRef<HTMLDivElement, ListItemActionsProps>(
               size={size}
               onClick={(e) => {
                 e.preventDefault();
+                e.stopPropagation();
                 onClick(e);
               }}
               {...actionRest}