Socket
Socket
Sign inDemoInstall

@os-design/core

Package Overview
Dependencies
Maintainers
1
Versions
478
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@os-design/core - npm Package Compare versions

Comparing version 1.0.177 to 1.0.178

72

dist/cjs/Drawer/index.js

@@ -7,17 +7,17 @@ "use strict";

});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
var _utils = require("@os-design/utils");
exports.useCloseDrawer = exports["default"] = void 0;
var _react = require("@emotion/react");
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _portal = _interopRequireDefault(require("@os-design/portal"));
var _styles = require("@os-design/styles");
var _theming = require("@os-design/theming");
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _react2 = require("@emotion/react");
var _portal = _interopRequireDefault(require("@os-design/portal"));
var _utils = require("@os-design/utils");
var _react2 = _interopRequireWildcard(require("react"));
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
var _Modal = require("../Modal");
var _excluded = ["placement", "width", "visible", "onClose", "size", "children", "onClick"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

@@ -31,19 +31,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

var Container = _styled["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100%;\n z-index: ", ";\n"])), DRAWER_CONTAINER_Z_INDEX);
var placementLeftFadeIn = (0, _react2.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n from { transform: translateX(calc(-100% - ", "em)); }\n to { transform: translateX(0); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementLeftFadeOut = (0, _react2.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n from { transform: translateX(0); }\n to { transform: translateX(calc(-100% - ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementRightFadeIn = (0, _react2.keyframes)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n from { transform: translateX(calc(100vw + ", "em)); }\n to { transform: translateX(calc(100vw - 100%)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementRightFadeOut = (0, _react2.keyframes)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n from { transform: translateX(calc(100vw - 100%)); }\n to { transform: translateX(calc(100vw + ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementLeftFadeIn = (0, _react.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n from { transform: translateX(calc(-100% - ", "em)); }\n to { transform: translateX(0); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementLeftFadeOut = (0, _react.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n from { transform: translateX(0); }\n to { transform: translateX(calc(-100% - ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementRightFadeIn = (0, _react.keyframes)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n from { transform: translateX(calc(100vw + ", "em)); }\n to { transform: translateX(calc(100vw - 100%)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementRightFadeOut = (0, _react.keyframes)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n from { transform: translateX(calc(100vw - 100%)); }\n to { transform: translateX(calc(100vw + ", "em)); }\n"])), DRAWER_BOX_SHADOW_SIZE_EM);
var placementLeftVisibleStyles = function placementLeftVisibleStyles(p) {
return p.placement === 'left' && p.visible && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementLeftFadeIn, p.theme.transitionDelay);
return p.placement === 'left' && p.visible && (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementLeftFadeIn, p.theme.transitionDelay);
};
var placementLeftInvisibleStyles = function placementLeftInvisibleStyles(p) {
return p.placement === 'left' && !p.visible && (0, _react2.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementLeftFadeOut, p.theme.transitionDelay);
return p.placement === 'left' && !p.visible && (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementLeftFadeOut, p.theme.transitionDelay);
};
var placementRightVisibleStyles = function placementRightVisibleStyles(p) {
return p.placement === 'right' && p.visible && (0, _react2.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementRightFadeIn, p.theme.transitionDelay);
return p.placement === 'right' && p.visible && (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementRightFadeIn, p.theme.transitionDelay);
};
var placementRightInvisibleStyles = function placementRightInvisibleStyles(p) {
return p.placement === 'right' && !p.visible && (0, _react2.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementRightFadeOut, p.theme.transitionDelay);
return p.placement === 'right' && !p.visible && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), placementRightFadeOut, p.theme.transitionDelay);
};
var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('placement', 'width', 'visible', 'size'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n width: ", ";\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ", ";\n color: ", ";\n box-shadow: 0 0 ", "em\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", ";\n ", ";\n"])), function (p) {
var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('placement', 'width', 'visible', 'size'))(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", ";\n\n position: absolute;\n top: 0;\n bottom: 0;\n width: ", ";\n padding-bottom: env(safe-area-inset-bottom);\n\n background-color: ", ";\n color: ", ";\n box-shadow: 0 0 ", "em\n ", ";\n\n ", ";\n ", ";\n ", ";\n ", ";\n\n ", ";\n ", ";\n"])), _styles.resetFocusStyles, function (p) {
return p.width;

@@ -57,2 +57,6 @@ }, function (p) {

}, placementLeftVisibleStyles, placementLeftInvisibleStyles, placementRightVisibleStyles, placementRightInvisibleStyles, (0, _styles.enableScrollingStyles)('y'), _styles.sizeStyles);
var CloseDrawerContext = /*#__PURE__*/_react2["default"].createContext(function () {});
var useCloseDrawer = function useCloseDrawer() {
return (0, _react2.useContext)(CloseDrawerContext);
};

@@ -62,3 +66,4 @@ /**

*/
var Drawer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
exports.useCloseDrawer = useCloseDrawer;
var Drawer = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
var _ref$placement = _ref.placement,

@@ -75,3 +80,3 @@ placement = _ref$placement === void 0 ? 'right' : _ref$placement,

_ref$onClick = _ref.onClick,
_onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
rest = _objectWithoutProperties(_ref, _excluded);

@@ -82,11 +87,19 @@ var _useTheme = (0, _theming.useTheme)(),

(0, _utils.useBodyScroll)(!visible);
(0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
var clickHandler = (0, _react2.useCallback)(function (e) {
e.stopPropagation();
onClick(e);
}, [onClick]);
var keyDownHandler = (0, _react2.useCallback)(function (e) {
if (e.key === 'Escape') onClose();
}, [onClose]);
if (!mounted) return null;
return /*#__PURE__*/_react["default"].createElement(_portal["default"], null, /*#__PURE__*/_react["default"].createElement(DrawerMask, {
return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(DrawerMask, {
visible: visible
}), /*#__PURE__*/_react["default"].createElement(Container, {
}), /*#__PURE__*/_react2["default"].createElement(Container, {
onClick: onClose
}, /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
autoFocus: false
}, /*#__PURE__*/_react["default"].createElement(Content, _extends({
}, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
autoFocus: true
}, /*#__PURE__*/_react2["default"].createElement(CloseDrawerContext.Provider, {
value: onClose
}, /*#__PURE__*/_react2["default"].createElement(Content, _extends({
placement: placement,

@@ -96,6 +109,5 @@ width: width,

size: size,
onClick: function onClick(e) {
e.stopPropagation();
_onClick(e);
},
tabIndex: -1,
onKeyDown: keyDownHandler,
onClick: clickHandler,
role: "dialog",

@@ -105,3 +117,3 @@ "aria-modal": true

ref: ref
}), children))));
}), children)))));
});

@@ -108,0 +120,0 @@ Drawer.displayName = 'Drawer';

@@ -7,3 +7,3 @@ "use strict";

});
exports["default"] = exports.ModalMask = void 0;
exports.useCloseModal = exports["default"] = exports.ModalMask = void 0;
var _react = require("@emotion/react");

@@ -106,2 +106,6 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));

});
var CloseModalContext = /*#__PURE__*/_react2["default"].createContext(function () {});
var useCloseModal = function useCloseModal() {
return (0, _react2.useContext)(CloseModalContext);
};

@@ -111,2 +115,3 @@ /**

*/
exports.useCloseModal = useCloseModal;
var Modal = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {

@@ -134,3 +139,3 @@ var title = _ref.title,

_ref$onClick = _ref.onClick,
_onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
children = _ref.children,

@@ -143,3 +148,2 @@ rest = _objectWithoutProperties(_ref, _excluded);

(0, _utils.useBodyScroll)(!visible);
(0, _utils.useKeyPress)(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
var titleId = (0, _react2.useMemo)(function () {

@@ -151,2 +155,12 @@ return "modal-title-".concat(Math.random().toString(36).slice(2, 11));

}, [id]);
var clickHandler = (0, _react2.useCallback)(function (e) {
e.stopPropagation();
onClick(e);
}, [onClick]);
var keyDownHandler = (0, _react2.useCallback)(function (e) {
if (e.key === 'Escape') onClose();
}, [onClose]);
var ariaLabelledBy = (0, _react2.useMemo)(function () {
return header === undefined ? titleId : undefined;
}, [header, titleId]);
if (!mounted) return null;

@@ -156,18 +170,16 @@ return /*#__PURE__*/_react2["default"].createElement(_portal["default"], null, /*#__PURE__*/_react2["default"].createElement(ModalMask, {

}), /*#__PURE__*/_react2["default"].createElement(Container, {
onClick: function onClick(e) {
e.stopPropagation();
onClose();
}
onClick: clickHandler
}, /*#__PURE__*/_react2["default"].createElement(_reactFocusLock["default"], {
autoFocus: false
autoFocus: true
}, /*#__PURE__*/_react2["default"].createElement(CloseModalContext.Provider, {
value: onClose
}, /*#__PURE__*/_react2["default"].createElement(Content, {
visible: visible,
size: size,
onClick: function onClick(e) {
e.stopPropagation();
_onClick(e);
},
tabIndex: -1,
onKeyDown: keyDownHandler,
onClick: clickHandler,
role: "dialog",
"aria-modal": true,
"aria-labelledby": header === undefined ? titleId : undefined,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": bodyId,

@@ -197,3 +209,3 @@ ref: contentRef

onClick: onOk
}, okText)) : footer))));
}, okText)) : footer)))));
});

@@ -200,0 +212,0 @@ Modal.displayName = 'Modal';

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { forwardRef } from 'react';
import FocusLock from 'react-focus-lock';
import { useBodyScroll, useClosable, useKeyPress, omitEmotionProps } from '@os-design/utils';
import { enableScrollingStyles, sizeStyles } from '@os-design/styles';
import { clr, useTheme } from '@os-design/theming';
import { css, keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { css, keyframes } from '@emotion/react';
import Portal from '@os-design/portal';
import { enableScrollingStyles, resetFocusStyles, sizeStyles } from '@os-design/styles';
import { clr, useTheme } from '@os-design/theming';
import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
import React, { forwardRef, useCallback, useContext } from 'react';
import FocusLock from 'react-focus-lock';
import { ModalMask } from '../Modal';

@@ -53,2 +53,4 @@ const DRAWER_CONTAINER_Z_INDEX = 900;

const Content = styled('div', omitEmotionProps('placement', 'width', 'visible', 'size'))`
${resetFocusStyles};
position: absolute;

@@ -73,2 +75,4 @@ top: 0;

`;
const CloseDrawerContext = /*#__PURE__*/React.createContext(() => {});
export const useCloseDrawer = () => useContext(CloseDrawerContext);

@@ -93,3 +97,9 @@ /**

useBodyScroll(!visible);
useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
const clickHandler = useCallback(e => {
e.stopPropagation();
onClick(e);
}, [onClick]);
const keyDownHandler = useCallback(e => {
if (e.key === 'Escape') onClose();
}, [onClose]);
if (!mounted) return null;

@@ -101,3 +111,5 @@ return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(DrawerMask, {

}, /*#__PURE__*/React.createElement(FocusLock, {
autoFocus: false
autoFocus: true
}, /*#__PURE__*/React.createElement(CloseDrawerContext.Provider, {
value: onClose
}, /*#__PURE__*/React.createElement(Content, _extends({

@@ -108,6 +120,5 @@ placement: placement,

size: size,
onClick: e => {
e.stopPropagation();
onClick(e);
},
tabIndex: -1,
onKeyDown: keyDownHandler,
onClick: clickHandler,
role: "dialog",

@@ -117,3 +128,3 @@ "aria-modal": true

ref: ref
}), children))));
}), children)))));
});

@@ -120,0 +131,0 @@ Drawer.displayName = 'Drawer';

@@ -9,4 +9,4 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
import { omitEmotionProps, useBodyScroll, useClosable, useKeyPress } from '@os-design/utils';
import React, { forwardRef, useMemo, useRef } from 'react';
import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
import React, { forwardRef, useCallback, useContext, useMemo, useRef } from 'react';
import FocusLock from 'react-focus-lock';

@@ -160,2 +160,4 @@ import Button from '../Button';

`;
const CloseModalContext = /*#__PURE__*/React.createContext(() => {});
export const useCloseModal = () => useContext(CloseModalContext);

@@ -189,5 +191,12 @@ /**

useBodyScroll(!visible);
useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', onClose);
const titleId = useMemo(() => `modal-title-${Math.random().toString(36).slice(2, 11)}`, []);
const bodyId = useMemo(() => id || `modal-body-${Math.random().toString(36).slice(2, 11)}`, [id]);
const clickHandler = useCallback(e => {
e.stopPropagation();
onClick(e);
}, [onClick]);
const keyDownHandler = useCallback(e => {
if (e.key === 'Escape') onClose();
}, [onClose]);
const ariaLabelledBy = useMemo(() => header === undefined ? titleId : undefined, [header, titleId]);
if (!mounted) return null;

@@ -197,18 +206,16 @@ return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ModalMask, {

}), /*#__PURE__*/React.createElement(Container, {
onClick: e => {
e.stopPropagation();
onClose();
}
onClick: clickHandler
}, /*#__PURE__*/React.createElement(FocusLock, {
autoFocus: false
autoFocus: true
}, /*#__PURE__*/React.createElement(CloseModalContext.Provider, {
value: onClose
}, /*#__PURE__*/React.createElement(Content, {
visible: visible,
size: size,
onClick: e => {
e.stopPropagation();
onClick(e);
},
tabIndex: -1,
onKeyDown: keyDownHandler,
onClick: clickHandler,
role: "dialog",
"aria-modal": true,
"aria-labelledby": header === undefined ? titleId : undefined,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": bodyId,

@@ -236,3 +243,3 @@ ref: contentRef

onClick: onOk
}, okText)) : footer))));
}, okText)) : footer)))));
});

@@ -239,0 +246,0 @@ Modal.displayName = 'Modal';

@@ -0,3 +1,3 @@

import { WithSize } from '@os-design/styles';
import React from 'react';
import { WithSize } from '@os-design/styles';
declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;

@@ -10,4 +10,5 @@ export interface DrawerProps extends JsxDivProps, WithSize {

}
export declare const useCloseDrawer: () => () => void;
declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
export default Drawer;
//# sourceMappingURL=index.d.ts.map

@@ -23,4 +23,5 @@ import { WithSize } from '@os-design/styles';

} & MaskProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
export declare const useCloseModal: () => () => void;
declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
export default Modal;
//# sourceMappingURL=index.d.ts.map
{
"name": "@os-design/core",
"version": "1.0.177",
"version": "1.0.178",
"license": "UNLICENSED",

@@ -61,3 +61,3 @@ "repository": "git@gitlab.com:os-team/libs/os-design.git",

},
"gitHead": "050f234718c73502f13347623abe8c243ac1a79f"
"gitHead": "784006b6b4a3c36fe8976d23907c0a69a84f8bc8"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc