@equinor/eds-lab-react - npm Package Compare versions

Comparing version 0.4.0-dev.20220524 to 0.4.1

dist/esm/components/DatePicker/DatePicker.js

@@ -1,2 +0,2 @@
-import { forwardRef, useState, useCallback } from 'react';
+import { forwardRef, useState, useCallback, useEffect, useRef, useImperativeHandle } from 'react';
 import DatePicker, { registerLocale } from 'react-datepicker';
@@ -34,2 +34,7 @@ import '../../node_modules/.pnpm/react-datepicker@4.7.0_sfoxds7t5ydpegc3knd667wn6m/node_modules/react-datepicker/dist/react-datepicker.css.js';
   }, [onChanged]);
+  useEffect(() => {
+    onDateValueChange(dateValue);
+  }, [dateValue, onDateValueChange]);
+  const localRef = useRef();
+  useImperativeHandle(ref, () => localRef.current);
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -45,3 +50,3 @@ theme: datePicker,
         }), /*#__PURE__*/jsx(StyledDatepicker, {
-          ref: ref,
+          ref: localRef,
           locale: locale,
@@ -55,2 +60,11 @@ selected: date,
           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 => {
@@ -90,2 +104,3 @@ if (disableFuture) {
           className: "calendar-icon",
+          color: datePicker.colors.iconGray,
           data: calendar,
@@ -109,3 +124,3 @@ size: 24
   } = _ref3;
-  return css(["position:relative;color:", ";font-family:", ";font-size:", ";line-height:", ";span{padding-left:8px;}"], theme.entities.label.typography.color, theme.entities.label.typography.fontFamily, theme.entities.label.typography.fontSize, theme.entities.label.typography.lineHeight);
+  return css(["position:relative;color:", ";font-family:", ";font-size:", ";line-height:", ";span{padding-left:8px;color:", ";}"], theme.entities.label.typography.color, theme.entities.label.typography.fontFamily, theme.entities.label.typography.fontSize, theme.entities.label.typography.lineHeight, datePicker.colors.iconGray);
 });
@@ -124,9 +139,4 @@ const StyledDatepicker = styled(DatePicker).withConfig({
   componentId: "sc-5xkmhi-3"
-})(["", ""], _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return css(["position:absolute;z-index:1;width:24px;height:24px;top:21px;right:6px;color:", ";cursor:pointer;"], theme.entities.title.typography.color);
-});
+})(["position:absolute;z-index:1;top:21px;right:6px;cursor:pointer;"]);
 
 export { ReactDatePicker as DatePicker };

dist/esm/components/DatePicker/DatePicker.tokens.js

@@ -20,2 +20,7 @@ import { tokens } from '@equinor/eds-tokens';
   colors: {
+    text: {
+      static_icons__tertiary: {
+        rgba: iconTertiary
+      }
+    },
     interactive: {
@@ -51,3 +56,4 @@ primary__resting: {
     green13: primary13,
-    green100: primary100
+    green100: primary100,
+    iconGray: iconTertiary
   },
@@ -54,0 +60,0 @@ border: {

dist/esm/components/SideBar/index.js

 import { SideBar as SideBar$1 } from './SideBar.js';
-import { SidebarItem } from './SidebarItem/index.js';
+import 'react';
+import 'react/jsx-runtime';
+import { SidebarLink } from './SidebarLink/index.js';
+import { SideBarContent } from './SideBarContent.js';
+import { SideBarFooter } from './SideBarFooter.js';
+import { SideBarToggle } from './SideBarToggle.js';
+import { SideBarButton } from './SideBarButton/index.js';
 
 const SideBar = SideBar$1;
-SideBar.Item = SidebarItem;
-SideBar.Item.displayName = 'SideBar.Item';
+SideBar.Link = SidebarLink;
+SideBar.Content = SideBarContent;
+SideBar.Footer = SideBarFooter;
+SideBar.Toggle = SideBarToggle;
+SideBar.Button = SideBarButton;
+SideBar.Link.displayName = 'SideBar.Link';
+SideBar.Content.displayName = 'SideBar.Content';
+SideBar.Footer.displayName = 'SideBar.Footer';
+SideBar.Toggle.displayName = 'SideBar.Toggle';
+SideBar.Button.displayName = 'SideBar.Button';
 
 export { SideBar };

dist/esm/components/SideBar/SideBar.js

@@ -1,14 +0,42 @@
-import { forwardRef, useState, useEffect, useContext, createContext } from 'react';
+import { forwardRef, useEffect } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { sidebar } from './SideBar.tokens.js';
 import { bordersTemplate, useToken } from '@equinor/eds-utils';
-import { ToggleOpen } from './ToggleOpen/index.js';
-import { ActionButton } from './ActionButton/index.js';
 import { useEds } from '@equinor/eds-core-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { SideBarProvider, useSideBar } from './SideBar.context.js';
+import { jsx } from 'react/jsx-runtime';
 
-const Container = styled.div.withConfig({
-  displayName: "SideBar__Container",
+const SideBarContainer = /*#__PURE__*/forwardRef(function SideBarContainer(_ref, ref) {
+  let {
+    onToggle: onToggleCallback,
+    open = false,
+    maxHeight,
+    children,
+    ...rest
+  } = _ref;
+  const {
+    isOpen,
+    setIsOpen,
+    onToggle,
+    setOnToggle
+  } = useSideBar();
+  useEffect(() => {
+    if (onToggle === null && onToggleCallback) {
+      setOnToggle(onToggleCallback);
+    }
+  }, [onToggle, onToggleCallback, setOnToggle]);
+  useEffect(() => {
+    setIsOpen(open); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  return /*#__PURE__*/jsx(GridContainer, { ...rest,
+    open: isOpen,
+    ref: ref,
+    maxHeight: maxHeight,
+    children: children
+  });
+});
+const GridContainer = styled.div.withConfig({
+  displayName: "SideBar__GridContainer",
   componentId: "sc-1y2yis-0"
-})(_ref => {
+})(_ref2 => {
   let {
@@ -18,40 +46,14 @@ theme,
     maxHeight
-  } = _ref;
-  return css(["", " background-color:", ";display:flex;flex-direction:column;padding-bottom:", ";overflow:hidden;width:", ";min-width:", ";", ""], bordersTemplate(theme.border), theme.background, theme.spacings.bottom, open ? '256px' : '72px', open ? '256px' : '72px', maxHeight && css({
+  } = _ref2;
+  return css(["box-sizing:border-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:hidden;width:", ";min-width:", ";", ""], bordersTemplate(theme.border), theme.background, open ? '256px' : '72px', open ? '256px' : '72px', maxHeight && css({
     maxHeight: maxHeight
   }));
 });
-const LogoContainer = styled.div.withConfig({
-  displayName: "SideBar__LogoContainer",
-  componentId: "sc-1y2yis-1"
-})(_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return css(["display:flex;justify-content:center;border-top:1px solid rgba(220,220,220,1);padding-top:", ";"], theme.spacings.top);
-});
-const TopContainer = styled.div.withConfig({
-  displayName: "SideBar__TopContainer",
-  componentId: "sc-1y2yis-2"
-})(["display:grid;grid-auto-rows:1fr;align-items:center;margin-bottom:auto;"]);
-function useSideBar() {
-  const context = useContext(SideBarContext);
-
-  if (context === undefined) {
-    throw new Error('Sidebar hook must be used within Provider');
-  }
-
-  return context;
-}
-const SideBarContext = /*#__PURE__*/createContext(undefined);
 const SideBar = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
-    onAction,
-    actionLabel,
-    actionIcon,
-    toggleButton,
     onToggle,
     open = false,
     maxHeight,
-    children
+    children,
+    ...rest
   } = _ref3;
@@ -64,36 +66,14 @@ const {
   }, sidebar);
-  const [isOpen, setIsOpen] = useState(open);
-
-  const handleToggle = toggle => {
-    setIsOpen(toggle);
-    onToggle === null || onToggle === void 0 ? void 0 : onToggle(toggle);
+  const props = {
+    onToggle,
+    open,
+    maxHeight,
+    children,
+    ...rest
   };
-
-  useEffect(() => {
-    handleToggle(open); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(SideBarContext.Provider, {
-      value: {
-        isOpen
-      },
-      children: /*#__PURE__*/jsxs(Container, {
-        open: isOpen,
-        ref: ref,
-        maxHeight: maxHeight,
-        children: [toggleButton && toggleButton === 'top' && /*#__PURE__*/jsx(ToggleOpen, {
-          isOpen: isOpen,
-          onClick: () => handleToggle(!isOpen)
-        }), /*#__PURE__*/jsxs(TopContainer, {
-          children: [onAction && actionLabel && actionIcon && /*#__PURE__*/jsx(ActionButton, {
-            isOpen: isOpen,
-            icon: actionIcon,
-            label: actionLabel,
-            onAction: onAction
-          }), children]
-        }), toggleButton && toggleButton === 'bottom' && /*#__PURE__*/jsx(ToggleOpen, {
-          isOpen: isOpen,
-          onClick: () => handleToggle(!isOpen)
-        }), /*#__PURE__*/jsx(LogoContainer, {})]
+    children: /*#__PURE__*/jsx(SideBarProvider, {
+      children: /*#__PURE__*/jsx(SideBarContainer, { ...props,
+        ref: ref
       })
@@ -105,2 +85,2 @@ })
 
-export { SideBar, SideBarContext, useSideBar };
+export { SideBar };

dist/esm/index.js

 export { DatePicker } from './components/DatePicker/DatePicker.js';
 export { TimePicker } from './components/TimePicker/TimePicker.js';
-export { Autocomplete } from './components/Autocomplete/Autocomplete.js';
 export { SideBar } from './components/SideBar/index.js';
+export { useSideBar } from './components/SideBar/SideBar.context.js';

dist/types/components/DatePicker/DatePicker.tokens.d.ts

@@ -6,4 +6,5 @@ import type { ComponentToken } from '@equinor/eds-tokens';
         green100: string;
+        iconGray: string;
     };
 }
 export declare const datePicker: DatePickerToken;

dist/types/components/SideBar/index.d.ts

 import { SideBar as BaseSideBar } from './SideBar';
-import { SidebarItem, SidebarItemType as ItemType } from './SidebarItem';
+import { useSideBar } from './SideBar.context';
+import { SidebarLink, SidebarLinkProps } from './SidebarLink';
+import { SideBarContent, SideBarContentProps } from './SideBarContent';
+import { SideBarFooter, SideBarFooterProps } from './SideBarFooter';
+import { SideBarToggle } from './SideBarToggle';
+import { SideBarButton } from './SideBarButton';
 declare type SidebarType = typeof BaseSideBar & {
-    Item: typeof SidebarItem;
+    Link: typeof SidebarLink;
+    Content: typeof SideBarContent;
+    Footer: typeof SideBarFooter;
+    Toggle: typeof SideBarToggle;
+    Button: typeof SideBarButton;
 };
 declare const SideBar: SidebarType;
-export { SideBar };
-export type { SidebarType, ItemType };
+export { SideBar, useSideBar };
+export type { SidebarType, SidebarLinkProps, SideBarContentProps, SideBarFooterProps, };

dist/types/components/SideBar/SideBar.d.ts

 import { HTMLAttributes } from 'react';
-import { IconData } from '@equinor/eds-icons';
-declare type SideBarContextType = {
-    isOpen: boolean;
-};
-export declare function useSideBar(): SideBarContextType;
-export declare const SideBarContext: import("react").Context<SideBarContextType>;
 export declare const SideBar: import("react").ForwardRefExoticComponent<{
-    onAction?: () => void;
-    actionLabel?: string;
-    actionIcon?: IconData;
-    toggleButton?: 'top' | 'bottom';
     open?: boolean;
@@ -17,2 +7,1 @@ maxHeight?: string;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export {};

dist/types/index.d.ts

 export * from './components/DatePicker';
 export * from './components/TimePicker';
-export * from './components/Autocomplete';
 export * from './components/SideBar';

package.json

 {
   "name": "@equinor/eds-lab-react",
-  "version": "0.4.0-dev.20220524",
+  "version": "0.4.1",
   "description": "The lab for the Equinor Design System",
@@ -51,2 +51,3 @@ "sideEffects": [
     "@storybook/react": "^6.4.22",
+    "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -91,6 +92,6 @@ "@testing-library/react": "^12.1.5",
     "@babel/runtime": "^7.17.9",
-    "@equinor/eds-core-react": "0.19.0-dev.202205096",
-    "@equinor/eds-icons": "0.10.0-dev.202205096",
-    "@equinor/eds-tokens": "0.7.0-dev.202205096",
-    "@equinor/eds-utils": "0.2.1-dev.202205096",
+    "@equinor/eds-core-react": "0.20.1",
+    "@equinor/eds-icons": "0.11.0",
+    "@equinor/eds-tokens": "0.7.1",
+    "@equinor/eds-utils": "0.2.2",
     "@popperjs/core": "2.9.2",
@@ -97,0 +98,0 @@ "date-fns": "^2.28.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

164413

decreased by-21.34%

Dev dependency count

48

increased by2.13%

Number of package files

52

decreased by-14.75%

Lines of code

3838

decreased by-27.48%

Dependency changes

• + Added@equinor/eds-core-react@0.20.1(transitive)

• + Added@equinor/eds-icons@0.11.0(transitive)

• + Added@equinor/eds-tokens@0.7.1(transitive)

• + Added@equinor/eds-utils@0.2.2(transitive)

• - Removed@equinor/eds-core-react@0.19.0-dev.202205096(transitive)

• - Removed@equinor/eds-utils@0.2.1-dev.202205096(transitive)

• Updated@equinor/eds-core-react@0.20.1

• Updated@equinor/eds-icons@0.11.0

• Updated@equinor/eds-tokens@0.7.1

• Updated@equinor/eds-utils@0.2.2