Socket
Socket
Sign inDemoInstall

@equinor/eds-lab-react

Package Overview
Dependencies
52
Maintainers
4
Versions
23
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.7.1 to 0.7.2

54

dist/esm/components/CSSButton/Button.js

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

import _objectSpread from '@babel/runtime/helpers/objectSpread2';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { forwardRef, createElement } from 'react';

@@ -9,29 +11,31 @@ import { clsx } from '../../eds-lab-react/node_modules/.pnpm/clsx@1.2.1/node_modules/clsx/dist/clsx.m.js';

const CSSButton = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
let {
color = 'primary',
variant = 'contained',
children,
disabled = false,
href,
tabIndex = 0,
fullWidth = false,
className,
...other
} = _ref;
const {
density
} = useEds();
const as = href && !disabled ? 'a' : other.as ? other.as : 'button';
var _excluded = ["color", "variant", "children", "disabled", "href", "tabIndex", "fullWidth", "className"];
var CSSButton = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
var _ref$color = _ref.color,
color = _ref$color === void 0 ? 'primary' : _ref$color,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'contained' : _ref$variant,
children = _ref.children,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
href = _ref.href,
_ref$tabIndex = _ref.tabIndex,
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
_ref$fullWidth = _ref.fullWidth,
fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
className = _ref.className,
other = _objectWithoutProperties(_ref, _excluded);
var _useEds = useEds(),
density = _useEds.density;
var as = href && !disabled ? 'a' : other.as ? other.as : 'button';
// const type = href || other.as ? undefined : 'button'
const classNames = clsx(['eds-typography-navigation__btn', 'eds-btn', color, variant, density, className]);
const buttonProps = {
ref,
href,
disabled,
tabIndex,
className: classNames,
...other
};
var classNames = clsx(['eds-typography-navigation__btn', 'eds-btn', color, variant, density, className]);
var buttonProps = _objectSpread({
ref: ref,
href: href,
disabled: disabled,
tabIndex: tabIndex,
className: classNames
}, other);
return /*#__PURE__*/createElement(as, buttonProps, fullWidth ? /*#__PURE__*/jsx(InnerFullWidth, {

@@ -38,0 +42,0 @@ children: children

23

dist/esm/components/CSSButton/InnerFullWidth.js

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

import _typeof from '@babel/runtime/helpers/typeof';
import { forwardRef, Children } from 'react';

@@ -5,14 +6,14 @@ import './button.css.js';

const InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth(_ref, ref) {
let {
children
} = _ref;
var InnerFullWidth = /*#__PURE__*/forwardRef(function InnerFullWidth(_ref, ref) {
var children = _ref.children;
// We need everything in elements for proper flexing 💪
const updatedChildren = Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsx("span", {
style: {
textAlign: 'center',
flex: 1
},
children: child
}) : child);
var updatedChildren = Children.map(children, function (child) {
return _typeof(child) !== 'object' ? /*#__PURE__*/jsx("span", {
style: {
textAlign: 'center',
flex: 1
},
children: child
}) : child;
});
return /*#__PURE__*/jsx("span", {

@@ -19,0 +20,0 @@ className: "eds-btn-inner full-width",

223

dist/esm/components/DatePicker/DatePicker.js

@@ -0,1 +1,4 @@

import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { forwardRef, useState, useCallback, useEffect, useRef, useImperativeHandle } from 'react';

@@ -5,3 +8,3 @@ import DatePicker, { registerLocale } from 'react-datepicker';

import enGb from '../../eds-lab-react/node_modules/.pnpm/date-fns@2.30.0/node_modules/date-fns/esm/locale/en-GB/index.js';
import styled, { ThemeProvider, css } from 'styled-components';
import styled, { StyleSheetManager, ThemeProvider, css } from 'styled-components';
import { calendar } from '@equinor/eds-icons';

@@ -14,122 +17,132 @@ import { PopupHeader } from './PopupHeader.js';

var _excluded = ["children"];
registerLocale('en-gb', enGb);
const ReactDatePicker = /*#__PURE__*/forwardRef(function DatePicker(_ref, ref) {
let {
label,
dateValue,
onChanged,
id,
disabled,
disableFuture,
disableBeforeDate,
disableAfterDate,
className,
dateFormat = 'dd.MM.yyyy',
placeholder = 'DD.MM.YYYY',
readOnly = false,
popperPlacement,
locale = 'en-gb',
renderCustomHeader,
minDate,
maxDate
} = _ref;
const [date, setDate] = useState(dateValue);
const onDateValueChange = useCallback(date => {
var ReactDatePicker = /*#__PURE__*/forwardRef(function DatePicker(_ref, ref) {
var label = _ref.label,
dateValue = _ref.dateValue,
onChanged = _ref.onChanged,
id = _ref.id,
disabled = _ref.disabled,
disableFuture = _ref.disableFuture,
disableBeforeDate = _ref.disableBeforeDate,
disableAfterDate = _ref.disableAfterDate,
className = _ref.className,
_ref$dateFormat = _ref.dateFormat,
dateFormat = _ref$dateFormat === void 0 ? 'dd.MM.yyyy' : _ref$dateFormat,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? 'DD.MM.YYYY' : _ref$placeholder,
_ref$readOnly = _ref.readOnly,
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
popperPlacement = _ref.popperPlacement,
_ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? 'en-gb' : _ref$locale,
renderCustomHeader = _ref.renderCustomHeader,
minDate = _ref.minDate,
maxDate = _ref.maxDate;
var _useState = useState(dateValue),
_useState2 = _slicedToArray(_useState, 2),
date = _useState2[0],
setDate = _useState2[1];
var onDateValueChange = useCallback(function (date) {
setDate(date);
onChanged === null || onChanged === void 0 ? void 0 : onChanged(date);
}, [onChanged]);
useEffect(() => {
useEffect(function () {
onDateValueChange(dateValue);
}, [dateValue, onDateValueChange]);
const localRef = useRef();
useImperativeHandle(ref, () => localRef.current);
const customHeader = renderCustomHeader || (props => /*#__PURE__*/jsx(PopupHeader, {
...props,
changeDate: onDateValueChange
}));
return /*#__PURE__*/jsx(ThemeProvider, {
theme: datePicker,
children: /*#__PURE__*/jsxs(Container, {
className: `date-picker ${className || ''}`,
children: [/*#__PURE__*/jsx(Label, {
label: label,
htmlFor: id,
className: `date-label`,
disabled: disabled
}), /*#__PURE__*/jsx(StyledDatepicker, {
ref: localRef,
locale: locale,
selected: date,
disabled: disabled,
className: "eds-datepicker",
calendarClassName: "eds-datepicker-calendar",
onChange: onDateValueChange,
dateFormat: dateFormat,
placeholderText: placeholder,
id: id,
onKeyDown: event => {
// If you shift-tab while focusing the input-element, it should close the pop-over.
// Not currently supported by react-datepicker.
if (event.code === 'Tab' && event.shiftKey && event.target.nodeName == 'INPUT') {
var _localRef$current;
(_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.setOpen(false);
}
},
filterDate: date => {
if (disableFuture && new Date() < date) {
return false;
}
if (disableBeforeDate && date < disableBeforeDate) {
return false;
}
if (disableAfterDate && date > disableAfterDate) {
return false;
}
return true;
},
autoComplete: "false",
popperPlacement: popperPlacement,
renderCustomHeader: customHeader,
shouldCloseOnSelect: true,
readOnly: readOnly,
calendarContainer: _ref2 => {
let {
children,
...rest
} = _ref2;
return /*#__PURE__*/jsx(Paper, {
...rest,
elevation: "temporary_nav",
style: {
maxWidth: '312px'
},
children: children
});
},
minDate: minDate,
maxDate: maxDate
}), /*#__PURE__*/jsx(CalendarIcon, {
name: "calendar",
className: "calendar-icon",
color: disabled ? datePicker.colors.disabledText : datePicker.colors.iconGray,
data: calendar,
size: 24
})]
var localRef = useRef();
useImperativeHandle(ref, function () {
return localRef.current;
});
var customHeader = renderCustomHeader || function (props) {
return /*#__PURE__*/jsx(PopupHeader, _objectSpread(_objectSpread({}, props), {}, {
changeDate: onDateValueChange
}));
};
var forbiddenProps = ['showPopperArrow', 'arrowProps'];
return /*#__PURE__*/jsx(StyleSheetManager, {
shouldForwardProp: function shouldForwardProp(prop) {
return !forbiddenProps.includes(prop);
},
children: /*#__PURE__*/jsx(ThemeProvider, {
theme: datePicker,
children: /*#__PURE__*/jsxs(Container, {
className: "date-picker ".concat(className || ''),
children: [/*#__PURE__*/jsx(Label, {
label: label,
htmlFor: id,
className: "date-label",
disabled: disabled
}), /*#__PURE__*/jsx(StyledDatepicker, {
ref: localRef,
locale: locale,
selected: date,
disabled: disabled,
className: "eds-datepicker",
calendarClassName: "eds-datepicker-calendar",
onChange: onDateValueChange,
dateFormat: dateFormat,
placeholderText: placeholder,
id: id,
onKeyDown: function onKeyDown(event) {
// If you shift-tab while focusing the input-element, it should close the pop-over.
// Not currently supported by react-datepicker.
if (event.code === 'Tab' && event.shiftKey && event.target.nodeName == 'INPUT') {
var _localRef$current;
(_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.setOpen(false);
}
},
filterDate: function filterDate(date) {
if (disableFuture && new Date() < date) {
return false;
}
if (disableBeforeDate && date < disableBeforeDate) {
return false;
}
if (disableAfterDate && date > disableAfterDate) {
return false;
}
return true;
},
autoComplete: "false",
popperPlacement: popperPlacement,
renderCustomHeader: customHeader,
shouldCloseOnSelect: true,
readOnly: readOnly,
calendarContainer: function calendarContainer(_ref2) {
var children = _ref2.children,
rest = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/jsx(Paper, _objectSpread(_objectSpread({}, rest), {}, {
elevation: "temporary_nav",
style: {
maxWidth: '312px'
},
children: children
}));
},
minDate: minDate,
maxDate: maxDate
}), /*#__PURE__*/jsx(CalendarIcon, {
name: "calendar",
className: "calendar-icon",
color: disabled ? datePicker.colors.disabledText : datePicker.colors.iconGray,
data: calendar,
size: 24
})]
})
})
});
});
const Container = styled.div.withConfig({
var Container = styled.div.withConfig({
displayName: "DatePicker__Container",
componentId: "sc-5xkmhi-0"
})(["width:100%;min-width:128px;max-width:148px;display:flex;flex-direction:column;position:relative;box-sizing:content-box;.eds-datepicker{font-family:", " !important;}.react-datepicker__month-container{width:", ";}.react-datepicker__header{background-color:", ";border-bottom:none;padding:0;}.react-datepicker__current-month{font-weight:500;}.react-datepicker__day-names{border-top:1px solid #ececec;margin:10px 0 0 0;padding:10px 0 0 0;text-align:center;}.react-datepicker__day-name{color:#6f6f6f;font-size:11px;visibility:hidden;line-height:unset;width:35px;}.react-datepicker__day-name:first-letter{visibility:visible;}.react-datepicker__day{color:#007079;font-weight:500;width:35px;line-height:35px;}.react-datepicker__day--selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{background-color:#007079;color:white;}.react-datepicker__day--keyboard-selected{background-color:unset;}.react-datepicker__day--disabled{color:#ccc;}.react-datepicker-popper{z-index:4 !important;}"], datePicker.entities.title.typography.fontFamily, datePicker.width, datePicker.background);
const StyledDatepicker = styled(DatePicker).withConfig({
var StyledDatepicker = styled(DatePicker).withConfig({
displayName: "DatePicker__StyledDatepicker",
componentId: "sc-5xkmhi-1"
})(["", ""], _ref3 => {
let {
theme
} = _ref3;
})(["", ""], function (_ref3) {
var theme = _ref3.theme;
return css(["height:24px;font-family:", ";font-size:", ";color:", ";line-height:", ";box-shadow:inset 0 -1px 0 0 #6f6f6f;background-color:", ";border:none;padding:6px;width:100%;max-width:136px;border-radius:0%;&:focus{border-radius:none;", "}&:disabled{color:var(--eds-input-color);cursor:not-allowed;box-shadow:none;}"], theme.entities.title.typography.fontFamily, theme.entities.title.typography.fontSize, theme.entities.title.typography.color, theme.entities.title.typography.lineHeight, theme.background, outlineTemplate(theme.states.focus.outline));
});
const CalendarIcon = styled(Icon).withConfig({
var CalendarIcon = styled(Icon).withConfig({
displayName: "DatePicker__CalendarIcon",

@@ -136,0 +149,0 @@ componentId: "sc-5xkmhi-2"

74

dist/esm/components/DatePicker/DatePicker.tokens.js
import { tokens } from '@equinor/eds-tokens';
const {
spacings: {
comfortable: {
medium: spacingM
}
},
typography: {
input: {
text,
label
},
navigation: {
menu_title,
button
}
},
colors: {
text: {
static_icons__tertiary: {
rgba: iconTertiary
}
},
interactive: {
primary__resting: {
rgba: focusColor
},
disabled__text: {
rgba: disabledText
}
},
ui: {
background__light: {
rgba: background
}
},
infographic: {
primary__moss_green_13: {
rgba: primary13
},
primary__moss_green_100: {
rgba: primary100
}
}
},
shape: {
corners: {
borderRadius
}
}
} = tokens;
const datePicker = {
var spacingM = tokens.spacings.comfortable.medium,
_tokens$typography = tokens.typography,
_tokens$typography$in = _tokens$typography.input,
text = _tokens$typography$in.text,
label = _tokens$typography$in.label,
_tokens$typography$na = _tokens$typography.navigation,
menu_title = _tokens$typography$na.menu_title,
button = _tokens$typography$na.button,
_tokens$colors = tokens.colors,
iconTertiary = _tokens$colors.text.static_icons__tertiary.rgba,
_tokens$colors$intera = _tokens$colors.interactive,
focusColor = _tokens$colors$intera.primary__resting.rgba,
disabledText = _tokens$colors$intera.disabled__text.rgba,
background = _tokens$colors.ui.background__light.rgba,
_tokens$colors$infogr = _tokens$colors.infographic,
primary13 = _tokens$colors$infogr.primary__moss_green_13.rgba,
primary100 = _tokens$colors$infogr.primary__moss_green_100.rgba,
borderRadius = tokens.shape.corners.borderRadius;
var datePicker = {
width: '312px',
background,
background: background,
colors: {

@@ -60,3 +28,3 @@ green13: primary13,

iconGray: iconTertiary,
disabledText
disabledText: disabledText
},

@@ -63,0 +31,0 @@ border: {

74

dist/esm/components/DatePicker/DatePickerSelectHeader.js

@@ -7,15 +7,13 @@ import styled from 'styled-components';

const DatePickerSelectHeader = _ref => {
let {
date,
changeYear,
changeMonth,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled
} = _ref;
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const years = [];
for (let i = 1970; i < 2060; i++) {
var DatePickerSelectHeader = function DatePickerSelectHeader(_ref) {
var date = _ref.date,
changeYear = _ref.changeYear,
changeMonth = _ref.changeMonth,
decreaseMonth = _ref.decreaseMonth,
increaseMonth = _ref.increaseMonth,
prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
nextMonthButtonDisabled = _ref.nextMonthButtonDisabled;
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var years = [];
for (var i = 1970; i < 2060; i++) {
years.push(i);

@@ -26,3 +24,3 @@ }

variant: "ghost_icon",
onClick: event => {
onClick: function onClick(event) {
event.preventDefault();

@@ -41,15 +39,13 @@ event.stopPropagation();

name: "year",
onChange: _ref2 => {
let {
target: {
value
}
} = _ref2;
onChange: function onChange(_ref2) {
var value = _ref2.target.value;
return changeYear(Number(value));
},
value: date.getFullYear(),
children: years.map(year => /*#__PURE__*/jsx("option", {
value: year,
children: year
}, year))
children: years.map(function (year) {
return /*#__PURE__*/jsx("option", {
value: year,
children: year
}, year);
})
}), /*#__PURE__*/jsx(MonthSelect, {

@@ -59,19 +55,17 @@ id: "SelectHeaderMonth",

name: "month",
onChange: _ref3 => {
let {
target: {
value
}
} = _ref3;
onChange: function onChange(_ref3) {
var value = _ref3.target.value;
return changeMonth(Number(value));
},
value: date.getMonth(),
children: months.map((month, i) => /*#__PURE__*/jsx("option", {
value: i,
children: month
}, month))
children: months.map(function (month, i) {
return /*#__PURE__*/jsx("option", {
value: i,
children: month
}, month);
})
})]
}), /*#__PURE__*/jsx(IconButton, {
variant: "ghost_icon",
onClick: event => {
onClick: function onClick(event) {
event.preventDefault();

@@ -89,19 +83,19 @@ event.stopPropagation();

};
const MonthSelect = styled(NativeSelect).withConfig({
var MonthSelect = styled(NativeSelect).withConfig({
displayName: "DatePickerSelectHeader__MonthSelect",
componentId: "sc-rn4feh-0"
})(["select{max-width:110px;}"]);
const YearSelect = styled(NativeSelect).withConfig({
var YearSelect = styled(NativeSelect).withConfig({
displayName: "DatePickerSelectHeader__YearSelect",
componentId: "sc-rn4feh-1"
})(["select{max-width:95px;}"]);
const Header = styled.div.withConfig({
var Header = styled.div.withConfig({
displayName: "DatePickerSelectHeader__Header",
componentId: "sc-rn4feh-2"
})(["padding:", " calc(", " / 2);width:100%;max-width:", ";display:grid;grid-template-columns:auto max-content auto;align-items:center;justify-content:space-between;box-sizing:border-box;"], datePicker.spacings.top, datePicker.spacings.right, datePicker.width);
const HeaderControls = styled.div.withConfig({
var HeaderControls = styled.div.withConfig({
displayName: "DatePickerSelectHeader__HeaderControls",
componentId: "sc-rn4feh-3"
})(["display:grid;gap:2px;place-items:center;grid-auto-flow:column;"]);
const IconButton = styled(Button).withConfig({
var IconButton = styled(Button).withConfig({
displayName: "DatePickerSelectHeader__IconButton",

@@ -108,0 +102,0 @@ componentId: "sc-rn4feh-4"

36

dist/esm/components/DatePicker/PopupHeader.js

@@ -9,16 +9,14 @@ import styled from 'styled-components';

const PopupHeader = _ref => {
let {
date,
changeDate,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled
} = _ref;
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var PopupHeader = function PopupHeader(_ref) {
var date = _ref.date,
changeDate = _ref.changeDate,
decreaseMonth = _ref.decreaseMonth,
increaseMonth = _ref.increaseMonth,
prevMonthButtonDisabled = _ref.prevMonthButtonDisabled,
nextMonthButtonDisabled = _ref.nextMonthButtonDisabled;
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return /*#__PURE__*/jsxs(Header, {
children: [/*#__PURE__*/jsx(IconButton, {
variant: "ghost_icon",
onClick: event => {
onClick: function onClick(event) {
event.preventDefault();

@@ -38,3 +36,5 @@ event.stopPropagation();

variant: "ghost",
onClick: () => changeDate === null || changeDate === void 0 ? void 0 : changeDate(new Date()),
onClick: function onClick() {
return changeDate === null || changeDate === void 0 ? void 0 : changeDate(new Date());
},
children: "Today"

@@ -44,3 +44,3 @@ })]

variant: "ghost_icon",
onClick: event => {
onClick: function onClick(event) {
event.preventDefault();

@@ -58,19 +58,19 @@ event.stopPropagation();

};
const Header = styled.div.withConfig({
var Header = styled.div.withConfig({
displayName: "PopupHeader__Header",
componentId: "sc-1wyso3y-0"
})(["padding:", " ", ";width:100%;max-width:", ";display:grid;grid-template-columns:auto max-content auto;align-items:center;justify-content:space-between;box-sizing:border-box;"], datePicker.spacings.top, datePicker.spacings.right, datePicker.width);
const HeaderControls = styled.div.withConfig({
var HeaderControls = styled.div.withConfig({
displayName: "PopupHeader__HeaderControls",
componentId: "sc-1wyso3y-1"
})(["display:grid;place-items:center;grid-auto-flow:column;"]);
const IconButton = styled(Button).withConfig({
var IconButton = styled(Button).withConfig({
displayName: "PopupHeader__IconButton",
componentId: "sc-1wyso3y-2"
})(["padding:0;margin:0;line-height:0;text-align:center;color:", ";background-color:", ";border:none;span{padding-left:0 !important;}"], datePicker.colors.green100, datePicker.background);
const HeaderTitle = styled(Typography).withConfig({
var HeaderTitle = styled(Typography).withConfig({
displayName: "PopupHeader__HeaderTitle",
componentId: "sc-1wyso3y-3"
})(["", ""], typographyTemplate(datePicker.entities.title.typography));
const TodayLabel = styled(Button).withConfig({
var TodayLabel = styled(Button).withConfig({
displayName: "PopupHeader__TodayLabel",

@@ -77,0 +77,0 @@ componentId: "sc-1wyso3y-4"

195

dist/esm/components/TimePicker/TimePicker.js

@@ -0,1 +1,4 @@

import _objectSpread from '@babel/runtime/helpers/objectSpread2';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { forwardRef, useState, useEffect } from 'react';

@@ -10,91 +13,86 @@ import { useCombobox } from 'downshift';

const Container = styled.div.withConfig({
var _excluded = ["label", "className", "timeRange", "value", "onValueChanged", "disabled", "readOnly"];
var Container = styled.div.withConfig({
displayName: "TimePicker__Container",
componentId: "sc-igy322-0"
})(["position:relative;width:100%;max-width:102px;display:flex;flex-direction:column;position:relative;"]);
const StyledList = styled(List).withConfig({
var StyledList = styled(List).withConfig({
displayName: "TimePicker__StyledList",
componentId: "sc-igy322-1"
})(["background-color:", ";box-shadow:", ";overflow-y:scroll;max-height:300px;padding:0;", " margin-top:4px;position:absolute;top:54px;right:0;left:0;z-index:50;"], timePicker.background, timePicker.boxShadow, bordersTemplate(timePicker.border));
const StyledListItem = styled(List.Item).withConfig({
var StyledListItem = styled(List.Item).withConfig({
displayName: "TimePicker__StyledListItem",
componentId: "sc-igy322-2"
})(_ref => {
let {
theme,
highlighted,
active
} = _ref;
const backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
})(function (_ref) {
var theme = _ref.theme,
highlighted = _ref.highlighted,
active = _ref.active;
var backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
return css(["margin:0;list-style:none;background-color:", ";", ";cursor:", ";max-width:90px;"], backgroundColor, typographyTemplate(theme.typography), highlighted === 'true' ? 'pointer' : 'default');
});
const StyledButton = styled(Button).withConfig({
var StyledButton = styled(Button).withConfig({
displayName: "TimePicker__StyledButton",
componentId: "sc-igy322-3"
})(_ref2 => {
let {
theme: {
entities: {
button
}
}
} = _ref2;
})(function (_ref2) {
var button = _ref2.theme.entities.button;
return css(["position:absolute;right:", ";height:", ";width:", ";top:", ";"], button.spacings.right, button.height, button.height, button.spacings.top);
});
const StyledInputWrapper = styled.div.withConfig({
var StyledInputWrapper = styled.div.withConfig({
displayName: "TimePicker__StyledInputWrapper",
componentId: "sc-igy322-4"
})(["position:relative;"]);
const PaddedStyledListItem = styled(StyledListItem).withConfig({
var PaddedStyledListItem = styled(StyledListItem).withConfig({
displayName: "TimePicker__PaddedStyledListItem",
componentId: "sc-igy322-5"
})(["", ""], _ref3 => {
let {
theme
} = _ref3;
})(["", ""], function (_ref3) {
var theme = _ref3.theme;
return spacingsTemplate(theme.spacings);
});
const TimeIcon = styled(Icon).withConfig({
var TimeIcon = styled(Icon).withConfig({
displayName: "TimePicker__TimeIcon",
componentId: "sc-igy322-6"
})(["position:absolute;z-index:1;width:18px;height:18px;color:#616161;cursor:pointer;"]);
const defaultRange = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
const TimePicker = /*#__PURE__*/forwardRef(function TimePicker(_ref4, ref) {
let {
label,
className,
timeRange = defaultRange,
value,
onValueChanged,
disabled = false,
readOnly = false,
...other
} = _ref4;
const [timeValues, setTimeValues] = useState(timeRange);
const [selectedTime, setSelectedTime] = useState(value ? value : timeValues[0]);
useEffect(() => {
var defaultRange = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
var TimePicker = /*#__PURE__*/forwardRef(function TimePicker(_ref4, ref) {
var label = _ref4.label,
className = _ref4.className,
_ref4$timeRange = _ref4.timeRange,
timeRange = _ref4$timeRange === void 0 ? defaultRange : _ref4$timeRange,
value = _ref4.value,
onValueChanged = _ref4.onValueChanged,
_ref4$disabled = _ref4.disabled,
disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
_ref4$readOnly = _ref4.readOnly,
readOnly = _ref4$readOnly === void 0 ? false : _ref4$readOnly,
other = _objectWithoutProperties(_ref4, _excluded);
var _useState = useState(timeRange),
_useState2 = _slicedToArray(_useState, 2),
timeValues = _useState2[0],
setTimeValues = _useState2[1];
var _useState3 = useState(value ? value : timeValues[0]),
_useState4 = _slicedToArray(_useState3, 2),
selectedTime = _useState4[0],
setSelectedTime = _useState4[1];
useEffect(function () {
setTimeValues(timeRange);
}, [timeRange]);
const isControlled = value !== undefined ? true : false;
const {
density
} = useEds();
const token = useToken({
density
var isControlled = value !== undefined ? true : false;
var _useEds = useEds(),
density = _useEds.density;
var token = useToken({
density: density
}, timePicker)();
let comboboxProps = {
var comboboxProps = {
items: timeValues,
onSelectedItemChange: changes => {
onSelectedItemChange: function onSelectedItemChange(changes) {
onValueChanged === null || onValueChanged === void 0 ? void 0 : onValueChanged(changes.selectedItem);
},
onInputValueChange: _ref5 => {
let {
inputValue
} = _ref5;
setSelectedTime(timeValues.find(item => item.toLowerCase().includes(inputValue.toLowerCase())));
onInputValueChange: function onInputValueChange(_ref5) {
var inputValue = _ref5.inputValue;
setSelectedTime(timeValues.find(function (item) {
return item.toLowerCase().includes(inputValue.toLowerCase());
}));
},
onIsOpenChange: _ref6 => {
let {
selectedItem
} = _ref6;
onIsOpenChange: function onIsOpenChange(_ref6) {
var selectedItem = _ref6.selectedItem;
setSelectedTime(selectedItem);

@@ -105,19 +103,17 @@ },

if (isControlled) {
comboboxProps = {
...comboboxProps,
comboboxProps = _objectSpread(_objectSpread({}, comboboxProps), {}, {
selectedItem: value
};
});
}
const {
isOpen,
getToggleButtonProps,
getLabelProps,
getMenuProps,
getInputProps,
highlightedIndex,
getItemProps,
openMenu,
selectedItem
} = useCombobox(comboboxProps);
const openSelect = () => {
var _useCombobox = useCombobox(comboboxProps),
isOpen = _useCombobox.isOpen,
getToggleButtonProps = _useCombobox.getToggleButtonProps,
getLabelProps = _useCombobox.getLabelProps,
getMenuProps = _useCombobox.getMenuProps,
getInputProps = _useCombobox.getInputProps,
highlightedIndex = _useCombobox.highlightedIndex,
getItemProps = _useCombobox.getItemProps,
openMenu = _useCombobox.openMenu,
selectedItem = _useCombobox.selectedItem;
var openSelect = function openSelect() {
if (!isOpen && !(disabled || readOnly)) {

@@ -132,20 +128,17 @@ openMenu();

ref: ref,
children: [/*#__PURE__*/jsx(Label, {
...getLabelProps(),
children: [/*#__PURE__*/jsx(Label, _objectSpread(_objectSpread({}, getLabelProps()), {}, {
label: label,
disabled: disabled
}), /*#__PURE__*/jsxs(StyledInputWrapper, {
children: [/*#__PURE__*/jsx(Input, {
...getInputProps({
disabled: disabled
}),
})), /*#__PURE__*/jsxs(StyledInputWrapper, {
children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, getInputProps({
disabled: disabled
})), {}, {
readOnly: readOnly,
onFocus: openSelect,
onClick: openSelect,
...other
}), /*#__PURE__*/jsx(StyledButton, {
variant: "ghost_icon",
...getToggleButtonProps({
disabled: disabled || readOnly
}),
onClick: openSelect
}, other)), /*#__PURE__*/jsx(StyledButton, _objectSpread(_objectSpread({
variant: "ghost_icon"
}, getToggleButtonProps({
disabled: disabled || readOnly
})), {}, {
"aria-label": 'toggle options',

@@ -160,17 +153,17 @@ title: "open",

})
})]
}), /*#__PURE__*/jsx(StyledList, {
...getMenuProps(),
}))]
}), /*#__PURE__*/jsx(StyledList, _objectSpread(_objectSpread({}, getMenuProps()), {}, {
role: "dialog",
children: isOpen && timeValues.map((item, index) => /*#__PURE__*/jsx(PaddedStyledListItem, {
highlighted: highlightedIndex === index ? 'true' : 'false',
active: selectedItem === item ? 'true' : 'false',
...getItemProps({
item,
index,
disabled: disabled
}),
children: item
}, `${item}`))
})]
children: isOpen && timeValues.map(function (item, index) {
return /*#__PURE__*/jsx(PaddedStyledListItem, _objectSpread(_objectSpread({
highlighted: highlightedIndex === index ? 'true' : 'false',
active: selectedItem === item ? 'true' : 'false'
}, getItemProps({
item: item,
index: index
})), {}, {
children: item
}), "".concat(item));
})
}))]
})

@@ -177,0 +170,0 @@ });

40

dist/esm/components/TimePicker/TimePicker.tokens.js

@@ -0,26 +1,17 @@

import _objectSpread from '@babel/runtime/helpers/objectSpread2';
import { tokens } from '@equinor/eds-tokens';
const {
typography,
colors,
shape: {
straight,
corners: {
borderRadius
}
},
spacings: {
comfortable: {
small: spacingSmall,
medium: spacingMedium,
large: spacingLarge
}
},
elevation: {
temporary_nav: boxShadow
}
} = tokens;
const timePicker = {
var typography = tokens.typography,
colors = tokens.colors,
_tokens$shape = tokens.shape,
straight = _tokens$shape.straight,
borderRadius = _tokens$shape.corners.borderRadius,
_tokens$spacings$comf = tokens.spacings.comfortable,
spacingSmall = _tokens$spacings$comf.small,
spacingMedium = _tokens$spacings$comf.medium,
spacingLarge = _tokens$spacings$comf.large,
boxShadow = tokens.elevation.temporary_nav;
var timePicker = {
background: colors.ui.background__default.rgba,
boxShadow,
boxShadow: boxShadow,
minHeight: straight.minHeight,

@@ -33,6 +24,5 @@ spacings: {

},
typography: {
...typography.navigation.menu_title,
typography: _objectSpread(_objectSpread({}, typography.navigation.menu_title), {}, {
color: colors.text.static_icons__default.rgba
},
}),
border: {

@@ -39,0 +29,0 @@ type: 'border',

4

dist/esm/eds-lab-react/node_modules/.pnpm/clsx@1.2.1/node_modules/clsx/dist/clsx.m.js

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

import _typeof from '@babel/runtime/helpers/typeof';
function r(e) {

@@ -5,3 +7,3 @@ var t,

n = "";
if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);else for (t in e) e[t] && (n && (n += " "), n += t);
if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == _typeof(e)) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);else for (t in e) e[t] && (n && (n += " "), n += t);
return n;

@@ -8,0 +10,0 @@ }

12

dist/esm/eds-lab-react/node_modules/.pnpm/date-fns@2.30.0/node_modules/date-fns/esm/locale/en-GB/_lib/formatLong/index.js

@@ -5,17 +5,17 @@ import buildFormatLongFn from '../../../_lib/buildFormatLongFn/index.js';

full: 'EEEE, d MMMM yyyy',
long: 'd MMMM yyyy',
"long": 'd MMMM yyyy',
medium: 'd MMM yyyy',
short: 'dd/MM/yyyy'
"short": 'dd/MM/yyyy'
};
var timeFormats = {
full: 'HH:mm:ss zzzz',
long: 'HH:mm:ss z',
"long": 'HH:mm:ss z',
medium: 'HH:mm:ss',
short: 'HH:mm'
"short": 'HH:mm'
};
var dateTimeFormats = {
full: "{{date}} 'at' {{time}}",
long: "{{date}} 'at' {{time}}",
"long": "{{date}} 'at' {{time}}",
medium: '{{date}}, {{time}}',
short: '{{date}}, {{time}}'
"short": '{{date}}, {{time}}'
};

@@ -22,0 +22,0 @@ var formatLong = {

2

dist/esm/eds-lab-react/node_modules/.pnpm/date-fns@2.30.0/node_modules/date-fns/esm/locale/en-US/_lib/localize/index.js

@@ -25,3 +25,3 @@ import buildLocalizeFn from '../../../_lib/buildLocalizeFn/index.js';

narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
"short": ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

@@ -28,0 +28,0 @@ wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

2

dist/esm/eds-lab-react/node_modules/.pnpm/date-fns@2.30.0/node_modules/date-fns/esm/locale/en-US/_lib/match/index.js

@@ -33,3 +33,3 @@ import buildMatchFn from '../../../_lib/buildMatchFn/index.js';

narrow: /^[smtwf]/i,
short: /^(su|mo|tu|we|th|fr|sa)/i,
"short": /^(su|mo|tu|we|th|fr|sa)/i,
abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,

@@ -36,0 +36,0 @@ wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i

35

package.json
{
"name": "@equinor/eds-lab-react",
"version": "0.7.1",
"version": "0.7.2",
"description": "The lab for the Equinor Design System",

@@ -40,10 +40,10 @@ "sideEffects": [

"@rollup/plugin-node-resolve": "^15.1.0",
"@storybook/addon-a11y": "^7.0.24",
"@storybook/addon-actions": "^7.0.24",
"@storybook/addon-docs": "^7.0.24",
"@storybook/addon-essentials": "^7.0.24",
"@storybook/addon-links": "^7.0.24",
"@storybook/builder-vite": "^7.0.24",
"@storybook/react": "^7.0.24",
"@storybook/react-vite": "^7.0.24",
"@storybook/addon-a11y": "^7.3.0",
"@storybook/addon-actions": "^7.3.0",
"@storybook/addon-docs": "^7.3.0",
"@storybook/addon-essentials": "^7.3.0",
"@storybook/addon-links": "^7.3.0",
"@storybook/builder-vite": "^7.3.0",
"@storybook/react": "^7.3.0",
"@storybook/react-vite": "^7.3.0",
"@testing-library/dom": "^9.3.1",

@@ -57,3 +57,2 @@ "@testing-library/jest-dom": "^5.16.5",

"@types/react-dom": "^18.0.10",
"@types/styled-components": "^5.1.26",
"@types/testing-library__jest-dom": "^5.14.6",

@@ -77,6 +76,6 @@ "babel-loader": "^9.1.2",

"rollup-plugin-postcss": "^4.0.2",
"storybook": "7.0.24",
"styled-components": "5.3.9",
"storybook": "7.3.0",
"styled-components": "6.0.8",
"tsc-watch": "^6.0.4",
"typescript": "^4.9.4",
"typescript": "^5.1.6",
"webpack": "^5.88.0"

@@ -87,3 +86,3 @@ },

"react-dom": ">=16.8",
"styled-components": ">=4.2 < 6"
"styled-components": ">=4.2"
},

@@ -94,9 +93,9 @@ "dependencies": {

"date-fns": "^2.30.0",
"downshift": "^7.6.0",
"downshift": "^8.2.1",
"react-datepicker": "^4.14.1",
"react-fast-compare": "3.2.2",
"@equinor/eds-core-react": "^0.32.2",
"@equinor/eds-icons": "^0.19.2",
"@equinor/eds-core-react": "^0.33.0",
"@equinor/eds-tokens": "0.9.2",
"@equinor/eds-utils": "^0.8.0"
"@equinor/eds-icons": "^0.19.3",
"@equinor/eds-utils": "^0.8.2"
},

@@ -103,0 +102,0 @@ "engines": {

dist/eds-lab-react.cjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc