Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@mirohq/design-system-base-input

Package Overview
Dependencies
Maintainers
2
Versions
86
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mirohq/design-system-base-input - npm Package Compare versions

Comparing version 0.0.1-input.1 to 0.0.1

279

dist/main.js

@@ -5,41 +5,3 @@ 'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var designSystemUtils = require('@mirohq/design-system-utils');
var interactions = require('@react-aria/interactions');
var designSystemPrimitive = require('@mirohq/design-system-primitive');
var designSystemStitches = require('@mirohq/design-system-stitches');
var designSystemIcons = require('@mirohq/design-system-icons');
var utils = require('@react-aria/utils');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const StyledIconExclamationPointCircle = designSystemStitches.styled(
designSystemIcons.IconExclamationPointCircle,
{
color: "$icon-danger"
}
);
const StyledIconCheckMark = designSystemStitches.styled(designSystemIcons.IconCheckMark, {
color: "$icon-success"
});
const StyledValidityBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
order: 3,
display: "flex",
alignItems: "center"
});
const StyledBaseInput = designSystemStitches.styled("div", {
alignItems: "center",
background: "$background-neutrals-container",
border: "1px solid $border-neutrals",
borderRadius: "$50",
display: "flex",
height: "max-content",
justifyContent: "flex-end",
position: "relative",
verticalAlign: "middle",
boxSizing: "border-box",
width: "100%",
const styles = {
variants: {

@@ -163,242 +125,5 @@ hovered: {

]
});
const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
const StyledInput = designSystemStitches.styled(designSystemPrimitive.Primitive.input, {
all: "unset",
background: "transparent",
color: "$text-neutrals",
width: "100%",
borderRadius: "$50",
order: 2,
"&::placeholder": {
fontStyle: "italic"
},
["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
color: "$text-neutrals-subtle"
},
"&:read-only": {
color: "$text-neutrals-subtle"
},
"&:disabled, &[aria-disabled=true], &[data-disabled]": {
caretColor: "transparent",
"&, &::placeholder": {
color: "$text-neutrals-disabled"
},
"&:selection": {
background: "transparent"
}
}
});
const InputContext = React.createContext({
actionSlotRef: { current: null },
setFocused: () => {
},
setHovered: () => {
},
setActive: () => {
}
});
const InputProvider = ({
children,
disabled,
ariaDisabled,
readOnly,
...restProps
}) => {
const actionSlotRef = React.useRef(null);
const [focused, setFocused] = React.useState(false);
const [hovered, setHovered] = React.useState(false);
const [active, setActive] = React.useState(false);
const editable = !designSystemUtils.booleanify(disabled) && !designSystemUtils.booleanify(ariaDisabled) && !designSystemUtils.booleanify(readOnly);
return /* @__PURE__ */ jsxRuntime.jsx(
InputContext.Provider,
{
value: {
...restProps,
setFocused,
setHovered,
setActive,
active,
hovered,
focused,
actionSlotRef,
disabled,
ariaDisabled,
readOnly,
editable
},
children
}
);
};
const useInputContext = () => React.useContext(InputContext);
const keyboardEventHandler = (e) => {
if (e.key !== "Tab") {
e.preventDefault();
}
};
const Input = React__default["default"].forwardRef((props, forwardRef) => {
const { ariaDisabled, disabled, readOnly, setFocused } = useInputContext();
let elementProps = props;
if (designSystemUtils.booleanify(ariaDisabled)) {
elementProps = designSystemUtils.removeEventProps(props, [
"onFocus",
"onBlur",
"onPointerMove"
]);
elementProps.onKeyDown = keyboardEventHandler;
elementProps.onKeyUp = keyboardEventHandler;
}
const onBlurEventHandler = () => {
setFocused == null ? void 0 : setFocused(false);
};
const onFocusEventHandler = () => {
setFocused == null ? void 0 : setFocused(true);
};
elementProps = utils.mergeProps(elementProps, {
onBlur: onBlurEventHandler,
onFocus: onFocusEventHandler
});
return /* @__PURE__ */ jsxRuntime.jsx(
StyledInput,
{
...elementProps,
"aria-disabled": ariaDisabled,
disabled,
readOnly,
ref: forwardRef
}
);
});
const StyledActionSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
variants: {
readOnly: {
true: {
"& svg[data-icon-component], & img[data-icon-component]": {
color: "$icon-neutrals-subtle"
}
}
}
}
});
const ActionSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
const { valid, hovered, editable, actionSlotRef, active, readOnly } = useInputContext();
const showInputSlot = valid === void 0 || designSystemUtils.booleanify(hovered) || designSystemUtils.booleanify(active);
let formattedChildren = children;
if (!designSystemUtils.booleanify(editable)) {
formattedChildren = designSystemUtils.addPropsToChildren(children, () => true, {
disabled: true
});
}
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: showInputSlot && /* @__PURE__ */ jsxRuntime.jsx(
StyledActionSlot,
{
...restProps,
readOnly,
ref: designSystemUtils.mergeRefs([forwardRef, actionSlotRef]),
children: formattedChildren
}
) });
});
const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
alignContent: "center",
display: "flex",
justifyContent: "center",
color: "$icon-neutrals-subtle",
variants: {
disabled: {
true: {
"& svg": {
color: "$icon-neutrals-disabled"
}
}
}
}
});
const IconSlot = React__default["default"].forwardRef((props, forwardRef) => {
const { ariaDisabled, disabled } = useInputContext();
return /* @__PURE__ */ jsxRuntime.jsx(
StyledIconSlot,
{
...props,
disabled: designSystemUtils.booleanify(disabled != null ? disabled : ariaDisabled),
ref: forwardRef
}
);
});
const Root = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
const {
valid,
ariaDisabled,
disabled,
readOnly,
focused,
active,
setHovered,
setActive
} = useInputContext();
const ref = React.useRef(null);
const { hoverProps, isHovered: hovered } = interactions.useHover({
onHoverChange: setHovered
});
const ariaDisabledOrDisabled = designSystemUtils.booleanify(ariaDisabled) || designSystemUtils.booleanify(disabled);
const showValidityIcon = !ariaDisabledOrDisabled && !designSystemUtils.booleanify(readOnly) && !designSystemUtils.booleanify(hovered) && !designSystemUtils.booleanify(focused) && !designSystemUtils.booleanify(active) && (valid === true || valid === false);
const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
return /* @__PURE__ */ jsxRuntime.jsxs(
StyledBaseInput,
{
...restProps,
...hoverProps,
ref: designSystemUtils.mergeRefs([ref, forwardRef]),
hovered,
focused,
valid,
disabled: designSystemUtils.booleanify(disabled),
ariaDisabled: designSystemUtils.booleanify(ariaDisabled),
readOnly: designSystemUtils.booleanify(readOnly),
"data-invalid": valid === false ? "" : void 0,
"data-valid": valid === true ? "" : void 0,
onFocus: () => {
setActive(true);
},
onBlur: () => {
setTimeout(() => {
var _a;
if ((ref == null ? void 0 : ref.current) != null && !((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
setActive(false);
}
}, 0);
},
children: [
children,
showValidityIcon && /* @__PURE__ */ jsxRuntime.jsx(StyledValidityBox, { children: /* @__PURE__ */ jsxRuntime.jsx(ValidIcon, { size: "small" }) })
]
}
);
});
const BaseInput = React__default["default"].forwardRef(
({ "aria-disabled": ariaDisabled, disabled, valid, readOnly, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(
InputProvider,
{
valid,
disabled,
ariaDisabled,
readOnly,
children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...restProps, ref: forwardRef })
}
)
);
BaseInput.ActionSlot = ActionSlot;
BaseInput.IconSlot = IconSlot;
BaseInput.Input = Input;
exports.BaseInput = BaseInput;
exports.styles = styles;
//# sourceMappingURL=main.js.map

275

dist/module.js

@@ -1,36 +0,2 @@

import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
import React, { createContext, useRef, useState, useContext } from 'react';
import { booleanify, removeEventProps, addPropsToChildren, mergeRefs } from '@mirohq/design-system-utils';
import { useHover } from '@react-aria/interactions';
import { Primitive } from '@mirohq/design-system-primitive';
import { styled } from '@mirohq/design-system-stitches';
import { IconExclamationPointCircle, IconCheckMark } from '@mirohq/design-system-icons';
import { mergeProps } from '@react-aria/utils';
const StyledIconExclamationPointCircle = styled(
IconExclamationPointCircle,
{
color: "$icon-danger"
}
);
const StyledIconCheckMark = styled(IconCheckMark, {
color: "$icon-success"
});
const StyledValidityBox = styled(Primitive.div, {
order: 3,
display: "flex",
alignItems: "center"
});
const StyledBaseInput = styled("div", {
alignItems: "center",
background: "$background-neutrals-container",
border: "1px solid $border-neutrals",
borderRadius: "$50",
display: "flex",
height: "max-content",
justifyContent: "flex-end",
position: "relative",
verticalAlign: "middle",
boxSizing: "border-box",
width: "100%",
const styles = {
variants: {

@@ -154,242 +120,5 @@ hovered: {

]
});
const disabledAndReadonlySelectors = ':read-only, :disabled, [aria-disabled="true"], [data-disabled]';
const StyledInput = styled(Primitive.input, {
all: "unset",
background: "transparent",
color: "$text-neutrals",
width: "100%",
borderRadius: "$50",
order: 2,
"&::placeholder": {
fontStyle: "italic"
},
["&:not(".concat(disabledAndReadonlySelectors, ")::placeholder")]: {
color: "$text-neutrals-subtle"
},
"&:read-only": {
color: "$text-neutrals-subtle"
},
"&:disabled, &[aria-disabled=true], &[data-disabled]": {
caretColor: "transparent",
"&, &::placeholder": {
color: "$text-neutrals-disabled"
},
"&:selection": {
background: "transparent"
}
}
});
const InputContext = createContext({
actionSlotRef: { current: null },
setFocused: () => {
},
setHovered: () => {
},
setActive: () => {
}
});
const InputProvider = ({
children,
disabled,
ariaDisabled,
readOnly,
...restProps
}) => {
const actionSlotRef = useRef(null);
const [focused, setFocused] = useState(false);
const [hovered, setHovered] = useState(false);
const [active, setActive] = useState(false);
const editable = !booleanify(disabled) && !booleanify(ariaDisabled) && !booleanify(readOnly);
return /* @__PURE__ */ jsx(
InputContext.Provider,
{
value: {
...restProps,
setFocused,
setHovered,
setActive,
active,
hovered,
focused,
actionSlotRef,
disabled,
ariaDisabled,
readOnly,
editable
},
children
}
);
};
const useInputContext = () => useContext(InputContext);
const keyboardEventHandler = (e) => {
if (e.key !== "Tab") {
e.preventDefault();
}
};
const Input = React.forwardRef((props, forwardRef) => {
const { ariaDisabled, disabled, readOnly, setFocused } = useInputContext();
let elementProps = props;
if (booleanify(ariaDisabled)) {
elementProps = removeEventProps(props, [
"onFocus",
"onBlur",
"onPointerMove"
]);
elementProps.onKeyDown = keyboardEventHandler;
elementProps.onKeyUp = keyboardEventHandler;
}
const onBlurEventHandler = () => {
setFocused == null ? void 0 : setFocused(false);
};
const onFocusEventHandler = () => {
setFocused == null ? void 0 : setFocused(true);
};
elementProps = mergeProps(elementProps, {
onBlur: onBlurEventHandler,
onFocus: onFocusEventHandler
});
return /* @__PURE__ */ jsx(
StyledInput,
{
...elementProps,
"aria-disabled": ariaDisabled,
disabled,
readOnly,
ref: forwardRef
}
);
});
const StyledActionSlot = styled(Primitive.div, {
variants: {
readOnly: {
true: {
"& svg[data-icon-component], & img[data-icon-component]": {
color: "$icon-neutrals-subtle"
}
}
}
}
});
const ActionSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
const { valid, hovered, editable, actionSlotRef, active, readOnly } = useInputContext();
const showInputSlot = valid === void 0 || booleanify(hovered) || booleanify(active);
let formattedChildren = children;
if (!booleanify(editable)) {
formattedChildren = addPropsToChildren(children, () => true, {
disabled: true
});
}
return /* @__PURE__ */ jsx(Fragment, { children: showInputSlot && /* @__PURE__ */ jsx(
StyledActionSlot,
{
...restProps,
readOnly,
ref: mergeRefs([forwardRef, actionSlotRef]),
children: formattedChildren
}
) });
});
const StyledIconSlot = styled(Primitive.div, {
alignContent: "center",
display: "flex",
justifyContent: "center",
color: "$icon-neutrals-subtle",
variants: {
disabled: {
true: {
"& svg": {
color: "$icon-neutrals-disabled"
}
}
}
}
});
const IconSlot = React.forwardRef((props, forwardRef) => {
const { ariaDisabled, disabled } = useInputContext();
return /* @__PURE__ */ jsx(
StyledIconSlot,
{
...props,
disabled: booleanify(disabled != null ? disabled : ariaDisabled),
ref: forwardRef
}
);
});
const Root = React.forwardRef(({ children, ...restProps }, forwardRef) => {
const {
valid,
ariaDisabled,
disabled,
readOnly,
focused,
active,
setHovered,
setActive
} = useInputContext();
const ref = useRef(null);
const { hoverProps, isHovered: hovered } = useHover({
onHoverChange: setHovered
});
const ariaDisabledOrDisabled = booleanify(ariaDisabled) || booleanify(disabled);
const showValidityIcon = !ariaDisabledOrDisabled && !booleanify(readOnly) && !booleanify(hovered) && !booleanify(focused) && !booleanify(active) && (valid === true || valid === false);
const ValidIcon = valid === true ? StyledIconCheckMark : StyledIconExclamationPointCircle;
return /* @__PURE__ */ jsxs(
StyledBaseInput,
{
...restProps,
...hoverProps,
ref: mergeRefs([ref, forwardRef]),
hovered,
focused,
valid,
disabled: booleanify(disabled),
ariaDisabled: booleanify(ariaDisabled),
readOnly: booleanify(readOnly),
"data-invalid": valid === false ? "" : void 0,
"data-valid": valid === true ? "" : void 0,
onFocus: () => {
setActive(true);
},
onBlur: () => {
setTimeout(() => {
var _a;
if ((ref == null ? void 0 : ref.current) != null && !((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
setActive(false);
}
}, 0);
},
children: [
children,
showValidityIcon && /* @__PURE__ */ jsx(StyledValidityBox, { children: /* @__PURE__ */ jsx(ValidIcon, { size: "small" }) })
]
}
);
});
const BaseInput = React.forwardRef(
({ "aria-disabled": ariaDisabled, disabled, valid, readOnly, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
InputProvider,
{
valid,
disabled,
ariaDisabled,
readOnly,
children: /* @__PURE__ */ jsx(Root, { ...restProps, ref: forwardRef })
}
)
);
BaseInput.ActionSlot = ActionSlot;
BaseInput.IconSlot = IconSlot;
BaseInput.Input = Input;
export { BaseInput };
export { styles };
//# sourceMappingURL=module.js.map

12

package.json
{
"name": "@mirohq/design-system-base-input",
"version": "0.0.1-input.1",
"version": "0.0.1",
"description": "",

@@ -28,12 +28,2 @@ "author": "Miro",

},
"dependencies": {
"@react-aria/interactions": "^3.13.0",
"@react-aria/utils": "^3.13.0",
"@react-types/shared": "^3.16.0",
"@mirohq/design-system-primitive": "^1.1.1",
"@mirohq/design-system-stitches": "^2.3.15-input.1",
"@mirohq/design-system-styles": "^1.1.12-input.1",
"@mirohq/design-system-types": "^0.6.2",
"@mirohq/design-system-utils": "^0.14.3"
},
"scripts": {

@@ -40,0 +30,0 @@ "build": "rollup -c ../../../../rollup.config.js",

dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet

dist/types.d.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc