@equinor/eds-core-react 0.23.0-dev.20221003 → 0.24.0-dev.20221006

package/dist/esm/components/Search/Search.js

@@ -1,3 +1,6 @@
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { search as search$1, close } from '@equinor/eds-icons';
@@ -9,174 +12,185 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Input } from '../Input/Input.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
-const Container = styled.span.withConfig({
+var _excluded = ["onChange", "defaultValue", "value", "className", "style", "disabled", "onBlur", "onFocus"];
+var Container = styled.span.withConfig({
   displayName: "Search__Container",
   componentId: "sc-v8l23u-0"
-})(_ref => {
-  let {
-    disabled,
-    isFocused,
-    theme
-  } = _ref;
-  const {
-    height,
-    spacings,
-    background,
-    border,
-    clickbound,
-    entities: {
-      icon,
-      placeholder
-    },
-    states
-  } = theme;
+})(function (_ref) {
+  var disabled = _ref.disabled,
+      isFocused = _ref.isFocused,
+      theme = _ref.theme;
+  var height = theme.height,
+      spacings = theme.spacings,
+      background = theme.background,
+      border = theme.border,
+      clickbound = theme.clickbound,
+      _theme$entities = theme.entities,
+      icon = _theme$entities.icon,
+      placeholder = _theme$entities.placeholder,
+      states = theme.states;
   return css(["position:relative;background:", ";width:100%;height:", ";display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;box-sizing:border-box;", " z-index:0;svg{fill:", ";}", " ", " &::placeholder{color:", ";}", " &::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}"], background, height, bordersTemplate(border), icon.typography.color, spacingsTemplate(spacings), isFocused && bordersTemplate(states.focus.border), placeholder.typography.color, disabled ? css(["cursor:not-allowed;"]) : css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states.focus.border)), clickbound.offset, clickbound.height);
 });
-const SearchInput = styled(Input).withConfig({
+var SearchInput = styled(Input).withConfig({
   displayName: "Search__SearchInput",
   componentId: "sc-v8l23u-1"
-})(_ref2 => {
-  let {
-    theme,
-    disabled
-  } = _ref2;
+})(function (_ref2) {
+  var theme = _ref2.theme,
+      disabled = _ref2.disabled;
   return css(["height:calc(", " - 2px);align-self:start;box-shadow:unset;&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}", " &:focus{outline:none;}&:-webkit-autofill{box-shadow:0 0 0px 1000px ", " inset;}&:autofill{box-shadow:0 0 0px 1000px ", " inset;}", ""], theme.height, typographyTemplate(theme.typography), theme.background, theme.background, disabled && css(["cursor:not-allowed;"]));
 });
-const InsideButton = styled(Button).withConfig({
+var InsideButton = styled(Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-2"
-})(_ref3 => {
-  let {
-    theme,
-    isActive
-  } = _ref3;
-  const {
-    entities: {
-      button
-    }
-  } = theme;
+})(function (_ref3) {
+  var theme = _ref3.theme,
+      isActive = _ref3.isActive;
+  var button = theme.entities.button;
   return css(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, isActive && css(["visibility:visible;"]));
 });
-const Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
-  let {
-    onChange,
-    defaultValue = '',
-    value,
-    className = '',
-    style,
-    disabled = false,
-    onBlur,
-    onFocus,
-    ...rest
-  } = _ref4;
-  const {
-    density
-  } = useEds();
-  const token = useToken({
-    density
+var Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
+  var _onChange = _ref4.onChange,
+      _ref4$defaultValue = _ref4.defaultValue,
+      defaultValue = _ref4$defaultValue === void 0 ? '' : _ref4$defaultValue,
+      value = _ref4.value,
+      _ref4$className = _ref4.className,
+      className = _ref4$className === void 0 ? '' : _ref4$className,
+      style = _ref4.style,
+      _ref4$disabled = _ref4.disabled,
+      disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+      _onBlur = _ref4.onBlur,
+      _onFocus = _ref4.onFocus,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+
+  var _useEds = useEds(),
+      density = _useEds.density;
+
+  var token = useToken({
+    density: density
   }, search);
-  const isControlled = typeof value !== 'undefined';
-  const isActive = isControlled && value !== '' || defaultValue !== '';
-  const inputRef = useRef(null);
-  const [state, setState] = useState({
-    isActive,
+  var isControlled = typeof value !== 'undefined';
+  var isActive = isControlled && value !== '' || defaultValue !== '';
+  var inputRef = useRef(null);
+
+  var _useState = useState({
+    isActive: isActive,
     isFocused: false
-  });
-  useEffect(() => {
-    setState(prevState => ({ ...prevState,
-      isActive
-    }));
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  useEffect(function () {
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isActive: isActive
+      });
+    });
   }, [value, defaultValue, isActive]);
 
-  const handleOnClick = () => {
-    const inputEl = inputRef.current;
+  var handleOnClick = function handleOnClick() {
+    var inputEl = inputRef.current;
     inputEl.focus();
   };
 
-  const handleFocus = () => setState(prevState => ({ ...prevState,
-    isFocused: true
-  }));
+  var handleFocus = function handleFocus() {
+    return setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isFocused: true
+      });
+    });
+  };
 
-  const handleBlur = () => setState(prevState => ({ ...prevState,
-    isFocused: false
-  }));
+  var handleBlur = function handleBlur() {
+    return setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isFocused: false
+      });
+    });
+  };
 
-  const handleOnChange = event => {
+  var handleOnChange = function handleOnChange(event) {
     setIsActive(event.target.value);
   };
 
-  const handleOnDelete = () => {
-    const input = inputRef.current;
-    const clearedValue = '';
+  var handleOnDelete = function handleOnDelete() {
+    var input = inputRef.current;
+    var clearedValue = '';
     setReactInputValue(input, clearedValue);
-    setState(prevState => ({ ...prevState,
-      isActive: false
-    }));
+    setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isActive: false
+      });
+    });
   };
 
-  const setIsActive = newValue => setState(prevState => ({ ...prevState,
-    isActive: newValue !== ''
-  }));
+  var setIsActive = function setIsActive(newValue) {
+    return setState(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        isActive: newValue !== ''
+      });
+    });
+  };
   /** Applying props for controlled vs. uncontrolled scnarios */
 
 
-  const applyControllingProps = (props, value, defaultValue) => {
+  var applyControllingProps = function applyControllingProps(props, value, defaultValue) {
     if (isControlled) {
-      return { ...props,
-        value
-      };
+      return _objectSpread(_objectSpread({}, props), {}, {
+        value: value
+      });
     }
 
-    return { ...props,
-      defaultValue
-    };
+    return _objectSpread(_objectSpread({}, props), {}, {
+      defaultValue: defaultValue
+    });
   };
 
-  const {
-    isFocused
-  } = state;
-  const size = 24;
-  const containerProps = {
-    isFocused,
-    className,
-    style,
-    disabled,
+  var isFocused = state.isFocused;
+  var size = 24;
+  var containerProps = {
+    isFocused: isFocused,
+    className: className,
+    style: style,
+    disabled: disabled,
     role: 'search',
     'aria-label': rest['aria-label'],
     onClick: handleOnClick
   };
-  const combinedRef = useMemo(() => mergeRefs(inputRef, ref), [inputRef, ref]);
-  const inputProps = applyControllingProps({ ...rest,
-    disabled,
+  var combinedRef = useMemo(function () {
+    return mergeRefs(inputRef, ref);
+  }, [inputRef, ref]);
+  var inputProps = applyControllingProps(_objectSpread(_objectSpread({}, rest), {}, {
+    disabled: disabled,
     ref: combinedRef,
     type: 'search',
     role: 'searchbox',
     'aria-label': 'search input',
-    onBlur: e => {
+    onBlur: function onBlur(e) {
       handleBlur();
 
-      if (onBlur) {
-        onBlur(e);
+      if (_onBlur) {
+        _onBlur(e);
       }
     },
-    onFocus: e => {
+    onFocus: function onFocus(e) {
       handleFocus();
 
-      if (onFocus) {
-        onFocus(e);
+      if (_onFocus) {
+        _onFocus(e);
       }
     },
-    onChange: e => {
+    onChange: function onChange(e) {
       handleOnChange(e);
 
-      if (onChange) {
-        onChange(e);
+      if (_onChange) {
+        _onChange(e);
       }
     }
-  }, value, defaultValue);
-  const clearButtonProps = {
+  }), value, defaultValue);
+  var clearButtonProps = {
     isActive: state.isActive,
-    onClick: e => {
+    onClick: function onClick(e) {
       e.stopPropagation();
 
       if (state.isActive) {
@@ -186,13 +200,12 @@ const Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
   };
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(Container, { ...containerProps,
+    children: /*#__PURE__*/jsxs(Container, _objectSpread(_objectSpread({}, containerProps), {}, {
       children: [/*#__PURE__*/jsx(Icon, {
         data: search$1,
         "aria-hidden": true,
         size: size
-      }), /*#__PURE__*/jsx(SearchInput, { ...inputProps
-      }), /*#__PURE__*/jsx(InsideButton, { ...clearButtonProps,
+      }), /*#__PURE__*/jsx(SearchInput, _objectSpread({}, inputProps)), /*#__PURE__*/jsx(InsideButton, _objectSpread(_objectSpread({}, clearButtonProps), {}, {
         "aria-label": 'clear search',
         title: "clear",
         variant: "ghost_icon",
@@ -200,8 +213,8 @@ const Search = /*#__PURE__*/forwardRef(function Search(_ref4, ref) {
           data: close,
           size: 16
         })
-      })]
-    })
+      }))]
+    }))
   });
 }); // Search.displayName = 'eds-search'
 

package/dist/esm/components/Search/Search.tokens.js

@@ -1,41 +1,17 @@
 import { tokens } from '@equinor/eds-tokens';
 
-const {
-  colors: {
-    ui: {
-      background__light: {
-        rgba: background
-      }
-    },
-    interactive: {
-      primary__hover_alt: {
-        rgba: primaryHoverAlt
-      },
-      primary__resting: {
-        rgba: primaryColor
-      }
-    },
-    text: {
-      static_icons__tertiary: {
-        rgba: placeholderColor
-      }
-    }
-  },
-  spacings: {
-    comfortable: {
-      small
-    }
-  },
-  typography: {
-    input: {
-      text: typography
-    }
-  },
-  shape
-} = tokens;
-const search = {
-  background,
-  typography,
+var _tokens$colors = tokens.colors,
+    background = _tokens$colors.ui.background__light.rgba,
+    _tokens$colors$intera = _tokens$colors.interactive,
+    primaryHoverAlt = _tokens$colors$intera.primary__hover_alt.rgba,
+    primaryColor = _tokens$colors$intera.primary__resting.rgba,
+    placeholderColor = _tokens$colors.text.static_icons__tertiary.rgba,
+    small = tokens.spacings.comfortable.small,
+    typography = tokens.typography.input.text,
+    shape = tokens.shape;
+var search = {
+  background: background,
+  typography: typography,
   height: '36px',
   clickbound: {
     offset: {