@os-design/core - npm Package Compare versions

Comparing version 0.0.32 to 0.0.33

lib/Input/InputField.d.ts

		@@ -14,2 +14,3 @@ /// <reference types="react" />
		export declare const placeholderDarkMode: import("@emotion/utils").SerializedStyles;
		export declare const placeholder: (p: WithTheme & Pick<InputProps, "left" \| "right" \| "type" \| "placeholder" \| "onChange" \| "darkMode" \| "value">) => import("@emotion/utils").SerializedStyles;
		export declare const INPUT_FIELD_PADDING_HORIZONTAL_EM = 0.7;
		@@ -16,0 +17,0 @@ declare const InputField: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Pick<InputProps, "left" \| "right" \| "type" \| "placeholder" \| "onChange" \| "darkMode" \| "value">, {

lib/Input/InputField.js

		@@ -43,3 +43,3 @@ "use strict";
		`;
		const placeholder = (p) => core_1.css `
		exports.placeholder = (p) => core_1.css `
		&::placeholder {
		@@ -67,3 +67,3 @@ ${p.darkMode ? exports.placeholderDarkMode : exports.placeholderDefault(p)};
		${exports.focus};
		${placeholder};
		${exports.placeholder};

		@@ -70,0 +70,0 @@ ${addonPadding};

lib/Link/index.d.ts

		@@ -8,2 +8,3 @@ import { BaseProps } from '@os-design/styled';
		underline?: 'hover' \| 'always' \| 'never';
		target?: '_blank' \| '_self' \| '_parent' \| '_top' \| string;
		}
		@@ -10,0 +11,0 @@ declare const Link: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, LinkProps, {

lib/Select/index.js

		@@ -28,3 +28,3 @@ "use strict";
		const containerRef = react_1.useRef(null);
		const [dropdownRect, setDropdownRect] = react_1.useState({
		const [dropdownBounds, setDropdownBounds] = react_1.useState({
		top: 0,
		@@ -40,3 +40,3 @@ left: 0,
		: {};
		setDropdownRect({
		setDropdownBounds({
		top: (containerRect.top \|\| 0) - bodyRect.top + (containerRect.height \|\| 0),
		@@ -50,5 +50,3 @@ left: (containerRect.left \|\| 0) - bodyRect.left,
		window.addEventListener('resize', throttledUpdateDrowdownPosition);
		return () => {
		window.removeEventListener('resize', throttledUpdateDrowdownPosition);
		};
		return () => window.removeEventListener('resize', throttledUpdateDrowdownPosition);
		}, []);
		@@ -66,5 +64,5 @@ const changeHandler = (value) => {
		react_1.default.createElement(SelectToggle_1.default, { className: props.className, darkMode: props.darkMode, placeholder: props.placeholder, label: selectedOption ? selectedOption.title : undefined, open: open, onClick: () => setOpen(!open), ref: toggleRef }),
		react_1.default.createElement(SelectDropdown_1.default, { sizing: props.sizing, placeholder: props.placeholder, options: props.options, value: props.value, onChange: changeHandler, open: open, setOpen: setOpen, rect: dropdownRect })));
		react_1.default.createElement(SelectDropdown_1.default, { sizing: props.sizing, placeholder: props.placeholder, options: props.options, value: props.value, onChange: changeHandler, open: open, setOpen: setOpen, bounds: dropdownBounds })));
		};
		exports.default = Select;
		//# sourceMappingURL=index.js.map

lib/Select/SelectDropdown.js

		@@ -21,3 +21,2 @@ "use strict";
		const updateDropdownType = () => {
		console.log(window.innerWidth);
		const nextDropdownType = window.innerWidth > utils_1.minBreakpoints.xs ? 'desktop' : 'mobile';
		@@ -30,5 +29,3 @@ if (nextDropdownType !== dropdownType) {
		window.addEventListener('resize', updateDropdownType);
		return () => {
		window.removeEventListener('resize', updateDropdownType);
		};
		return () => window.removeEventListener('resize', updateDropdownType);
		}, [dropdownType]);
		@@ -38,5 +35,5 @@ if (dropdownType === 'mobile') {
		}
		return (react_1.default.createElement(SelectDropdownDesktop_1.default, { sizing: props.sizing, options: props.options, value: props.value, onChange: props.onChange, open: props.open, setOpen: props.setOpen, rect: props.rect }));
		return (react_1.default.createElement(SelectDropdownDesktop_1.default, { sizing: props.sizing, options: props.options, value: props.value, onChange: props.onChange, open: props.open, setOpen: props.setOpen, bounds: props.bounds }));
		};
		exports.default = SelectDropdown;
		//# sourceMappingURL=SelectDropdown.js.map

lib/Select/SelectDropdownDesktop.d.ts

		import React from 'react';
		import { SelectProps } from './index';
		export interface SelectDropdownRect {
		export interface SelectDropdownBounds {
		top: number;
		@@ -11,3 +11,3 @@ left: number;
		setOpen: (open: boolean) => void;
		rect: SelectDropdownRect;
		bounds: SelectDropdownBounds;
		};
		@@ -14,0 +14,0 @@ declare const SelectDropdownDesktop: React.FC<SelectDropdownDesktopProps>;

lib/Select/SelectDropdownDesktop.js

		@@ -21,3 +21,3 @@ "use strict";
		const SelectDropdownList_1 = __importDefault(require("./SelectDropdownList"));
		const SelectDropdownContainer = styled_1.default('div', utils_1.omitProps(['sizing', 'open', 'rect'])) `
		const SelectDropdownContainer = styled_1.default('div', utils_1.omitProps(['sizing', 'open', 'bounds'])) `
		display: none;
		@@ -27,5 +27,5 @@ ${p => p.open && core_1.css `display: block;`};
		position: absolute;
		top: ${p => p.rect.top}px;
		left: ${p => p.rect.left}px;
		width: ${p => p.rect.width}px;
		top: ${p => p.bounds.top}px;
		left: ${p => p.bounds.left}px;
		width: ${p => p.bounds.width}px;
		z-index: 2000;
		@@ -56,3 +56,3 @@
		return (react_1.default.createElement(Portal_1.default, null,
		react_1.default.createElement(SelectDropdownContainer, { sizing: props.sizing, open: props.open, rect: props.rect, onClick: e => e.stopPropagation() },
		react_1.default.createElement(SelectDropdownContainer, { sizing: props.sizing, open: props.open, bounds: props.bounds, onClick: e => e.stopPropagation() },
		react_1.default.createElement(SelectDropdownListDesktop, { options: props.options, value: props.value, onChange: props.onChange }))));
		@@ -59,0 +59,0 @@ };

package.json

lib/Input/InputField.d.ts.map