@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/src/Dropdown/Dropdown.js

@@ -0,0 +1,98 @@
+import React, { forwardRef, useMemo, } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Field } from '../fields/Field';
+import { StyledFrontIcon } from '../fields/components/CommonInput';
+import { theme } from '../theme';
+import { useUniqueId } from '../utils/id';
+import { useControllableState } from '../utils/useControlledState';
+export const Dropdown = forwardRef(function Dropdown({ id: idProp, placeholder, showDefaultOption = false, customDefaultOption, name, value: valueProp, defaultValue, disabled = false, list, onSelect, error = false, onInputChange, onBlur, frontIcon, fallbackStyle, ...fieldProps }, ref) {
+    const [value, setValue] = useControllableState({
+        initialState: defaultValue,
+        stateProp: valueProp,
+    });
+    const id = useUniqueId(idProp);
+    const hasOptGroups = list.findIndex((item) => !!item.optionGroupLabel) !== -1;
+    const dropdownItemsGroups = useMemo(() => {
+        const itemsPerGroupLabel = new Map();
+        list.forEach((item) => {
+            const key = item.optionGroupLabel ?? '';
+            const group = itemsPerGroupLabel.get(key) ?? [];
+            group.push(item);
+            itemsPerGroupLabel.set(key, group);
+        });
+        return Array.from(itemsPerGroupLabel.values());
+    }, [list]);
+    const defaultOptionLabel = () => {
+        if (!showDefaultOption) {
+            return placeholder;
+        }
+        return customDefaultOption ?? 'Select an option';
+    };
+    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
+        React.createElement(Box, { flex: true, alignItems: "center" },
+            frontIcon && (React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" })),
+            React.createElement(StyledSelect, { id: id, disabled: disabled || list.length < 1, onChange: (event) => {
+                    const value = event.currentTarget.value;
+                    onSelect?.(value);
+                    onInputChange?.(event);
+                    setValue(value);
+                }, error: error, ref: ref, onBlur: onBlur, name: name, frontIcon: frontIcon, fallbackStyle: fallbackStyle, value: value ? value : '' },
+                hasOptGroups ? (React.createElement("optgroup", { label: defaultOptionLabel() },
+                    React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel()))) : (React.createElement("option", { value: "", hidden: !showDefaultOption, disabled: true }, defaultOptionLabel())),
+                dropdownItemsGroups.map((groupItems, i) => hasOptGroups ? (React.createElement("optgroup", { key: i, label: groupItems[0].optionGroupLabel ?? 'Other' }, groupItems.map((el, j) => (React.createElement("option", { key: `${i}-${j}`, value: el.value }, el.label))))) : (groupItems.map((el, j) => (React.createElement("option", { key: j, value: el.value }, el.label)))))),
+            React.createElement(Caret, null,
+                React.createElement(Icon, { render: "caret", color: "marzipan", size: 24 })))));
+});
+const resetSelect = css `
+  border: none;
+  border-radius: 0;
+  font-size: 16px;
+  appearance: none; /* remove default arrow */
+  outline: none;
+`;
+const StyledSelect = styled.select `
+  ${resetSelect}
+  width: 100%;
+  height: 32px;
+
+  cursor: pointer;
+  background-color: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.custard : theme.colors.cream};
+
+  border-radius: 12px;
+  padding: 18px 14px;
+  border: 2px solid
+    ${({ error }) => (error ? theme.colors.strawberry : theme.colors.oatmeal)};
+  height: auto;
+
+  ${({ frontIcon }) => frontIcon &&
+    frontIcon != '' &&
+    `
+      padding-left: 42px;
+    `}
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ${({ error }) => !error &&
+    css `
+      :not(:disabled) {
+        &:hover,
+        &:focus,
+        &:focus-visible,
+        &:checked {
+          border-color: ${theme.colors.marzipan}
+      }
+    `}
+`;
+const Caret = styled.div `
+  position: absolute;
+  z-index: 1;
+  right: 15px;
+  pointer-events: none;
+  color: ${theme.colors.marzipan};
+`;
+//# sourceMappingURL=Dropdown.js.map

package/dist/src/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAG9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAmClE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,WAAW,EACX,iBAAiB,GAAG,KAAK,EACzB,mBAAmB,EACnB,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,aAAa,EACb,MAAM,EACN,SAAS,EACT,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAoC;IAEpC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,YAAY,EAAE,YAAY;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC,CAAA;IACF,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;IAE7E,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE;QACvC,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAA0B,CAAA;QAE5D,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACpB,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;YACvC,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAA;YAE/C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAChB,kBAAkB,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;QACpC,CAAC,CAAC,CAAA;QAEF,OAAO,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC,CAAA;IAChD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACvB,OAAO,WAAW,CAAA;QACpB,CAAC;QACD,OAAO,mBAAmB,IAAI,kBAAkB,CAAA;IAClD,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ;YAC1B,SAAS,IAAI,CACZ,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,SAAS,EACjB,KAAK,EAAC,QAAQ,GACd,CACH;YACD,oBAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;oBAEvC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAA;oBACjB,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;oBACtB,QAAQ,CAAC,KAAK,CAAC,CAAA;gBACjB,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;gBAExB,YAAY,CAAC,CAAC,CAAC,CACd,kCAAU,KAAK,EAAE,kBAAkB,EAAE;oBACnC,gCAAQ,KAAK,EAAC,EAAE,EAAC,MAAM,EAAE,CAAC,iBAAiB,EAAE,QAAQ,UAClD,kBAAkB,EAAE,CACd,CACA,CACZ,CAAC,CAAC,CAAC,CACF,gCAAQ,KAAK,EAAC,EAAE,EAAC,MAAM,EAAE,CAAC,iBAAiB,EAAE,QAAQ,UAClD,kBAAkB,EAAE,CACd,CACV;gBAEA,mBAAmB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CACzC,YAAY,CAAC,CAAC,CAAC,CACb,kCACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,gBAAgB,IAAI,OAAO,IAE/C,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,gCAAQ,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IACtC,EAAE,CAAC,KAAK,CACF,CACV,CAAC,CACO,CACZ,CAAC,CAAC,CAAC,CACF,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,gCAAQ,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IAC5B,EAAE,CAAC,KAAK,CACF,CACV,CAAC,CACH,CACF,CACY;YACf,oBAAC,KAAK;gBACJ,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,EAAE,GAAI,CAC5C,CACJ,CACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;CAMtB,CAAA;AAQD,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAS;IACvC,WAAW;;;;;sBAKO,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACxC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;;;;MAKvD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAGzE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,SAAS,IAAI,EAAE;IACf;;KAEC;;;;;;;IAOD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,CAAC,KAAK;IACN,GAAG,CAAA;;;;;;0BAMmB,KAAK,CAAC,MAAM,CAAC,QAAQ;;KAE1C;CACJ,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;WAKb,KAAK,CAAC,MAAM,CAAC,QAAQ;CAC/B,CAAA"}

package/dist/src/Dropdown/index.js

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+//# sourceMappingURL=index.js.map

package/dist/src/Dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/src/Emoji/Emoji.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+export const Emoji = ({ className = '', symbol, size = 12, label, ...marginProps }) => (React.createElement(Container, { as: "span", className: className, size: size, role: "img", "aria-label": label, ...marginProps }, symbol));
+const Container = styled(Box)(({ size }) => css `
+    font-size: ${size}px;
+  `);
+//# sourceMappingURL=Emoji.js.map

package/dist/src/Emoji/Emoji.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","sourceRoot":"","sources":["../../../src/Emoji/Emoji.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAa5B,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,EACL,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,WAAW,IAEd,MAAM,CACG,CACb,CAAA;AAMD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;iBACF,IAAI;GAClB,CACF,CAAA"}

package/dist/src/Emoji/index.js

@@ -0,0 +1,2 @@
+export { Emoji } from './Emoji';
+//# sourceMappingURL=index.js.map

package/dist/src/Emoji/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Emoji/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/src/Icon/Icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { theme } from '../theme';
+import { iconList } from './iconsList';
+export const Icon = ({ className = '', render, size = 24, color = 'liquorice', rotate = 0, ...marginProps }) => {
+    if (!render || !iconList[render] || render.length === 0)
+        return null;
+    const IconComponent = iconList[render];
+    return (React.createElement(Container, { as: "span", className: className, size: size, rotate: rotate, color: color, ...marginProps },
+        React.createElement(IconComponent, null)));
+};
+const Container = styled(Box)(({ size, rotate, color }) => css `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: ${size}px;
+    height: ${size}px;
+    transform: rotate(${rotate}deg);
+    svg {
+      color: ${theme.colors[color]} !important;
+    }
+  `);
+//# sourceMappingURL=Icon.js.map

package/dist/src/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAe7C,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEpE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,WAAW;QAEf,oBAAC,aAAa,OAAG,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKrB,IAAI;cACH,IAAI;wBACM,MAAM;;eAEf,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;GAE/B,CACF,CAAA"}

package/dist/src/Icon/iconFiles/Aa.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Aa: () => JSX.Element;
+export default Aa;